优化策略
DNS
DNS各个系统本身的设计已经做了很多的优化，比如浏览器的dns缓存记录，计算机的本地dns缓存等等
- 使用
dns-prefetchpreconnect， 详细见：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/">
- 使用
preload、prefetch， 参见:preload prefetch
preload 和 prefetch 技术本身不是来预解析dns，而是预加载资源，但是加载本身就涉及到域名解析，所以变相的也能够起到一定的作用。
资源大小
- 针对css, js, html, css,图片等资源进行压缩合并。
- iconfont、svg
资源加载
-
资源预取
preload prefetch 关于两者的差别：preload vs prefetcg
接口预取
-
资源缓存
- 缓存 本地，网络，PWA，App 离线包，
-
懒加载
- 图片懒加载，非关键数据接口服务懒加载
- 单页应用中， 路由懒加载，组件懒加载，store懒加载等，这个时候配合prefetch能更好的优化用户体验：比如 我们路由懒加载，在前端路由导航到对应的路由时候 才开始加载资源，会导致我们的导航和渲染感觉慢（网络不好的情况下甚至挂掉），这个时候通过prefetch 来实现资源的预期 就能很好的解决这个问题。
-
非阻塞加载
- defer 、async 应用
服务器端优化
- SSR
- 接口合并等
- 其他
HTTP协议
- http2 协议：
运行时优化
- css 的硬件加速
- 最常用的方式：translate3d、translateZ
- opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
- will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层），作用是提前告诉浏览器要变化，这样浏览器会开始做一些优化工作（这个最好用完后就释放）
- <video><iframe><canvas><webgl>等元素
- 其它，譬如以前的flash插件
- js优化
- microtask、macrotask： setTimeout Promise 等
- 同步代码 大量计算： woker 线程 sharedworker进程
- throttle ...
- 数据结构和算法
- vue react 中的优化
