阅读 1971

面试之道之性能篇

网页内容

  • 减少 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 的文件搜索范围,从 includeexclude 配置入手,配合文件缓存 loader: 'babel-loader?cacheDirectory=true'
  • HappyPack,将 Loader 的同步执行转换为并行的,充分利用系统资源来加快打包效率;
  • DllPlugin,将特定的类库提前打包然后引入;
  • 代码压缩,一般使用 UglifyJS 来压缩代码,不过这是单线程的,可使用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS,从而提高效率;
  • 按需加载,一个项目难免会存在几十个页面的路由,如果所有页面的都打包进一个 js 文件(文件就会过大),加载第一个页面就会耗费很长时间。实现按需加载,每个页面(路由)打包成一个文件。另外,对于一些库文件也可以打包成一个文件。
  • Scope Hoisting,范围提升,会分析出模块之间的依赖关系,尽可能的把打包出来的模块合并到一个函数中去;
  • Tree Shaking,(树抖动,将一些要掉落的叶子或小树杈抖落)删除项目中未被引用的代码;
关注下面的标签,发现更多相似文章
评论