@lizlalala
2016-09-21T20:31:59.000000Z
字数 660
阅读 1257
从有道的一道笔试题看前端性能优化
性能优化
事情是介样的,有校招的孩纸在做一道笔试题,楼主就按照自己实习的时候的经验,加上最近在看高性能javascript的一些知识,po出自己的答案,长期维护。
场景
![](http://i1.piimg.com/567571/1eca2fdd796f1c0e.png)
解答
- 后台启用缓存,前端也可以{url:response}缓存请求。
- 内部处理系统,js等资源文件放到服务器上,不要使用cdn。
- 调试工具分析请求的时间组成,如果大部分在:
- 资源下载上:减少文件大小
- 资源文件提取公共部分,chunks,不变的部分考虑缓存,其他用md5保证更新
- 合并请求,css sprite, 构建工具合并js.或者用multiXHR
- 压缩代码,uglyfy
- 信标 beacons
- 解析上:
- 数据格式选择是否有问题,是否是回传的html,或者xml等,考虑用json甚至jsonp来替代
- 阻塞渲染
- 用js timer测时间,js的执行需要少于100ms,如果有多于的部分,需要考虑把阻塞的部分处理,分割任务,比如用定时器,或者webworker保证能定时有ui 更新。还可以考虑用动态脚本注入,来createElement,(js,src),来实现异步下载。
- 重要的css部分(用工具分析css,提取其中最重要的部分,首先进行加载这部分可视区域)
- 代码优化
- 少操作dom,尽量用js去进行操作,尽量使用选择器api,(querySelectorAll代替集合如getElementsByTags)
- 对于那些可能会引起重绘、重排的部分,使之脱离文档流
- documentFragment
- display:none,更改后display
- 深拷贝元素,更改后替换