从url输入到页面渲染发生了哪些事
2024-01-19 00:52:31 0 举报AI智能生成
从输入URL到页面渲染，这个过程包含了以下几个核心步骤：首先，浏览器会解析URL，获取必要的信息，如协议、主机名、端口号和路径等。然后，浏览器会通过DNS解析服务获取对应主机的IP地址。接着，浏览器会建立一个TCP连接，向服务器发送HTTP请求。服务器接收到请求后，会根据请求信息处理相应的数据，并返回HTTP响应。浏览器接收到响应后，会根据响应内容进行解析，包括HTML、CSS和JavaScript等文件。最后，浏览器会根据解析的结果进行渲染，将页面呈现给用户。此外，这个过程还包括一些额外的步骤，如浏览器的缓存机制、安全检查等。
作者其他创作
大纲/内容
DNS解析
首先url（uniform resource locator）统一资源定位符，俗称网址。
包括以下部分
scheme
协议类型如http， https， ftp，file
其中https是加密的网络传输
host
定义域主机www
domain
域名 baidu.com
port
端口号，http默认为80端口
filename
定义资源名称
将域名解析成ip地址
第一步要进行域名解析，浏览器不能通过主机名、域名直接找到对应的服务器，他需要IP地址
IP地址是分配给每个网络和每一台主机的一个逻辑地址
人们更容易记忆字母+数字组合的域名，域名是ip地址的另一种表示或者说一副面具
DNS协议通过域名查找ip地址，或逆向从IP查找域名的服务，DNS是一个网络服务器，我们的域名就是DNS上记录的一条线信息比如 baodu.com 220.114.23.56 80
如何通过域名查找ip地址
1. 浏览器会按照一定频率缓存DNS记录
2. 操作系统也可能会缓存DNS记录
3. 路由器缓存的DNS记录
4. ISP 互联网服务供应商缓存的DNS
5. 根服务器递归查询DNS。 baidu.com.cn为例它先询问.cn再循环com.cn再询问baidu.com.cn
DNS服务器把查询到的ip得知返回浏览器，浏览器把ip地址打在协议上再添加请求参数发送给对应的服务器
TCP连接
tcp三次握手
客户端发送数据之前，TCP三次握手用来同步客户端和服务端的序列号和确认号，并交换TCP窗口大小信息
1. 客户端发送SYN=1, Seq=x的数据包到服务器端口
SYN是同步位，1表示同步，0代表不是同步。seq是序列号
2. 服务器返回一个带SYN=1, ACK=1,ack=x+1, Seq=Y的相应包表示传达确认信息
ACK表示是确认报文，ack是应答，会把客户端的Seq+1返回，再返回一个服务端的序列号
3. 客户端回传ACK=1, ack=Y+1, Seq=z的数据包，代表握手结束
客户端ACK把服务端发送来的新序列号+1，再返回自己的序列号x+1
三次握手为了防止已经失效的连接请求报文突然又传送到了服务端，因而产生错误。场景：client先返送请求1，再发送请求2，但是请求1由于网络原因晚了很久才到达server，而是请求2先到，这时候实际上请求1已经失效了，如果是2次握手，那么服务端再之后又收到了请求1，就会断掉请求2的连接又重新建立了请求1的连接
发送http请求
请求报文由 请求行（request line） 请求头（request header） 请求体（body）组成
请求行
包含方法、url、协议版本
请求头
Host、keepalive，userAnget等
请求体
承载的请求参数
服务器处理请求并返回http报文
服务器是网络环境中的高新能计算机，它侦听其他计算机（客户机）提交的服务请求，并提供相应的服务如网页服务、文件下载。服务上可以安装web Server，常见的又apache、nginx等
web server担任管控角色，对于用户发送来的请求，结合配置文件，把不同的请求委托给不同的程序处理，然后返回后台程序处理产生的结果
http相应报文由响应行（response line）响应头（reponse header） 响应体(reponse body) 组成
响应行包括请求方法、状态码
响应头包含响应报文的附件信息
响应体包含响应数据
跨域问题
协议、域名、端口号有一个不同就会跨域，是一种安全策略
跨域之后允许发送，服务器也能收到请求并响应，但浏览器不允许数据返回到页面
解决跨域的方法
1. jsonp
利用script标签的src属性。浏览器遇到script的src属性就会下载对应的脚本。在脚本链接里面加上一个函数名称（前端对应函数已经存在），让后段使用这个函数把需要返回的值放到函数参数中。前端收到的脚本就是带有返回值参数的对应函数调用。
仅支持get方法
2. cors
服务器端设置Access-control-allow-origin就开启的cors跨域，它表示哪些域名可以访问这些资源，通配符表示都可以访问
3. postMessage
可以实现跨窗口之间的通信
4. websocket
全双工双向通信，简历链接时需要借助http协议，一旦链接建立完成，就喝http协议无关了
5. node中间件代理
同源策略时浏览器不让读，所以如果是服务器和服务器之间的通讯就没有问题了
所以使用一个中间服务器，代理发送过来的请求，当然这个中间件也要设置允许跨域（比如使用cors），它在把请求发送给真正的目标服务器，等待目标服务器返回数据，再由解决了跨域问题的中间件返回响应
6. ngix反向代理
7. iframe+window.name
window.name在加载不同窗口时只要不手动修改name值就不会变化，哪怕跨域
在A页面中可以先创建一个iframe链接为B，在B中设置window.name的值。监听B页面onload方法，加载完成就把iframe的连接指向一个同域页面，这样就可以再window.name中取到想要的值了
8. location.hash + iframe
同域名下的页面可以用js操作，不同域名下的时候可以吧数据放到url的hash上。
a和c通信，可以引入一个和a同域的页面b。a传入的c的数据放到c的url hash上，c中新建一个iframe，url为b，hash上有c中的数据，由于b和a同域，可以使用 window.parent.parent.location.hash = location.hash传递c中的数据到a
9. document.domain+iframe
http返回之后可以协议缓存
强缓存
expire 设置一个过期时间，在这个时间之前的都会走浏览器缓存，status code 为200。缺点是前端可以改时间
cache-control
max-agehe s-maxage这是过期的秒数，这个时间段之前都走缓存
优先级比expire高
no-cache 其实协商缓存，需要询问服务端数据有没有更新
no-store 不管有没有更新都使用服务器最新值
public 客户端和代理服务器都可以缓存
private 只有客户端能够缓存
协商缓存
last-modified&&if-modified-since
服务端带着更改时间到前端，前端再次访问相同接口时if-modified-since携带服务器返回的时间。如果时间小于服务器上新的更改时间，说明数据有改变，就是用服务器最新的数据，否则是用缓存
etag&&if-non-match
服务器第一次返回带有一个摘要，再次请求时摘要放到if-non-match中，如果摘要有变化说明数据有变化
service worker
和cacheControl一起可以实现编程式缓存，通过js来编写哪些接口需要缓存
浏览器解析渲染页面
浏览器拿到响应文本HTML之后，进行解析然后渲染
1. 解析html生成DOM树
把返回的html解析称二进制在解析称浏览器使用的标签，生成DOm树，深度优先遍历，先构建一个节点的所有子节点再构建下一个兄弟节点。遇到scriopt标签会暂停构建，知道脚本执行完毕
script 如果有defer或者async标志则不会阻塞，defer会等所有js加载完成，文档解析完成后再执行，async会在脚本下载完成就执行
2. 解析css生成css规则树
浏览器在css规则树生成之前不会渲染，因为css最后一天规则可能打乱整个布局
3. 结合DOm树和css树，生成一个渲染树
4. 布局，根据渲染树计算每个节点的位置等信息
计算每个渲染对象的位置和尺寸
重排（回流）：布局完成后，发现某个部分发生变化影响了布局就需要重新排列布局，再重绘。
改变字体颜色、背景颜色不会重排，只会重绘
translate替代定位，不会重排，因为translate会进行GPU加速，这个元素单独作为一个绘图层交给GPU渲染，然后再composite混合不会引起重排
改变元素位置、大小引起布局变化就会重排
查询offsetWidth、offsetHeight会引起重排
5. 根据计算好的信息绘制页面
遍历呈现树，把内容显示再屏幕上
重绘：元素背景、文字颜色改变，不影响周围或内部元素布局的属性会引起重绘。重排一定重绘，重绘不一定重排
断开连接
TCP四次挥手
注意客户端和服务端都能主动发出挥手动作，结束连接需要发送一个Fin=1，表示这个方向上没有数据发送了
1. 发起方向被动方发送报文，Fin,ACK,Seq，表示已经没有数据传输了，进入FIN_wait_1状态
2. 服务器向浏览器发送ACK， Seq，表示同意关闭请求，进入FIn_WAIT_2状态
3. 服务请向客户端发送Fin， Ack， Seq，请求关闭连接。进入LAST_ACK状态
4. 发起方向被动方发送报文ACK，Seq，进入TIme-WAIT状态，被动方接受到报文段后关闭连接。发起方等待一段时间没有回复就正常关闭。
0 条评论
下一页
