浏览器渲染:理解页面加载的幕后工作

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 浏览器渲染:理解页面加载的幕后工作

摘要:


💡 本文将带你深入了解浏览器的渲染过程,探讨从输入 URL 到页面呈现的整个流程。通过了解浏览器渲染机制,你可以优化页面性能,提升用户体验。


引言:


🌱 大家好,我是阿珊。在日常开发中,我们经常关注代码的编写和功能的实现,但往往忽略了浏览器在加载和渲染页面时的幕后工作。今天,我将和大家一起探索浏览器渲染的过程,了解页面从输入 URL 到呈现的整个旅程。


正文:


1. 输入 URL 后的幕后工作🔗

当我们在浏览器中输入一个 URL 并按下回车键时,浏览器会启动一个进程来加载页面。这个过程主要包括以下几个步骤:


  1. 解析 URL:浏览器会将输入的 URL 解析成协议、主机、端口、路径和查询字符串等部分。
  2. 建立连接:浏览器会创建一个 TCP 连接,通过三次握手与目标服务器建立连接。
  3. 发送 HTTP 请求:浏览器会将解析后的 URL 信息封装成一个 HTTP 请求,并通过建立的 TCP 连接发送给目标服务器。
  4. 接收 HTTP 响应:浏览器会接收目标服务器返回的 HTTP 响应,并解析响应内容,包括响应状态码、响应头和响应体等。
  5. 解析 HTML:浏览器会将 HTTP 响应体中的 HTML 内容解析成 DOM 树。
  6. 解析 CSS:浏览器会解析 HTML 中的样式表,并将其应用到 DOM 树上,生成 CSSOM 树。
  7. 解析 JavaScript:浏览器会解析 HTML 中的脚本,并将其执行,可能会修改 DOM 树和 CSSOM 树。
  8. 布局和绘制:浏览器会将 DOM 树和 CSSOM 树转换为屏幕上的像素,进行布局和绘制。
  9. 显示页面:浏览器将布局和绘制好的页面显示给用户。


以上步骤完成后,浏览器就会加载并显示页面。


2. 浏览器渲染流程🔨

浏览器接收到服务器返回的资源后,会进行解析和渲染。


整个渲染流程大致可以分为以下几个阶段:


(1)解析 HTML:浏览器从返回的 HTML 数据中构建 DOM 树。

(2)构建 CSSOM:浏览器解析 CSS 文件,构建 CSS 对象模型(CSSOM)。

(3)合并 DOM 和 CSSOM:浏览器将 DOM 和 CSSOM 合并,生成渲染树(Rendering Tree)。

(4)布局(Layout)和绘制(Paint):浏览器计算渲染树中各个元素的位置和大小,并将其绘制到屏幕上。

(5)合成(Compositing):浏览器对渲染树进行分层,将不同层合并到一起,形成最终的页面效果。


3. 优化浏览器渲染🚀

为了提升页面性能和用户体验,我们可以从以下几个方面优化浏览器渲染:


(1)减少 HTTP 请求:合并文件、使用 CDN、懒加载等。

(2)优化资源大小:压缩文件、使用压缩算法等。

(3)优化 CSS 和 JavaScript:减少重绘和回流、使用缓存、避免阻塞等。

(4)使用 Web Workers:将耗时的 JavaScript 任务分配到后台线程中执行。


4.浏览器渲染注意事项

浏览器渲染页面时,需要注意以下几点:


  1. 减少重排和重绘:重排和重绘会降低页面性能,因此应该尽量避免。可以通过以下方法减少重排和重绘:


使用CSS3的transform属性而不是top、left等属性来移动元素。因为transform属性不会触发重排和重绘。

使用window.requestAnimationFrame()来避免频繁的repaint和reflow。

