7、页面加载和渲染过程

题目

• 从输入url到渲染出页面的整个过程（见下：资源形式、加载过程、渲染过程）
  • 下载资源：各个资源类型、下载过程
  • 渲染页面：结合html、css、js图片等
• window.onload和DOMContentLoad的区别
  • window.onload页面全部加载完成包括图片
  • DOMContentLoaded是dom渲染完成即可，此时图片视频可能还没有加载完

document.addEventListener('load',()=>{
  console.log('window loaded')
})

document.addEventListener('DOMContentLoaded',()=>{
  console.log('dom loaded')
})

知识点

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

资源形式

• html代码
• 媒体文件，如图片视频等
• js、css代码

加载过程

• DNS解析：域名=>IP地址
• 浏览器更具IP地址向服务器发起http请求
• 服务器处理http请求，并返回给浏览器

渲染过程

• 根据html生成dom树
• 根据css生成cssom（css对象模型）
• 将dom树和cssom整合形成render tree（渲染树：像是dom树中挂了css属性）
• 根据render tree渲染页面
• 遇到<script>则暂停渲染，优先加载并执行js代码完成再继续（js进程和渲染进程共一个线程。script中可能有代码改了之前执行的结果，所以遇到script先暂停渲染）

为何建议把css放head中？

• 防止重复渲染（本来按照没有css的默认样式渲染，完成之后，又发现有样式又重新结合这个cssom进行重新生成render tree重新渲染。并且网速慢的时候对用户可能会出现两种样式切换）

为何建议把script放到最后？

• js没有放到最后就会导致页面渲染的过程比较长。因为js会暂停渲染。我们是期望先渲染完成再修改

图片渲染

• 图片渲染并不会阻塞dom渲染，只不过可能先空着等图片加载完成之后显示