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

性能优化

事情是介样的，有校招的孩纸在做一道笔试题，楼主就按照自己实习的时候的经验，加上最近在看高性能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
     • 深拷贝元素，更改后替换