关于前端性能优化：系统总结

[Hibop]

前端性能优化梳理

四个方面考虑：静态资源缓存 >>> 请求优化 [请求量 压缩 + 速度 ssr ] >>> 编译时优化 >>> 运行渲染时优化

网络优化：

• webview：
  • webview缓存
• 超webview（hybrid）

webview缓存

• 资源缓存：
  1. http缓存： url缓存，强缓存、协商缓存、cdn缓存
  2. 离线缓存manifest
  3. service work： 可以实现入口缓存index.html
• 数据缓存(浏览器缓存)
  1. cookie，session cookie滥用情况（种cookie要区分主域 子域）
  2. storage： loacal session

请求优化： 两方面： 请求量（带宽）；；加快请求速度（时延）

• 带宽： 图片处理（图片是流量大头, webp），资源压缩minify 、开启gzip、按需lazyload等
• 时延：cdn分发、并行加载优化、DNS预解析

图片： png（无损、大） jpg（有损）svg（渲染成本，浏览器渲染，icon-font系统渲染）webp（移动端推荐）base64（即时预览，canvas）

cdn: 哪些要缓存、cors易忽略、源站缓存、怎样缓存命中率、CDN Combo请求合并

并行优化：

• 页面优化（首屏一个请求或者无请求ssr）
• 多域名，分布式
• 合并请求防止页面抖动

编译时优化

tree-shaking：去除没用过的代码

UglifyJsPlugin：压缩代码

ExtractTextPlugin：提取css出来

dllPlugin： 提取公共库

运行时渲染优化

• 服务端渲染（ssr）： 集合式渲染，SEO，跨团队推动后端接口优化
• 客户端渲染（csr）： 分式渲染，分布计算力 css阻塞： 不会阻塞html DOM tree， 但会阻塞渲染render tree 【布局layout-绘制paint-合成composit】 js阻塞：加载并行， 执行阻塞DOM的解析和渲染 defer/ async 并行下载， async下载完即执行； defer等DOM解析完再执行

DOM的重绘回流 减少DOM操作，DOM碎片技术（fragment） 渲染队列：60fps（16ms） requestAnimation（渲染速度 < 显示器刷新速度） 开启GPU加速

浏览器队列： 宏队列（ajax, setTimeout） -> 微队列（promise） -> 渲染队列

• 合理利用MTU策略 通常情况下，我们认为 TCP 网络传输的最大传输单元（Maximum Transmission Unit，MTU）为 1500B，即一个RTT（Round-Trip Time，网络请求往返时间）内可以传输的数据量最大为 1500 字节。因此，在前后端分离的开发模式中，尽量保证页面的 HTML 内容在 1KB 以内，这样整个 HTML 的内容请求就可以在一个 RTT 内请求完成，最大限度地提高 HTML 载入速度。

一个是页面加载的很快，另一个是页面使用起来很流畅。

当面试官问你如何进行性能优化时，你该这么回答(一) https://juejin.im/post/5a99f80cf265da238c3a1e16

[Hibop]

前端工程与性能优化

https://github.com/fouber/blog/issues/3

[Hibop]

世界顶级Web性能专家教你优化出高性能网站（上）

https://mp.weixin.qq.com/s?__biz=MzAwNzA0NTMzMQ==&mid=403253241&idx=1&sn=3c46a93aac93bb2912ec77d015c9e31e&scene=1&srcid=0408x561sdbObtJoxwyhHwaA&pass_ticket=LI472%2BtqXtAMqvWsYFOWzpOlmvVOJjJgWjYMq%2F0SRd0c5uy8DuOzR%2BstUbC86i8j#rd

[Hibop]

有货移动Web端性能优化探索实践

http://www.infoq.com/cn/articles/yohobuy-performance-optimization-practice

[Hibop]

前端白屏问题和内容闪烁问题原因以及解决方案：

• https://www.jianshu.com/p/47edb3759489;
• http://www.cnblogs.com/hustskyking/p/white-screen-in-chrome.html

[Hibop]

浏览器：加载、解析、渲染详解：

https://www.jianshu.com/p/e141d1543143

[Hibop]

Web性能优化——预加载、预渲染：prefetch, prerender

http://harttle.land/2015/10/06/html-cache.html