前端面试题记忆——性能优化

性能优化部分

1、性能优化的方面

• 资源压缩合并，减少HTTP请求
• 非核心代码异步加载
• 利用浏览器缓存
• 使用CDN
• 预解析DNS

2、异步加载

• 动态脚本加载
• defer
• async

3、加载方式区别

• defer是在html解析完毕才执行，如果有多个则按加载顺序执行
• async是加载完毕后立即执行，如果是多个，执行顺序与加载顺序无关

4、预加载

• 在开发中，可能会遇到有些资源不需要马上用到，但是希望尽早获取，这时候可以使用预加载
• 预加载其实是声明式的fetch，强制浏览器请求资源，并且不会杜塞onload事件，可以使用使用<link rel="preload" href="http://example.com">开启预加载
• 预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，缺点是兼容性不好

5、DNS预解析

• DNS解析是需要时间的，可以通过预解析的方式来预先获得域名所对应的IP

<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="//yuchengkai.cn">

• 在https协议中默认a标签不会开启预解析，因此需要手动设置meta

6、懒加载

• 定义：将不关键的资源延后加载
• 原理：加载定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对图片来说，先设置图片标签的src属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为src属性，这样图片就会下载，实现了图片懒加载
• 不仅可以用于图片，还可使用在别的资源上，比如进入可视区域才开始播放视频。