如何提高客户端的访问性能

网页内容

• 减少 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，（树抖动，将一些要掉落的叶子或小树杈抖落）删除项目中未被引用的代码；