面试之道之性能篇

网页内容

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