JS相关概念
2017-10-05 本文已影响0人
Lucien_d70a
css和JS在网页中的放置顺序是怎样的？
- css最好放在顶部，<head>标签里，放在其他位置可能会出现白屏，或者FOUC。
- 原因：如果把样式放在底部，对于IE浏览器，某些场景下（打开新的窗口，刷新页面）时会出现白屏，而不是逐步展现内容；
- JS应该放置在body标签最后，可以用script标签包裹，然后写代码，也可以用
<script src=""></script>外部引入。- 原因：因为js是使用来操作页面元素的，如果不放在最后可能会在执行操作的时候导致js里头获取不到页面内容，然后报错。
浏览器在读取js的时候会组塞内容的加载，脚本会组塞后面内容的下载。
- 原因：因为js是使用来操作页面元素的，如果不放在最后可能会在执行操作的时候导致js里头获取不到页面内容，然后报错。
解析白屏和FOUC
-
白屏：
-
1.css导致
-
如果把样式放在底部，对于IE浏览器，某些场景下（打开新的窗口，刷新页面）时会出现白屏，而不是逐步展现内容；
-
如果使用@import标签，即使CSS放在头部，用link引入，也有可能出现白屏。
-
白屏产生的原因和浏览器的渲染机制有关，在painting之前的步骤上有时间的延迟，主要是CSS加载的延迟。
-
-
2.js导致：
- 把JS放在顶部可能会导致白屏。
- 对于图片和CSS，在加载时会并发加载（如同个域名下同时加载两个文件），但在加载JS时，会禁用并发（脚本会阻塞后面内容的呈现几后面组件的加载），所以把JS放在页面顶部会导致白屏现象。
-
FOUC：
-
FOUC（Flash Of Unstyled Content，文档样式闪烁）;
-
产生的原因：如果把css放在底部，对于IE浏览器，对于某些场景，就会出现FOUC现象，对于firfox会一直表现FOUC，
-
解决办法：把link放在头部。 把@import换成link引入。
-
async和defer的作用是什么？有什么区别
-
async 和 defer 都加在script src属性前边。。
-
没有async和defer的script会按顺序被浏览器解析执行。。
-
async：有async，加载和渲染后续文档元素的过程将和 该script的加载与执行并行进行（异步）。
-
defer：有defer，加载后续文档元素的过程将和 该script的加载并行进行（异步），但该script的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
简述网页的渲染机制
1.解析HTML标签，构建DOM树；
2.解析CSS标签，构建CSSOM树；
3.然后DOM和CSSOM组合成渲染树；
4.在渲染树的基础上进行布局，机选每个节点的几何结构；
5.把每个节点绘制到屏幕上；
