[关闭]
@lizlalala 2016-09-21T20:31:59.000000Z 字数 660 阅读 1340

从有道的一道笔试题看前端性能优化

性能优化


事情是介样的,有校招的孩纸在做一道笔试题,楼主就按照自己实习的时候的经验,加上最近在看高性能javascript的一些知识,po出自己的答案,长期维护。

场景

解答

  1. 后台启用缓存,前端也可以{url:response}缓存请求。
  2. 内部处理系统,js等资源文件放到服务器上,不要使用cdn。
  3. 调试工具分析请求的时间组成,如果大部分在:
    • 资源下载上:减少文件大小
      • 资源文件提取公共部分,chunks,不变的部分考虑缓存,其他用md5保证更新
      • 合并请求,css sprite, 构建工具合并js.或者用multiXHR
      • 压缩代码,uglyfy
      • 信标 beacons
    • 解析上:
      • 数据格式选择是否有问题,是否是回传的html,或者xml等,考虑用json甚至jsonp来替代
    • 阻塞渲染
      • 用js timer测时间,js的执行需要少于100ms,如果有多于的部分,需要考虑把阻塞的部分处理,分割任务,比如用定时器,或者webworker保证能定时有ui 更新。还可以考虑用动态脚本注入,来createElement,(js,src),来实现异步下载。
      • 重要的css部分(用工具分析css,提取其中最重要的部分,首先进行加载这部分可视区域)
  4. 代码优化
    • 少操作dom,尽量用js去进行操作,尽量使用选择器api,(querySelectorAll代替集合如getElementsByTags)
    • 对于那些可能会引起重绘、重排的部分,使之脱离文档流
      • documentFragment
      • display:none,更改后display
      • 深拷贝元素,更改后替换
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注