页面加载过程
2020-06-07 本文已影响0人
学的会的前端
HTML页面的组成部分
HTML本身，JS和CSS等静态文件，图片，JSON接口等。这些资源一般都是通过HTTP或HTTPS发送请求。然后从浏览器返回数据，浏览器解析。
资源加载过程
- 资源加载过程：
对于请求来说，无论是地址栏输入还是代码里加载的，都会有一个URL，通过这个URL，会发起HTTP或https请求，请求过程：查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，直接在屏幕显示页面，如果没有则进行一下步骤：网络服务器解析URL，提取出里面的信息，取到解析后的域名，通过DNS服务器查询，得到对应的域名的IP地址， 三次握手建立TCP连接，浏览器通过GET/POST发动HTTP请求数据，服务器返回HTTP响应，返回资源，浏览器针对资源的类型进行解析渲染。四次挥手断开连接
URL解析 ---> DNS查询 ---> 资源请求 ---> 浏览器解析 ---> 断开连接 - 三次握手和四次挥手
- URL结构
http://www.baidu.com:80/get_data_do?productld=1#title
http:// 协议名
www.baidu.com:80 域名+端口号，域名是查找服务器的位置，
http协议的默认端口号是80，HTTPS默认端口号是43，默认端口号可以不写。
/get_data_do 路径，服务器接到请求后，用这个路径在服务器上定义自愿的位置。
?productld=1 请求参数 用来传递请求资源的特点
#title 哈希，前端页面的锚点,用来标记页面的位置（对于后端来说，这个字段一般没啥用）
- DNS查询
- 什么是DNS?
域名系统（DNS）将人类可读的域名（例如：www.lala.com）转换成机器可读的IP地址，（例如：192.0.0.1)，管理名称和数字之间的映射关系。 - 查询
DNS服务器可以将名称请求转换为IP地址，从而控制最终用户在web浏览器中输入域名时所访问的服务器，成为查询。请求域名 ---> IP地址
在互联网上，所有的资源都是通过IP地址来定位的。 - DNS查询
DNS缓存：用来减少在DNS服务器上的查询量（缓存有时间限制）。DNS缓存并不是一个，而是很多，浏览器上有，DNS服务器上也有，而且根据不同的网络层，缓存的事件也不太一样。越靠近用户的节点，缓存的时间越短，DNS根服务器上的缓存事件最多可达10分钟，浏览器的缓存时间一般在1分钟或30s。 - DNS缓存可以用来减少DNS解析这个过程的耗时，DNS解析可能会增加请求的延迟，对于那些需要请求许多第三方的资源的网站而言，DNS解析的耗时延迟可能会大大降低网页加载性能。
- DNS服务器 + DNS缓存 组成了DNS系统。
- DNS 解析的过程
浏览器-------（发送域名） DNS缓存 + DNS服务器
DNS缓存 + DNS服务器 ------- （返回IP地址）浏览器
- dns-prefetch
dns-prefetch可帮助开发人员处理DNS解析延迟问题。
dns-prefetch仅对跨域域上的DNS查找有效
dns-prefetch的MDN文档
<link rel = "dns-prefetch" href = "//cdn.bootcss.com">
对DNS做优化（前端方面）。原理：就是在页面一加载的时候，就会立即把href指定的域名做DNS查询，并且缓存起来，当真正做域名解析时，就可以省去DNS查询的时间，可提高页面加载的请求速度。
资源请求的过程
资源可以是html,css,js，请求接口等。可以通过HTTP请求得到的响应的任何内容。
浏览器---> (Request-header + 参数（Url或body）)后端服务器
后端服务器 ----> (status + Response-header)浏览器
浏览器解析资源
浏览器对于页面的解析是至上而下的，通过解析html来构建DOM树，当解析到<link>标签或@import时，就会请求服务器获取css文件，在下载的同时浏览器还是会继续向下解析的，但当下载js文件和执行它时，解析器便会停止手头的工作，等待js的操作完成后再向下解析，这便是js的阻塞问题，也是为什么<link>标签可以放在<head>中，而引入的js文件最好放在</body>前面的原因，这样可以避免js阻塞了html的解析而导致页面短时间内无法呈现在用户面前的尴尬情况。
html5中提供了defer和async来实现js外联的无阻塞加载
<link>和@imoprt的区别：
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
link支持使用Javascript控制DOM去改变样式；而@import不支持
浏览器渲染页面
- 解析html的时候会生成DOM树，而解析css则会生成CSSOM树，前者描述内容，后者描述应用与内容的样式规则。
- DOM树和CSSOM结合在一起会构成一棵渲染树，渲染树既包含了页面上所有的可视DOM节点，又包含了CSSOM中每个节点的样式信息。
- 渲染树的构建步骤：
- 从DOM树的根节点开始，遍历所有的可视节点，不可视节点有：
a 脚本标签，元数据标签
b 应用display：none的元素 - 对于可视节点，从CSSOM中找到对应的样式规则，附加在节点上
- 输出可视节点以及每个节点计算出来的样式
布局
-
通过渲染树，浏览器已经能知道可视内容的样式信息了，但是真正要渲染时，我们还需要获取节点的位置和尺寸，这是布局阶段要做的工作，也成为“回流”（reflow）.
-
布局阶段的输出结果成为“盒模型”（box model），盒模型精确表达了窗口中元素的位置和大小，所有相对的度量单位都会被转化为屏幕上的绝对像素位置。
-
当以上步骤都完成后，浏览器就能把节点绘制成屏幕上每个真实的像素点了，此阶段为“绘制”或者“重绘”（resterizing）
