去面试之性能问题

1.网络传输性能优化

1.1.浏览器缓存

强缓存

实现强缓存能够经过两种响应头实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不须要请求，state code 为 200

Expires: Wed, 22 Oct 2018 08:41:00 GMT 

Expires 是 HTTP / 1.0 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过时，须要再次请求。而且 Expires 受限于本地时间，若是修改了本地时间，可能会形成缓存失效。

Cache-control: max-age=30 

Cache-Control 出现于 HTTP / 1.1，优先级高于 Expires 。该属性表示资源会在 30 秒后过时，须要再次请求。

#协商缓存

若是缓存过时了，咱们就可使用协商缓存来解决问题。协商缓存须要请求，若是缓存有效会返回 304。

协商缓存须要客户端和服务端共同实现，和强缓存同样，也有两种实现方式。

#Last-Modified 和 If-Modified-Since

Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。

可是若是在本地打开缓存文件，就会形成 Last-Modified 被修改，因此在 HTTP / 1.1 出现了 ETag 。

#ETag 和 If-None-Match

ETag 相似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变更，有变更的话就将新的资源发送回来。而且 ETag 优先级比 Last-Modified 高。

1.2.资源打包压缩

wepack

gzip

1.3.图片资源优化

图片加载优化

1. 不用图片。不少时候会使用到不少修饰类图片，其实这类修饰图片彻底能够用 CSS 去代替。
2. 对于移动端来讲，屏幕宽度就那么点，彻底没有必要去加载原图浪费带宽。通常图片都用 CDN 加载，能够计算出适配屏幕的宽度，而后去请求相应裁剪好的图片。
3. 小图使用 base64 格式
4. 将多个图标文件整合到一张图片中（雪碧图）
5. 选择正确的图片格式：
   • 对于可以显示 WebP 格式的浏览器尽可能使用 WebP 格式。由于 WebP 格式具备更好的图像数据压缩算法，能带来更小的图片体积，并且拥有肉眼识别无差别的图像质量，缺点就是兼容性并很差
   • 小图使用 PNG，其实对于大部分图标这类图片，彻底可使用 SVG 代替
   • 照片使用 JPEG

1.4.网络传输性能检测工具——Page Speed

1.5.使用CDN

To Learn

 

2.页面渲染性能优化

 

图层

通常来讲，能够把普通文档流当作一个图层。特定的属性能够生成一个新的图层。不一样的图层渲染互不影响，因此对于某些频繁须要渲染的建议单独生成一个新图层，提升性能。但也不能生成过多的图层，会引发副作用。

经过如下几个经常使用属性能够生成新图层

• 3D 变换：translate3d、translateZ
• will-change
• video、iframe 标签
• 经过动画实现的 opacity 动画转换
• position: fixed

 

懒加载

懒加载就是将不关键的资源延后加载。

懒加载的原理就是只加载自定义区域（一般是可视区域，但也能够是即将进入可视区域）内须要加载的东西。对于图片来讲，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。

 

减小重绘和回流

• 使用 translate 替代 top

  <div class="test"></div>
  <style>
      .test {
          position: absolute;
          top: 10px;
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
  <script>
      setTimeout(() => {
          // 引发回流
          document.querySelector('.test').style.top = '100px'
      }, 1000)
  </script>

• 使用 visibility 替换 display: none ，由于前者只会引发重绘，后者会引起回流（改变了布局）

• 把 DOM 离线后修改，好比：先把 DOM 给 display:none (有一次 Reflow)，而后你修改100次，而后再把它显示出来

• 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

  for(let i = 0; i < 1000; i++) {
      // 获取 offsetTop 会致使回流，由于须要去获取正确的值
      console.log(document.querySelector('.test').style.offsetTop)
  }

• 不要使用 table 布局，可能很小的一个小改动会形成整个 table 的从新布局

• 动画实现的速度的选择，动画速度越快，回流次数越多，也能够选择使用 requestAnimationFrame

• CSS 选择符从右往左匹配查找，避免 DOM 深度过深

• 将频繁运行的动画变为图层，图层可以阻止该节点回流影响别的元素。好比对于 video 标签，浏览器会自动将该节点变为图层。