1.CSS和JS在网页中的放置顺序是怎样的？
CSS应该放在<head>标签内，优先下载解析，以免页面元素由于样式缺失而造成浏览器白屏和无样式内容闪烁。JS一般放置<body>标签的底部，防止js阻塞其他渲染行为，防止在操作DOM时，因未加载而出现错误。
2.解释白屏和FOUC（无样式内容闪烁）？
白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。
白屏：IE和Chrome浏览器的渲染机制是HTML标签和css文件解析完后才会绘制页面
CSS样式放在底部或者使用@import方式引入样式时，它的加载和渲染机制是等CSS全部加载解析完成后再渲染展示页面，而这个等待的时间就是白屏。
无样式内容闪烁：Firefox浏览器的渲染机制是CSS未加载完成前先展示页面
将样式放在底部或引入@import，会先加载整个 HTML 文档的 DOM ，然后再去导入外部的 CSS 文件，因此在页面 DOM 加载完成到 CSS 导入完成中间会有一段时间页面上的内容是没有样式的，等CSS加载后再重绘一次，造成无样式内容闪烁的现象。
3.async和defer的作用是什么？有什么区别?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<link href="http://cdn.staticfile.org/foundation/6.0.1/css/foundation.css" rel="stylesheet">
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.js"></script>
<script src="http://libs.baidu.com/backbone/0.9.2/backbone.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
ul>li{这是第$个节点}*1000
</body>
</html>
-
没有 defer 或 async，放置在<head>内，异步加载资源，但会阻塞<body>的渲染会出现白屏，按照顺序立即执行脚本
-
没有 defer 或 async，放置在<body>底部，异步加载资源，等<body>中的内容渲染完毕后且加载完按顺序执行JS
-
放置在<head>头部并使用async，异步加载资源，且加载完JS资源立即执行，并不会按顺序，谁快谁先上
-
放置在<head>头部并使用defer，异步加载资源，在DOM渲染后之后再按顺序执行JS
-
同时又defer和async时，效果和含有async相同。
蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
异同：
1.defer和async在网络读取（下载）这块是一样的。都是异步的（相较于HTML解析）。
2.区别在于脚本下载完成后何时执行，显然defer是最接近应用脚本加载和执行要求的。
3.关于defer，是按照加载顺序执行脚本的。
4.anync是脚本加载和执行是紧挨着的，加载完后就会执行，谁快谁先上。
4.简述网页的渲染机制
渲染引擎所做的事是将请求内容展现给我们，默认支持HTML,XML和图片类型。
1.构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
2.构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
3.执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
4.构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
5.布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；
6.绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成
【个人总结，如有错漏，欢迎指出】
：>
网友评论