网页渲染过程

加载过程

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

渲染过程

• 根据HTML代码生成DOM Tree
• 根据css代码生成 cssom
• 将DOM tree 和cssom 整合形成 Render tree

渲染过程2

• 根据Render Tree 渲染页面
• 遇到 <script> 则暂停渲染，优先加载并执行js代码，完成再继续渲染
• 知道把 Render Tree渲染完成

window.addEventListener('load',function(){
    //页面的全部资源加载完才会窒息性，包括图片，视频等
})

document.addEventListener('DOMContentLoaded',function(){
    //DOM 渲染完即可执行，此时图片、视频还可能没有加载完成
})

提示

1. 加载图片不会阻塞渲染过程
2. 为什么js一般写在body最后 答：因为渲染过程中遇到script会停止渲染，等到js加载执行完在进行，这样对用户体验不好