- 凡是涉及到性能优化相关的话题，必定和浏览器相关，因此我们先从浏览器的最基础入手来查看
一、在浏览器中输入URL到页面渲染的整个过程
1、输入URL按下回车
1、应用层进行DNS解析:通过DNS解析将域名解析成IP地址，在解析的过程中按照浏览器缓存、系统缓存、路由缓存、DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存。直到拿到IP地址
2、应用层生成HTTP请求报文
HTTP请求报文结构
- user-Agent:浏览器类型
- Accept：客户端希望接收的数据类型
- Content-Type:发送端发送的数据类型
- Host：请求的主机名
- Cookie
- Referer:客户端通过这个告诉服务器，是从哪个资源访问服务器的
- If-Modified-Since：客户端告诉服务器，资源缓存的时间
- Cache-Control
3、传输层建立TCP连接:传输层的传输协议分为UDP(用户数据协议)和TCP(传输控制协议)两种(详情看结尾处HTTP和HTTPS及TCP握手/挥手)
4、网路层使用IP协议来选择线路(路由)
5、数据链路层实现网络相邻结点间可靠的数据通信
6、物理层传输数据
汇总: DNS解析URL地址、生成HTTP请求报文、构建TCP连接、使用IP协议选择传输路线、数据链路层保证数据的可靠传输、物理层传输数据
2、浏览器渲染部分
想要了解浏览器的渲染，我们就需要先了解一下帧的概念，要知道浏览器的每一帧都做了哪些事情。
1、目前大多数设备屏幕刷新率为60次/秒
2、当每秒绘制的帧达到60的时候页面是流畅的，小于这个值的时候用户就会感觉到卡顿
3、每帧的预算时间是16.66
4、每帧的开头包括样式计算 布局 绘制等
5、JS引擎和页面渲染引擎在同一个渲染线程,GUI渲染和JS执行两者是互斥的
6、如果某个执行的时候过长浏览器就会推迟渲染
每一帧需要做的事情:
-input event(输入事件) -> JS定时器 -> 开始帧(window resize scroll...) -> requestAnimationFrame(动画) -> Layout(布局) -> paint(绘制) -> 空闲时间(执行用户代码等)
3、浏览器渲染流程
1、HTML解析：浏览器首先会将接收到的HTML代码进行解析，构建DOM（文档对象模型）树。DOM树表示了HTML文档的结构，包括标签、属性和它们之间的关系。
注意:
DOM树在构建的过程中可能会被CSS和JS加载而阻塞
display:none的元素也会在DOM树中
注释也会在DOM树中
script标签也会在DOM树中
无论是DOM还是CSSOM，都是要经过Bytes→characters→tokens→nodes→objectmodel这个过程
2、CSS解析：浏览器解析CSS样式表，构建CSSOM（CSS对象模型）树。CSSOM树表示了CSS样式的层级关系、选择器和样式属性。
注意:
CSS解析可以与DOM解析同时进行
CSS解析与script的执行互斥
在Webkit内核中进行了script执行优化，只有在JS访问CSS时才会发生互斥。
3、DOM和CSSOM合成：浏览器将DOM树和CSSOM树合成为一棵渲染树（Render Tree）。渲染树只包含需要显示的元素和对应的样式信息，不包含隐藏的元素或不可见的元素。
注意:
Render Tree 和 DOM Tree并不完全对应
display:none的元素不再Render Tree中
visibility:hidden元素在Render Tree中
4、布局（Layout）：浏览器根据渲染树计算每个元素的位置和大小，确定它们在页面中的准确位置。这个过程也被称为回流（reflow）或排版（layout）。
注意:减少回流的次数
用transform做形变和位移可以减少reflow。
避免逐个修改节点样式，尽量一次性修改。
使用DocumentFragment将需要多次修改的DOM元素缓存，最后一次性append到真实DOM中渲染
5、绘制（Painting）：浏览器遍历渲染树，根据元素的位置、大小和样式属性进行绘制，将页面内容呈现到屏幕上。这个过程涉及到颜色、字体、边框、阴影等绘制操作。
6、栅格化（Rasterization）：浏览器将绘制得到的页面内容转换为位图（Bitmap），以便在屏幕上显示。栅格化过程将绘制的矢量图形转换为像素图像。
7、合成（Compositing）：如果页面中有多个图层（例如，有定位、透明度、动画效果等），浏览器会将这些图层进行合成，形成最终的屏幕显示。
8、显示：最后，浏览器将合成后的图像发送给GPU（图形处理单元），由GPU将图像显示在屏幕上，完成整个页面的渲染过程。
4、为什么要将CSS放在HTML的最前面？
加载顺序：当浏览器解析HTML页面时，它是从上到下逐行解析的。如果CSS样式表在HTML文档的头部引入，浏览器可以尽早开始加载和解析样式信息，确保在页面的渲染过程中能够正确应用样式。如果CSS样式表放在HTML的底部，浏览器需要等待整个HTML文档加载完成，才能开始加载样式表，这可能导致页面在开始渲染时没有样式，呈现出一种闪烁的效果。
渲染性能：将CSS样式表放在头部可以减少页面的首次渲染时间。当浏览器解析HTML文档时，如果遇到外部样式表的引入，它会启动并行下载该样式表，然后在下载过程中继续解析HTML文档。这样，当HTML解析完成后，样式表已经下载完毕，浏览器可以立即应用样式并开始渲染页面，提高了页面加载速度和用户体验。
样式优先级：CSS样式表中的规则是按照顺序生效的，后面的规则会覆盖前面的规则。如果将样式表放在HTML底部，可能会导致页面在渲染过程中先应用了默认的样式，然后突然发生变化，给用户一种不稳定的感觉。通过将样式表放在头部，可以确保样式在页面开始渲染之前已经加载和应用，避免不必要的样式变化。
5、构建CSS树的时候会阻塞DOM树的构建吗？
在一般情况下，解析CSS不会阻塞HTML的解析。浏览器通常会尽量并行处理HTML和CSS的解析，以提高页面加载性能。
当浏览器下载HTML文档时，如果在HTML中遇到外部CSS文件（例如link标签或style标签中的外部CSS链接），它会启动CSS文件的下载，同时继续解析HTML文档的其余部分。这意味着HTML文档的解析和渲染不会等待CSS文件完全下载和解析。
然而，有一个重要的例外情况，即在某些情况下，CSS解析可能会阻塞页面的渲染。这通常发生在以下情况下：
如果在HTML中使用了内联CSS（即在HTML文档中使用style标签或在HTML标签的style属性中定义样式），浏览器会在解析到这些内联CSS时，等待它们的解析和应用，直到继续解析HTML文档。这可能会导致HTML解析被阻塞。
如果在CSS中使用了外部资源，例如通过url()函数引用的背景图像或字体文件，浏览器在解析CSS时会开始下载这些外部资源。如果这些资源的下载速度很慢或失败，可能会导致CSS解析阻塞页面渲染。
总之，虽然在大多数情况下，浏览器会尽量并行处理HTML和CSS的解析，但在某些特殊情况下，CSS解析可能会导致HTML解析被阻塞。因此，在开发和优化网页时，需要注意如何组织CSS和避免可能导致阻塞的情况。
网友评论