浏览器如何渲染网页

浏览器如何将一个url绘制成页面

• DNS解析：浏览器首先会进行DNS解析，将域名解析为服务器的IP地址，以便建立与服务器的连接。

• 建立TCP连接：浏览器通过TCP协议与服务器建立连接，以便发送和接收数据。

• 发送HTTP请求：浏览器向服务器发送HTTP请求，请求特定的资源（如HTML、CSS、JavaScript文件等）。

• 服务器处理请求：服务器接收到请求后，会处理请求并返回相应的资源。服务器端可能会进行一些处理，如数据库查询、动态内容生成等。

• 接收响应：浏览器接收到服务器返回的响应，响应包括HTTP状态码、响应头和响应体。

• 解析HTML：浏览器开始解析HTML文件，构建DOM（文档对象模型）树。

• 构建CSSOM：浏览器解析CSS文件，构建CSS对象模型（CSSOM）。

• 合并DOM和CSSOM：浏览器将DOM和CSSOM合并成一个渲染树（Render Tree），用于确定页面上元素的布局。

• 布局和绘制：浏览器根据渲染树进行布局（Layout）和绘制（Paint），确定每个元素在页面上的位置和样式。

• 渲染页面：最终，浏览器将页面渲染到屏幕上，用户就可以看到页面内容了。

重绘和回流

• 重绘是当前节点需要更改外观而不影响布局的，比如颜色变更
• 回流是布局和几何属性发生变化

减少重绘和回流

• 使用Css动画替代JS动画，Css动画会触发GPU加速，性能更好
• 使用visibility：hidden 替代 display：none来隐藏元素
• 对于大量数据获图片，通过懒加载和虚拟列表，只加载可见区域的内容，减少DOM操作
• 动画实现的速度，通过 requestAnimationFrame 来控制
• 使用文档片段（Document Fragment）：当需要频繁操作 DOM 元素时，可以先将它们添加到文档片段中进行操作，然后再一次性将文档片段添加到文档中，减少回流次数。