前端性能优化-下

优化策略

DNS

DNS各个系统本身的设计已经做了很多的优化，比如浏览器的dns缓存记录，计算机的本地dns缓存等等

1. 使用 dns-prefetch preconnect， 详细见：Using dns-prefetch

<link rel="dns-prefetch" href="//static.360buyimg.com"/>

//配合preconnect
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">

2. 使用preload 、prefetch ， 参见:preload prefetch
   preload 和 prefetch 技术本身不是来预解析dns，而是预加载资源，但是加载本身就涉及到域名解析，所以变相的也能够起到一定的作用。

资源大小

1. 针对css, js, html, css,图片等资源进行压缩合并。
2. iconfont、svg

资源加载

1. 资源预取

   • preload prefetch 关于两者的差别：preload vs prefetcg

   • 接口预取

2. 资源缓存

   • 缓存 本地，网络，PWA，App 离线包，

3. 懒加载

   • 图片懒加载，非关键数据接口服务懒加载
   • 单页应用中， 路由懒加载，组件懒加载，store懒加载等，这个时候配合prefetch能更好的优化用户体验：比如 我们路由懒加载，在前端路由导航到对应的路由时候 才开始加载资源，会导致我们的导航和渲染感觉慢（网络不好的情况下甚至挂掉），这个时候通过prefetch 来实现资源的预期 就能很好的解决这个问题。

4. 非阻塞加载

   • defer 、async 应用

服务器端优化
- SSR
- 接口合并等
- 其他

HTTP协议

1. http2 协议：

运行时优化

1. css 的硬件加速
   • 最常用的方式：translate3d、translateZ
   • opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
   • will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层），作用是提前告诉浏览器要变化，这样浏览器会开始做一些优化工作（这个最好用完后就释放）
   • <video><iframe><canvas><webgl>等元素
   • 其它，譬如以前的flash插件
2. js优化
   • microtask、macrotask： setTimeout Promise 等
   • 同步代码 大量计算： woker 线程 sharedworker进程
   • throttle ...
   • 数据结构和算法
   • vue react 中的优化