页面加载 - 渲染过程

加载资源的形式

• 输入 url（或跳转页面）加载 html
• 加载 html 中的静态资源
• <script src="/static/js/jquery.js"></script>

加载一个资源的过程

问：从输入 url 到得到 html 的详细过程

• 浏览器根据 DNS 服务器得到域名的 IP地址
• 向这个 IP 的机器发送 http请求
• 服务器收到、处理并返回 http请求
• 浏览器得到返回内容

浏览器渲染页面的过程

• 根据 HTML 结构生存 DOM Tree
• 根据 CSS 生成 CSSOM
• 将 DOM 和 CSSOM 整合形成 RenderTree
• 浏览器根据 RenderTree 开始渲染和展示
• 遇到 <script>时，会执行并阻塞渲染

问：window.onload 和 DOMContentLoaded

• window.onload —— 页面的全部资源加载完才会执行，包括图片、视频等
• DOMContentLoaded —— DOM 渲染完即可执行，此时图片、视频还没加载完 （jquery、zepto都是用这个情况，DOM渲染完就执行，因为window.onload不好把控）