网页内容
- 减少 http 请求次数;
- 减少 DNS 查询次数;
- 减少 iframe 数量;
- 减少 DOM 元素数量;
- 延迟加载;
- 提前加载;
- 滚动加载;
- 根据域名划分内容;
- 避免页面跳转;
- 缓存 Ajax;
图片
- css sprites,即精灵图,将多个图标文件整合到一张图片中(修改更新少的常驻型低色位的装饰小图);
- base64,体积小复用率低的背景装饰图标;
- iconfont,纯色图标,上传图标 svg 生成对应字体文件, 比如阿里巴巴矢量图标库 ;
- 非纯色图通常用【2X】图适配,可用:媒体查询、srcset属性、image-set属性、脚本控制;
- 选择正确的图片格式,能使用 WebP 格式优先考虑,小图使用 png,如果可以使用 svg 代替,图片使用 jpg;
css
- 将样式表置顶;
- 避免 css 表达式;
- 用 link 代替 @import;
- 避免使用 Filters
- 建议使用类选择器,访问比较快;
- 不建议使用很长的base64;
javascript
- 将脚本置底,防止阻塞以减少对并发下载的影响,尽早刷新文档的输出;
- 使用外部 javascript 文件;
- 精简 javascript;
- 去除重复脚本;
- 减少DOM访问,尽量缓存DOM;
- 使用智能事件处理;
- 避免使用eval和width;
- 充分利用事件委托;
- 减少 Repaint(重绘)和 Reflow(重排)最好通过批量更新元素减少重排次数,如设置类class统一更新样式,在添加多个 li;
- 元素将会触发多次页面重排的情况下使用 DOM fargment 在内存中创建完整的 DOM 节点,然后再一次性添加到 DOM 中;
cookie
- 减少 Cookie 大小;
- 页面内容使用无 cookie 域名;
服务器
- 使用 CDN(内容分发网络);
- 添加 Expires 或 Cache-control 报文头;
- GZip 压缩传输文件;
- 配置 ETags;
- 避免空的图片 src;
webpack
主要从减少 Webpack 的打包时间和让 Webpack 打出来的包更小入手。
- 优化 Loader 的文件搜索范围,从
include
和exclude
配置入手,配合文件缓存loader: 'babel-loader?cacheDirectory=true'
; - HappyPack,将 Loader 的同步执行转换为并行的,充分利用系统资源来加快打包效率;
- DllPlugin,将特定的类库提前打包然后引入;
- 代码压缩,一般使用
UglifyJS
来压缩代码,不过这是单线程的,可使用webpack-parallel-uglify-plugin
来并行运行UglifyJS
,从而提高效率; - 按需加载,一个项目难免会存在几十个页面的路由,如果所有页面的都打包进一个 js 文件(文件就会过大),加载第一个页面就会耗费很长时间。实现按需加载,每个页面(路由)打包成一个文件。另外,对于一些库文件也可以打包成一个文件。
- Scope Hoisting,范围提升,会分析出模块之间的依赖关系,尽可能的把打包出来的模块合并到一个函数中去;
- Tree Shaking,(树抖动,将一些要掉落的叶子或小树杈抖落)删除项目中未被引用的代码;