进阶1

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)

5.投稿

白屏和FOUC

推荐阅读更多精彩内容