-
CSS和JS在网页中的放置顺序是怎样的？
- CSS应该放在页面的顶部的head标签中
由于Render Tree是由DOM树和CSSOM树组合成的，html页面需要等到CSS解析完成才能完成渲染，所以css应该放在head标签内，优先下载解析，以避免页面元素由于样式缺失造成瞬间的白屏或者给用户闪烁感。
-
JS应该放在
<body>的底部</body>标签闭合之前; -
因为浏览器需要一个稳定的dom树结构，而且js中很有可能有代码直接改变了dom树结构，浏览器为了防止出现js修改dom树，需要重新构建dom树的情况，所以就会阻塞其他的下载和呈现。
将JavaScript放在head内和body底部的区别也在于此，放在head里面，由于浏览器发现head里面有JavaScript标签就会暂时停止其他渲染行为，等待JavaScript下载并执行完成才能接着往下渲染，而这个时候由于在head里面这个时候页面是白的；如果将JavaScript放在页面底部，render Tree 已经完成大部分所以此时页面有内容呈现，即使遇到JavaScript阻塞渲染，也不会有白屏出现。 -
如果CSS和JS都在
head标签内，则应将JS放在所有CSS的前面。 -
JS的执行有可能依赖最新样式。比如，可能会有
var width=$(#id").width,这意味着，JS代码在执行前，浏览器必须保证在此JS之前的所有CSS（无论外联还是内嵌）都已经下载和解析完成。
把JS放在CSS后会导致页面阻塞，去等待CSS的下载。另外如果要在head引入JS尽量将JS内嵌。 -
解释
白屏和FOUC- 浏览器的白屏与无样式内容闪烁（FOUC）,是由于浏览器加载与显示页面方式不同造成的：
在写HTML代码时，我们都是将CSS文件的引入位置放在头部（<head>标签内部），将js文件的引入位置放在底部（</body>前面）。
含义：不同的浏览器对于CSS和HTML的处理方式不同，有的是等待CSS加载完成之后，对HTML元素进行渲染和展示（白屏问题）。有的是先对HTML元素进行展示，然后等待CSS加载完成之后重新对样式进行修改（FOUC无样式内容闪烁）
解释：
1.如果把CSS样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现，如果使用@import标签,即使 CSS 放入link, 把JavaScript放在head中,脚本会阻塞后面内容的呈现，脚本会阻塞其后组件的下载，出现白屏问题。
2.如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
- 浏览器的白屏与无样式内容闪烁（FOUC）,是由于浏览器加载与显示页面方式不同造成的：
-
async和defer的作用是什么？有什么区别
作用： async和defer``可以达到不阻塞渲染的效果。
- 带有
defer属性的<script>的标签可以放置在文档的任何位置。对应的JavaScript文件将在页面解析到<script>标签时开始下载，但不会执行，直到DOM加载完成，即onload事件触发前才会被执行。当一个带有defer属性的JavaScript文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。
但是
defer属性只被IE4和Firefox 3.5更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer属性会被直接忽略，因此<script>标签会以默认的方式处理，也就是说会造成阻塞。然而，如果你的目标浏览器支持的话，这仍然是个有用的解决方案。
-
async的作用和defer一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。
但是
在有
async的情况下，JavaScript脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果JavaScript脚本前后有依赖性，使用async就很有可能出行错误。
-
简述网页的渲染机制
- 解析html构建DOM树
- 解析CSS构建CSSOM树
- 把DOM和CSSOM组合成渲染树（Render Tree）
- 在渲染树的基础上进行布局，计算每个节点的几何结构（Layout Tree）
- 把每个节点绘制到屏幕上（Painting）
Paste_Image.png
文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源
网友评论