JS基础知识(一)

浏览器渲染机制

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

白屏问题

如果把样式放在底部,对于IE浏览器,某些场景下,如打开新窗口,刷新等情况,页面会出现白屏,而不是内容逐步展现,如果使用@import标签,即使使用了外联样式,也就是link标签,并且放在头部,也可能会出现白屏。找不到文件,等待时间过长等情况,也会导致出现白屏现象。

FOUC(Flash of unstyled content)无样式内容闪烁

把样式放在底部,对于IE浏览器,在某些场景下,如点击链接,输入URL,使用书签进入等,会出现FOUC现象,也就是逐步加载无样式的内容,等css加载出来后,页面突然展现样式,这就是无样式内容闪烁现象。

JS文件应该在什么地方引入

正确答案是标签之前,也就是页面的底部
原因:因为JS会阻塞后面内容的加载,对于图片和CSS文件来说,在加载时会并发加载,但在加载JS时,会禁用并发,并且阻止其它内容的下载,所以把JS放在页面顶部会导致白屏现象。

你可能感兴趣的:(JS基础知识(一))