前端性能优化知识整理

未完，待续。。。。
**性能优化，利用工具或者明白从哪里下手去优化前端代码，大概就是知其然 知其所以然。
工具测量目前的性能，期望达到什么效果达到什么样的效果**

查看性能工具

Chrome浏览器开发者工具的Timeline面板
和window.performance。

Chrome浏览器开发者工具的Timeline面板

待补充。。。

知其然 ：浏览器的渲染过程和原理

前言：
1.性能优化之前要明白 浏览器渲染机制和js引擎机制；

可从以下角度来：
1.整体：减少请求 减少量 减少内存占用
2.代码层面: 按照规范来写
3.开发阶段和生产阶段 对webpack的一些配置
4.用户层面：白屏 首屏 可操作时间 完全加载
5.js 层面：：更少的代码 = 更少的解析/编译 (parse/compile)+ 更少的传送 + 更少的解压缩 http://www.infoq.com/cn/artic...
6.图片层面： cssspite fontsize base64 预加载 懒加载
7.其他：遵守雅虎性能优化的14条规则
js>img> css

一、整体

1.减少请求数

1.请求合并：将同一时间需要的js合并，目的是节省dns查找的时间
2.按需加载---（1）单页应用下的按照路由的需要加载 （2）缓存
3.css sprite base64 iconfont
4.cdn托管
5.延迟加载：图片的延迟加载：（就是先不设置img的src属性，等合适的时机（比如滚动、滑动、出现在视窗内等）再把图片真实url放到img的src属性上。） js的延迟加载：

2.减少量

1.精简代码（tree-shaking）----(1)去除无用的代码  (2)规范些代码的方式 (3)外部cdn的引入
2.懒加载 ---（1）路由的懒加载 
3.压缩 ---（1）webpack 压缩UglifyJsPlugin；（2）gzip压缩    (3)图片压缩、JPG优化
4.缓存http代码：---浏览器的强缓存（max-age Etag）和协商(弱)缓存（last-modified）    
5.第三方组件---第三方组件作为外部依赖使用，会被打爆进业务代码。    
6.按需加载 --- （1）第三方库和工具的按需加载，如echarts  （2）选择更优的工具 day.js代替moment （3）可用代码拆分（Code-splitting）只传送用户需要的代码。

3.内存方面：减少内存的消耗

减少IO操作

1.减少全局变量；
2.减少全局组件；
3.减少dom操作---缓存dom,虚拟dom

二、用户层面：

1.预加载：preload（在主渲染前进行预加载） 和prefetch（利用空闲时间）,可用webpackde PreLoadWebpackPlugin插件，可

2.白屏 首屏 可操作时间

首屏：
1.使用css内嵌
2.延迟加载图片

1. 代码规范：
    css样式放在页面前面
    延迟js加载
    避免CSS表达式，避免@import
    减少DOM访问，使用事件代理
    

三、代码层面

1.页面渲染优化（减少重棑） ---
2.雅虎性能规则14条 ---
3.代码精简：去除重复的js ,无用的css
4.代码分割
5.减少dom操作:虚拟dom
6.模块化 减少强依赖

四、网络加载优化

1.使用cdn:能帮你选择最优的服务器下载响应你的资源。

五、基于webpack的性能优化：

1. 遇到webpack打包性能问题，先去npm run build --report，然后根据分析结果来做相应的优化，谁占体积大就干谁
2. webpack提供的externals可以配合外部资源CDN轻松大幅度减少打包体积，尤其对于echarts、jQuery、lodash这种库来说

3.代码拆分

JS 层面细细展开
只传送用户需要的代码。可用代码拆分（Code-splitting）。
优化压缩代码（ES5的Uglify，ES2015的babel-minify或者uglify-es）
高度压缩（用Brotli~q11，Zopfli或gzip）。Brotli的压缩比优于gzip。它可以帮CertSimple节省17%的压缩JS的字节大小，以及帮LinkedIn减少4%的加载时间。
移除无用的代码。用 Chrome DevTools代码覆盖率功能来查找未使用的JS代码。对于精简代码，可参阅tree-shaking， Closure Compiler的高端模式（advanced optimizations）和类似于 lodash-babel-plugin的微调库插件，或者像Moment.js这类库的Webpack的ContextReplacementPlugin。用babel-preset-env & browserlist来避免现代浏览器中已有的转译（transpiling）功能。高级开发人员可能会发现仔细分析Webpack打包（bundle）有助于他们识别和调整不必要的依赖关系。
缓存HTTP代码 来减少网络传输量。确定脚本最佳的缓存时间（例如：max-age）和提供验证令牌（Etag）来避免传送无变化的字节。用Service Worker缓存一方面可以让应用程序网络更加灵活，另一方面也可以让你能够快速访问像V8代码缓存这样的功能。长期缓存可以去了解下Webpack带哈希值文件名（filename hashing）。

六、总结

1.对性能优化最明显的是(从上之下)
缓存--强弱缓存
Gzip>压缩uglify
优化图片
js代码分割》按需请求 加载>
虚拟dom

1.1、理解资源加载的过程
包括：TCP握手连接、HTTP请求报文、HTTP回复报文
1.2、理解资源加载的性能约束，包括：TCP连接限制、TCP慢启动
1.3、理解CSS文件、JS文件压缩，理解不同文件放在页面不同位置后对性能的影响
1.4、理解CDN加速
1.5、学会使用HTTP头控制资源缓存，理解cache-control、expire、max-age、ETag对缓存的影响
1.6、深入理解浏览器的render过程

关于前端性能的 推荐2片优秀的文章：
JavaScript的成本
我自己的前端性能优化概要设计