前端优化
网路方面
建立网络连接需要时间成本，而且浏览器同一时间发送的网络请求数量是有限的，所以，减少请求数目是一个优化方向。
1.减少http请求
- 合并js文件（webpack打包工具会做）
- 合并css文件（webpack打包工具会做）
- 雪碧图的使用
- 简单图片是用base64编码
小图片可以转成base64格式使用。10k以下的图片（不是固定标准）。但是也不能太多使用base64，影响html文件大小和易读性
2.减少资源体积
- gzip压缩
//安装 compression-webpack-plugin npm compression-webpack-plugin --save-dev //配置config config>index.js（webpack已经预设置好，只需要开启即可） productionGzip: true
- js混淆
YUI Compressor是java程序，可以压缩css和js，特点：移除注释、移除不必要的空格、标识符替换、其它优化
- css压缩
同上
- 图片压缩
缩小图片分辨率、改变图片格式、降低图片保存质量、使用tiny等图片网站压缩
3.缓存
- DNS缓存
- CDN缓存
- http缓存
4.移动端优化
- 使用长cache，减少重定向
- 首屏优化，保证首屏加载数据小于14kb
- 不滥用web字体
渲染和DOM操作
1.优化网页渲染
- css文件放在头部，js文件放在尾部或者异步
- 尽量避免内联样式
2.DOM操作优化
- 避免在document上进行频繁DOM操作
- 使用classname代替内联样式修改
- 对于复杂的UI元素，position设置为absolute或者fixed
- 尽量使用css动画（比js动画简单，不卡顿）
- 使用requestAnimationFrame代替setInterval
- 适当使用canvas
- 尽量减少css表达式的使用
- 使用事件代理
3.操作细节优化
- 避免图片或者frame使用空src
- 在css属性为0时，去掉单位
- 禁止图片缩放
- css前缀的正确使用
- 移除空的css规则
- css中可继承属性，尽量使用继承，减少设置
- 缩短css选择器
4.移动端优化
- 长列表滚动优化
ios尽量使用局部滚动，安卓尽量使用全局滚动。给body添加-webkit-overflow-scrolling:touch
- 函数防抖和函数节流
- 使用touchstart、touchend代替click
使用fastclick或者zepto的tap事件代替click也可以
- HTML的viewport设置
- 开启GPU渲染加速
css中translateZ，让浏览器开启GPU渲染
webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
或者
webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
如果开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
数据方面
1.图片加载处理
- 图片预加载
- 图片懒加载
先给图片的src指定一个简单的图片，然后将图片的真实地址设置成自定义的属性，做一个占位，给图片设置监听事件，一旦图片达到视口位置，将真实地址赋值到src上
- 首屏加载时进度条的现实
2.异步请求的优化
- 使用正常的json数据格式进行交互
- 部分常用数据缓存
storage的使用，可以缓存数据又不怕cookie暴露
- 控制Cookie大小和污染
- 数据埋点和统计
- webWorker的使用（多线程开启）
