前端性能优化知识整理

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

查看性能工具

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.减小请求数

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

2、用户层面：

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

2.白屏 首屏 可操做时间

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

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

3、代码层面

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

4、网络加载优化

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

5、基于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）。

6、总结

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

1.一、理解资源加载的过程
包括：TCP握手链接、HTTP请求报文、HTTP回复报文
1.二、理解资源加载的性能约束，包括：TCP链接限制、TCP慢启动
1.三、理解CSS文件、JS文件压缩，理解不一样文件放在页面不一样位置后对性能的影响
1.四、理解CDN加速
1.五、学会使用HTTP头控制资源缓存，理解cache-control、expire、max-age、ETag对缓存的影响
1.六、深刻理解浏览器的render过程

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