1. 页面加载过程.md

页面加载过程

加载资源的形式

· 输入url（或跳转页面）加载 HTML

· 加载 HTML 中的静态资源

· <script src="/static/js/jquery.js"></script>

加载一个资源的过程

（从输入 url 到得到 html 的详细过程）

1. 浏览器根据 DNS 服务器得到域名的 IP 地址

2. 向这个 IP 的计算机发送 http 请求

3. 服务器收到、处理并返回 http 请求

4. 浏览器得到返回的内容

浏览器渲染页面的过程

1. 根据 HTML 结构生成 DOM 树 —— 结构

2. 根据 CSS 生成 CSSOM —— 样式

3. 将 DOM 和 CSSOM 整合成 RenderTree —— 整合

4. 根据 RenderTree 开始渲染和展示

5. 遇到 <script> 时，会执行并阻塞渲染 —— js有权力改变DOM结构

window.onload 和 DOMContentLoaded

<p>test</p>
<p><img src="test.png"/></p>  // 图片为异步加载
<p>test</p>

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

---

问题

• 为什么一定要把 css 放在 head 中？

  在渲染DOM前就拿到CSS生成 CSSOM，此时浏览器就知道规则，DOM就可以直接按照CSSOM进行渲染，提升渲染效率，否则会渲染两次。

• 为什么要把 js 放到 body 的最下面？

  js 执行会阻塞DOM结构渲染，需要把js放到 body 的最下面，在执行时DOM已渲染完成，保证 js 能顺利获取到DOM，也保证了效率。

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

  1. 浏览器根据 DNS 服务器得到域名的 IP 地址

  2. 向这个 IP 的计算机发送 http 请求

  3. 服务器收到、处理并返回 http 请求

  4. 浏览器得到返回的内容

• window.onload 和 DOMContentLoaded 的区别

  window.onload：页面的全部资源加载完才会执行，包括图片、视频等

  DOMContentLoaded：DOM 渲染完即可执行，此时图片、视频可能还没有加载完