web前端-js小记(1)

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

1. css样式放在head标签中，通常引入方式为

<link href="index.css" rel="stylesheet" type="text/css"></link>

2. js放置在body标签的最后，因为相对于其他的图片或者css来说，js是阻塞的，所以等页面的渲染树成行后引入js就可以避免白屏现象，通常外链引入方式为

<script src="index.js"></script>

2. 解释白屏和FOUC

1. 白屏：其实是浏览器在渲染页面的时候请求时间过长导致的，如chrome的渲染流程是解析HTML-->构建Dom-->解析Css-->构建Cssom-->组合Dom和Cssom成渲染树(Render Tree)-->在渲染树的基础上布局并进行计算-->把节点绘制到屏幕上(painting)。所以，如果把样式放在页面底部会出现白屏现象。如果使用@import标签载入样式，即使把样式放在head标签中，也会出现白屏现象。如果把js放在head里或者body中间，JS加载时会阻塞后面内容的呈现，页面也可能会出现白屏现象。
2. FOUC：其实是FireFox的渲染逻辑和Chrome的不太一样，Chrome是等待渲染树和位置计算好才会出来网页的内容，但到了FireFox每加载一次dom树就会重绘一次网页样式，一直到所有内容完成为止，所以一般我们用link把css放在header内.

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

使用方法：
<script async src="index.js"></script>
<script defer src="index.js"></script>

1. 通常情况下，即没有async和defer，浏览器会立即加载并执行指定的脚本，即渲染到script就会立即加载并执行js。
2. 有async的情况下，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行。

3. 有defer的情况下，加载后续文档元素的过程将和 script.js 的加载并行进行，但执行js是等所有元素加载完成后再执行。

   
   

• 由图可知：1. defer 和 async 在网络读取（下载）这部分是一样的，都是异步的（相较于 HTML 解析）。2. 两者的差别在于脚本下载完之后何时执行，由图知defer是按照加载顺序执行脚本的，这一点要善加利用。3. async 则是乱序执行，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。

4. 简述网页的渲染机制

1. 解析HTML标签，生成DOM树
2. 解析CSS元素，生成CSSOM树
3. 把DOM和CSSOM组合成渲染树
4. 在渲染树的基础上进行布局，计算每个节点的几何机构
5. 把每个节点绘制到屏幕上

(mission 1)