页面加载和渲染过程

加载过程

• DNS 解析：域名 -> IP 地址
• 浏览器根据 IP 地址向服务器发送 http 请求
• 服务器处理 http 请求，并返回给浏览器

渲染过程

• 根据 HTML 代码生成 DOM Tree
• 根据 CSS 代码生成 CSSDOM
• 将 DOM Tree 和 CSSDOM 整合形成 Render Tree
• 根据 Render Tree 渲染页面
• 遇到 </script/> 则暂停渲染，优先加载并执行 JS 代码，完成再继续
• 直至把 Render Tree 渲染完成

window.onload 和 DOMContentLoaded

window.addEventListener('load', function() {
  // 页面的全部资源加载完才会执行，包括图片、视频等
})
document.addEventListener('DOMContentLoaded', function () {
  // DOM 渲染完即可执行，此时图片、视频还可能没有加载完
})

阅读量：

评 论：