浏览器的加载机制以及监听加载的事件

发表于 更新于 分类于 阅读次数：

浏览器如何进行加载、解析、渲染？

  1. 用户访问网页，DNS服务器（域名解析系统）会根据用户提供的域名查找对应的IP地址，找到后，系统会向对应IP地址的网络服务器发送一个http请求。
  2. 网络服务器解析请求，并发送请求给数据库服务器。
  3. 数据库服务器将请求的资源返回给网络服务器，网络服务器解析数据，并生成html文件，放入http response中，返回给浏览器。
  4. 浏览器解析 http response。
  5. 浏览器解析 http response后，需要下载html文件，以及html文件内包含的外部引用文件，及文件内涉及的图片或者多媒体文件。
    　解析html 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树 img

解析：

  1. 将HTML构建成一个DOM树。
  2. 将CSS解析成CSS去构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
  3. 根据DOM树和CSSOM来构造 Rendering Tree（渲染树）。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。
  4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。
  5. 下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置 layout render tree。
  6. 再下一步就是绘制，即遍历render树，并使用浏览器UI后端层绘制每个节点。

性能优化中重绘、重排：
（1）Reflow（回流/重排）：当它发现了某个部分发生了变化影响了布局，渲染树需要重新计算。
（2）Repaint（重绘）：改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排；

Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。

监听浏览器加载的事件

  • DOMContentLoaded
    触发时间：页面dom加载完成触发，无需等待后续图片等资源
  • onload
    触发时间：当浏览器加载完成之后触发，load一定在DOMContentLoaded之后触发。

二者的区别

DOM文档加载的步骤为

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. DOM树构建完成。//DOMContentLoaded
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load

部分内容参考自：浏览器页面加载解析渲染机制

相关博客