认识JS网页渲染

1. CSS和JS在网页中的放置顺序

CSS和JS可以放置在页面上的任意位置，但为了解决白屏和无样式闪烁问题，推荐放置位置为：

• CSS放置head>style标签内
• JS放置body闭合标签前的script标签内

2.简述网页的渲染机制

• 解析HTML，构建DOM树
• 解析CSS，构建CSSOM树
• 组合DOM和CSSOM，构建渲染树
• 在渲染树的基础上进行布局，计算每个节点的几何结构
• 把页面按规则呈现到屏幕上
  整个流程可参考如下图片：

构建渲染树——来源自网络

3.解释白屏和FOUC

不同品牌的浏览器处理解析HTML和CSS的方式不一样，这就会造成不同的问题

• 白屏
  一些浏览器需要按照网页渲染顺序一步一步执行，最终一次性呈现所有内容。
  所以构建渲染树之前的文件准备时间过长或被阻塞，导致浏览器无法破译代码，屏幕上没有可以被呈现的内容，就会出现白屏问题

• 两种情况会触发白屏：

• 1.CSS文件准备时间过长，这段时间内没有构建渲染树的原料——CSSOM，还需等待CSS代码解析完毕
  ⊙ 此时CSS代码可能位置：CSS样式使用@import标签引入、CSS文件放置代码尾部

• 2.JS文件阻塞后续代码的加载，导致构建渲染树的原料（DOM和CSSOM）工作被迫中断，此时需要等待JS代码完全被执行完毕
  ⊙ 此时JS代码可能位置：JS文件放置代码头部

• 无样式闪烁FOUC
  对于一些浏览器，它们并不会严格按照顺序进行页面渲染，它们不会等待完成构建渲染树后再进行统一的一次展示，而是会发生两次展示。
  所以浏览器首先会逐步加载无样式内容，然后突然展示样式

1. 第一次：解析html代码直接展示破译后的无样式内容，
2. 第二次：解析完CSS代码后，组合DOM和CSSOM进行构建渲染树，最后展示样式
3. 当第一次页面会重新排版布局变成第二次页面，所以就会发生页面闪烁之后，内容和样式被同时展示出来
   ⊙ 此时CSS代码可能位置：CSS文件放置代码尾部

本文章著作权归饥人谷_蛮力拳猫和饥人谷所有，转载须说明来源！