浏览器页面加载相关知识

页面加载

题目

从输入url到html的详细过

window.onload 和 DOMContentLoaded 的区别

知识点

• 加载资源的形式
• 加载资源的过程
• 浏览器渲染页面的过程

加载资源的形式

//输入url(或跳转页面)加载html
http://www.baidu.com
//加载html中的静态资源
<script src="/static/js/jquery.js"></script>

加载一个资源的过程

1. 浏览器根据DNS服务器得到域名的IP地址
2. 向这个IP的服务器，发送http(https)请求
3. 服务器收到、处理并返回http(https)请求
4. 浏览器得到返回内容

浏览器渲染页面的过程

1. 根据HTML结构生成DOM Tree
2. 根据CSS生成CSSOM(CSS Object Modal)，此时已经是多属性叠加计算之后的最终css
3. 将DOM和CSSOM整合成RenderTree(渲染树)
4. 根据RenderTree开始渲染和展示
5. 遇到<script>时，会执行并阻塞渲染

思考

为何把CSS放在head中？

因为我们希望在body渲染前，已经知道CSS样式规则，这样在渲染body的时候，就会直接按照CSS样式规则来渲染。如果CSS放在后边，就会先渲染一次，然后根据CSS再渲染一次，影响性能和体验。

为何把js放在body里最后边

扫描二维码关注公众号，回复： 1372140 查看本文章

浏览器在遇到<script>标签时，会阻塞，先执行js再继续渲染。所以：1.为了不阻塞DOM的渲染，让DOM和CSS先渲染出来，提高性能和体验；2.放在body最后，js能够保证拿到页面的所有标签，不会报错。

图片怎么办?

img里边的图片是异步请求的，所以遇到img并不会阻塞渲染。

window.onload 和 DOMContentLoaded 的区别

// window.onload  等同于下边这个
window.addEventListener('load', function () {
    // 页面资源全部加载完成才会执行
    // 包括图片，视频等
})

// DOMContentLoaded  等同于下边这个
document.addEventListener('DOMContentLoaded'， function () {
    // DOM 渲染完即可执行     
    // 此时图片、视频之类的可能还未加载完
})