使用document.createElement()和document.createTextNode()来创建新元素,而不是直接修改DOM结构。


  1. 使用缓存:浏览器会缓存已加载的页面,当再次访问时,可以直接从缓存中加载,从而提高加载速度。可以使用<link>标签的rel="cache"属性来启用缓存。


  1. 使用<script>标签的defer和async属性:defer属性会将脚本延迟到DOM加载完成后执行,async属性会异步执行脚本,这两种方法都可以避免脚本阻塞页面渲染。


  1. 避免使用eval()和Function():eval()和Function()函数会阻塞页面渲染,应该尽量避免使用。可以使用setTimeout和setInterval来异步执行代码。


  1. 使用Content Security Policy(内容安全策略):CSP可以防止跨站脚本攻击(XSS),同时可以控制页面允许加载的资源。


  1. 优化图片加载:可以使用<picture>标签来根据设备像素比(devicePixelRatio)选择合适的图片尺寸,以减少加载时间。


  1. 使用Viewport:Viewport可以控制页面在不同设备上的缩放,从而提高页面在不同设备上的显示效果。


  1. 避免使用@font-face:@font-face会阻塞页面渲染,应该尽量避免使用。可以使用在线字体或者本地字体文件来替代。


  1. 避免使用document.write():document.write()会阻塞页面渲染,应该尽量避免使用。可以使用createElement和createTextNode来创建新元素,然后将新元素添加到DOM树中。


  1. 避免使用innerHTML:innerHTML会触发重排和重绘,应该尽量避免使用。可以使用createElement和createTextNode来创建新元素,然后将新元素添加到DOM树中。


总结:🎯


本文介绍了浏览器渲染的过程,探讨了从输入 URL 到页面呈现的整个流程。通过了解浏览器渲染机制,我们可以优化页面性能,提升用户体验。


在实际开发中,我们可以遵循一些最佳实践来优化浏览器渲染,从而提高页面质量。


参考资料:📚


  1. 浏览器工作原理:从输入 URL 到页面呈现
  2. Understanding the Web Page Rendering Process
相关文章
|
1月前
|
存储 前端开发 开发者
|
23天前
|
缓存 自然语言处理 前端开发
浏览器渲染
【10月更文挑战第28天】浏览器渲染涉及将HTML、CSS和JavaScript代码转换为可视网页,主要步骤包括:解析HTML构建DOM树、解析CSS构建CSSOM树、合并DOM与CSSOM生成渲染树、布局确定元素位置和尺寸、绘制元素到屏幕、合成图层形成最终图像。此过程不断优化以提升性能。
|
1月前
|
前端开发 JavaScript 异构计算
简述浏览器的渲染原理
浏览器渲染原理主要包括以下步骤:1)解析HTML文档生成DOM树;2)解析CSS生成CSSOM树;3)结合DOM与CSSOM生成渲染树;4)布局计算(回流)确定元素大小和位置;5)绘制(Paint)将节点转为图形内容;6)合成(Composite)多层图像。整个过程从文档解析到最终输出完整网页,并通过优化技术提升性能。
|
5月前
|
移动开发 前端开发 JavaScript
浏览器端图表渲染技术SVG, VML HTML Canvas
浏览器端图表渲染技术SVG, VML HTML Canvas
40 0
|
6月前
|
前端开发 JavaScript 数据可视化
探索浏览器的内心世界:渲染机制的奥秘
探索浏览器的内心世界:渲染机制的奥秘
探索浏览器的内心世界:渲染机制的奥秘
|
6月前
|
消息中间件 JavaScript 前端开发
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)
106 0
|
6月前
|
缓存 安全 搜索推荐
解决2023新版Edge浏览器页面加载不出来问题
解决2023新版Edge浏览器页面加载不出来问题
282 0
|
6月前
|
消息中间件 前端开发 Java
【面试题】前端必修-浏览器的渲染原理
【面试题】前端必修-浏览器的渲染原理
|
存储 缓存 前端开发
意外之惊喜!浏览器缓存优化方案,让页面加载速度飙升48.5%!
经过对浏览器缓存优化方案的调研和实现过程,我发现了一个令人意外的发现:**页面加载速度提升了整整48.5%!** 这个令人震撼的结果在微前端架构项目中具有重要意义,同时虽然本文是针对微前端架构的,但这个浏览器缓存优化方案同样适用于其他前端项目。本文将深入探讨这个优化方案,并分享调试和改进的经验。
431 1
意外之惊喜!浏览器缓存优化方案,让页面加载速度飙升48.5%!
|
Web App开发 存储 监控
浏览器基础原理-安全: 渲染进程-安全沙盒
浏览器基础原理-安全: 渲染进程-安全沙盒
71 0