加载资源的形式
html代码.
媒体文件，如图片、视频等.
javascript、css.
1.加载资源的过程
DNS解析（域名服务解析）：域名->IP地址
浏览器根据IP地址向服务器发送http请求
服务器处理http请求，并返回给浏览器
2.渲染页面的过程
根据HTML生成DOM Tree
根据css代码生成CSSOM(CSS对象模型)
将DOM Tree和CSSOM整合形成Render Tree
浏览器根据 Render Tree 渲染页面
如果遇到<script>则暂停渲染，优先加载并执行JS代码，完成再继续
直至把 Render Tree渲染完成
为何把css放在head中？
在渲染DOM节点前把CSS规则加载完，防止重复渲染
为何建议把js放在body最后？
Render Tree 渲染页面时，如果遇到
<script>则暂停渲染， 优先加载并执行JS代码， 完成再继续
放在中间阻塞dom渲染
window.onload和DOMContentLoaded的区别
window.addEventListener('load',function(){
//页面加载完全部资源才执行，包括图片，视频
})
window.addEventListener('DOMContentLoaded',function(){
//DOM渲染完即可执行，包括图片，视频可能没加载完
})
网友评论