# 优雅降级和渐进增强

优雅降级(progressive enhancement):Web 站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于 IE 独特的盒模型布局问题,针对不同版本的 IE 的 hack 实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

渐进增强(graceful degradation):从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

# 域名收敛和域名发散

域名收敛:就是将静态资源放在一个域名下。减少 DNS 解析的开销。 域名发散:是将静态资源放在多个子域名下,就可以多线程下载,提高并行度,使客户端加载静态资源更加迅速。

PC 时代为了突破浏览器的域名并发限制,有了域名发散。浏览器有并发限制,是为了防止 DDOS 攻击。

域名发散是 PC 端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端,提高性能,因为 dns 解析是是从后向前迭代解析,如果域名过多性能会下降,增加 DNS 的解析开销。

# 首屏时间和白屏时间

Performance 接口可以获取到当前页面中与性能相关的信息。 该类型的对象可以通过调用只读属性 Window.performance 来获得。 白屏时间:

performance.timing.responseStart - performance.timing.navigationStart;

首屏时间

window.onload = () => {
  new Date() - performance.timing.responseStart;
};

# 浏览器问题:浏览器怎么加载页面的?script 脚本阻塞有什么解决方法?defer 和 async 的区别?

ie 的某些兼容性问题(浮动 ie 产生的双倍距离,ie 双边距问题:在 ie6 下,如果对元素设置了浮动,同时又设置了 margin-left 或者 margin-right,margin 值会加倍。在这种情况下 ie 会产生 20px 的距离,解决方案是在 float 的标签样式控制中加入--*display:inline;将其转化为行内属性。*这个符号只有 ie6 会识别。)

# async 和 defer 的作用是什么?有什么区别?

defer 和 async 属性的区别: image 其中蓝色线代表 JavaScript 加载;红色线代表 JavaScript 执行;绿色线代表 HTML 解析 1)情况 1 <scriptsrc="script.js">

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,也就是说不等待后续载入的文档元素,读到就加载并执行。

2)情况 2 <scriptasyncsrc="script.js"> (异步下载)

async 属性表示异步执行引入的 JavaScript,与 defer 的区别在于,如果已经加载好,就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。需要注意的是,这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说,async-script 可能在 DOMContentLoaded 触发之前或之后执行,但一定在 load 触发之前执行。

3)情况 3 <scriptdefersrc="script.js">(延迟执行)

defer 属性表示延迟执行引入的 JavaScript,即这段 JavaScript 加载时 HTML 并未停止解析,这两个过程是并行的。整个 document 解析完毕且 defer-script 也加载完成之后(这两件事情的顺序无关),会执行所有由 defer-script 加载的 JavaScript 代码,然后触发 DOMContentLoaded 事件。

defer 与相比普通 script,有两点区别:载入 JavaScript 文件时不阻塞 HTML 的解析,执行阶段被放到 HTML 标签解析完成之后;在加载多个 JS 脚本的时候,async 是无顺序的加载,而 defer 是有顺序的加载

# 禁止缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />

# 如何确定服务端开启了 gzip

# 哪些地方会出现 css 阻塞,哪些地方会出现 js 阻塞?

js 的阻塞特性:所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载 JS,但是 JS 下载仍然会阻塞其它资源的下载(例如.图片,css 文件等)。

由于浏览器为了防止出现 JS 修改 DOM 树,需要重新构建 DOM 树的情况,所以就会阻塞其他的下载和呈现。嵌入 JS 会阻塞所有内容的呈现,而外部 JS 只会阻塞其后内容的显示,2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

CSS 怎么会阻塞加载了?CSS 本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6 下 CSS 都是阻塞加载)当 CSS 后面跟着嵌入的 JS 的时候,该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面,就不会出现阻塞的情况了。根本原因:因为浏览器会维持 html 中 css 和 js 的顺序,样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载,所以就会出现上面 CSS 阻塞下载的情况。

嵌入 JS 应该放在什么位置?

  1. 放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。
  2. 如果嵌入 JS 放在 head 中,请把嵌入 JS 放在 CSS 头部。
  3. 使用 defer(只支持 IE)
  4. 不要在嵌入的 JS 中调用运行时间较长的函数,如果一定要用,可以用 setTimeout 来调用

# iframe 的优缺点?