前端开发性能优化

Http请求：

(1)     dns预加载 <link rel="dns-prefetch" href="//atanx.alicdn.com">（域名预解析）

(2)     减少http访次数，包括静态资源及ajax接口访问数量，浏览器对同一个域名最大连接数为4-6个，请求次数过多会造成排队阻塞等待。

(3)     减少请求的http首部数据，比如排查不必要的cookie携带

 

图片：

(1)     使用雪碧图，iconfont，减少http请求次数

(2)     添加cache-control缓存，优化二次访问时间

(3)     排查oss上储存的png, jpg图片，比如大于20kb的图片，可以通过现成的图片压缩工具进行处理，在保证品质的情况下，可压缩至原有大小的30%左右。

(4)     图片格式采用webp格式

(5)     在图片资源多的页面(比如**列表页)，列表展示可以使用缩略图，用户点击预览时再访问原图，减少页面首次渲染时间

(6)     图片懒加载

 

JS，CSS：

(1)   添加cache-control缓存

(2)   首页加载js（需要梳理确认）如没有加载位置和执行时间的要求，加defer属性

 

React：

(1)  引入 react-lazyload

(2)  可以移除出render方法的逻辑都移除

(3)  按dom的更新频率给组件添加shouldComponentUpdate判断方法（shallowCompare）,或者使用PurComponent

(4)  使用react devtools和react-addons-perf包分析react组件的渲染时间

(5)  排查props是否使用箭头函数，key是否使用index

(6)  引入不可变数据，immutable.js ？

(7)  数据量大的列表使用虚拟列表 react-virtualized

(8)  梳理组件state，只要需要组件响应变动的数据才需要放到state中

(9)  组件层级避免过深

(10) 减少组件dom新增，删除逻辑，尽量使用opcity属性，减少重排（涉及大量dom重绘的场景）

(11) React新特性，比如hooks,memo(新版本特性，不适用)

(12) 子组件尽量使用FunctionComponent

 

webpack打包：

(1)  js资源压缩，optimizati(配置打包忽略注释代码或者开启多进程加快打包速度)

(2)  gzip压缩，服务端配合设置相应的响应头，gzip压缩（经过optimizati 和 gzip处理，资源文件体积会缩60%以上）

(3)  按需加载（code spliting）

(4)  commonChunks 提取功能的依赖资源到单独的文件中，减少http的请求成本（静态资源缓存）