JS相关概念(进阶1)

1. CSS和JS在网页中的放置顺序是怎样的？

• CSS最好放入header中，即放在网页内容（html标签中包含的文字和图片等）和js脚本之前

• JS最好放在最后，即放在网页内容（html标签中包含的文字和图片等）和js脚本之后

2. 解释白屏和FOUC

1. 白屏问题：
   - 对于grome等浏览器，把样式放在底部或使用@import。此时，若加载大量html标签、文字和图片，但样式并没有即使加载，则可能出现白屏；
   - 将js放在顶部。因为普通情况下（除非加了async或defer），加载javascript时，会禁用并发，阻止了其他内容的下载。所以js放在顶部可能会出现白屏；

2. FOUC：
   对于火狐等浏览器，把样式放在底部，会出现FOUC（逐步加载无样式的内容，等css加载后页面突然展现样式）

3. 解决方法：

   • css：放到顶部
   • js：放到底部

3. async和defer的作用是什么？有什么区别

1. async：让script.js和其他元素异步加载和执行
2. defer：让script.js的执行再所有元素解析完成之后
3. 区别：
   • defer使得js脚本延迟到文档解析和显示后执行，有顺序；
   • async不保证顺序，可以与文档加载或显示同时执行

4. 简述网页的渲染机制

1. Grome等浏览器：

   
   
   
   • 解析 HTML 标签, 构建 DOM 树
   • 解析 CSS 标签, 构建 CSSOM 树
   • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
   • 在渲染树的基础上进行布局, 计算每个节点的几何结构
   • 把每个节点绘制到屏幕上 (painting)

2. Firefox等浏览器

   
   
   
   • 解析 HTML 标签到Content Sink
   • 这时，先加载Content Sink里面的内容，页面上会显示一个无样式的内容
   • 循环加载css样式，每次加载一部分css样式后，都会重现渲染页面

5. 从上面4个题目中随机选择一题写成博客，投递到饥人谷技术博客6 (可选题目)

博客