进阶1
2017-08-10 本文已影响0人
upup_dayday
1.CSS和JS在网页中的放置顺序是怎样的？
根据浏览器渲染页面顺序的特点，为保证页面加载的顺畅，一般按如下方式放置：
- css使用link标签置于head中，不使用@import；
- JS放置在</body>前，保证页面加载结束（在JS不改动页面内容的前提下）；
2.解释白屏和FOUC
这两种现象都是由于浏览器渲染页面时，受到了阻塞或在等待造成的，根据不同浏览器渲染机制的不同，现象分为以下两种，
- 白屏：浏览器页面在加载时，出现白屏无内容的现象；
- FOUC：Flash of Unstyled Content，无样式内容闪烁，是指在浏览器加载内容过程中，先出现没有样式的网页内容，再展现出加载了样式的网页页面；
chrome浏览器的加载和渲染机制，是等css全部加载解析完后再渲染展示页面，这个等待时间就出现了白屏；
其他一些浏览器，例如Firefox,他会在css未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC
造成以上两种现象的原因有：
- css样式放在底部，导致HTML加载完，还需要等待CSS的加载；
- css虽然放在顶部，但是使用@import，也可能加载等待，白屏；
- JavaScript 放入页面顶部，造成后面页面加载阻塞，也会出现白屏或FOUC
3.async和defer的作用是什么？有什么区别
async和defer都是调整JS脚本的加载顺序，保证页面加载的顺畅和效果；
区别在于：
- defer指定了JS加载执行的固定时序，对脚本执行进行延迟，直到页面加载为止；
- async一旦异步下载完成，就开始执行，.这意味着这些script 可能不会按它们出现在页面中的顺序来执行,如果你的脚本互相依赖并和执行顺序相关,就有很大的可能出问题, 例如变量或者函数未定义之类的错误
参考：
html5中script的async属性
js之script属性async与defer
4.简述网页的渲染机制
Paste_Image.png
如上图所示，网页渲染按照如下顺序进行：
- 解析 HTML 标签, 构建 DOM 树；
- 载入html代码过程中，发现<head>标签内有一个<link>标签引用外部CSS文件，发出CSS文件的请求，服务器返回这个CSS文件；
- 解析 CSS 标签, 构建 CSSOM 树；
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)；
- 在渲染树的基础上进行布局, 计算每个节点的几何结构；
- 把每个节点绘制到屏幕上 (painting)
