页面加载

从输入URL到HTML的详细过程
加载资源的形式
- 输入URL（或跳转页面）加载HTML
- 加载html中的静态资源
加载一个资源的过程
- 浏览器根据DNS服务器得到域名的IP地址
- 向这个Ip的机器发送HTTP请求
- 服务器收到、处理并返回http请求
- 浏览器得到返回内容
浏览器渲染页面的过程
- 根据HTML结构生成DOM tree（结构）
- 根据css生成CSSOM（样式将css代码进行一个结构化的处理）
- 将DOM和CSSOM整合形成renderTree(将结构和样式合成渲染树)
- 根据renderTree渲染和展示
- 遇到<script>时,会执行并阻塞渲染

image.png

为何要把css放在head中？

好处是浏览器加载完css样式后直接知道规则，如上例子加载到div时就知道div的高度和宽度了，假设将css样式放在div后面，在页面渲染时，先执行div的默认样式，突然又会执行新的样式，出现跳动和卡动现象，用户体验极差，性能极差，本来一次能做的事情却做了两次。

image.png

为何要把js放在body最下边?
js不会阻止body里面dom结构渲染，不会发生阻塞，让页面更快的出来，同时script能拿到所有标签。

image.png

第9行图片是异步请求的，图片标签先加载，即使src资源很大也不会阻止所有DOM渲染。此时img标签已经可用了。

image.png

最后编辑于：2017.12.09 01:48:55

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

浅谈前端js面试--运行环境（页面加载）