从五个方面来分析前端性能优化,为面试而打造。
优化HTML
- 避免图片和 iFrame等src属性为空。src属性为空,会重新加载当前页面,影响速度和效率
- 尽量避免在HTML标签中写 Style属性
- 把CSS放在页面头部,把JavaScript代码放在页面底部,这样避免阻塞页面渲染而使页面出现长时间的空白
优化CSS
- 避免使用CSS表达式、高级选择器、通配选择器,尽量使用id、class选择器设置样式,避免使用style属性设置行内样式
- 压缩、合并CSS
- 当需要设置的样式很多时,设置 className而不是直接操作 Style
- 正确使用display属性,display属性会影响页面的渲染
- 不滥用float
- 不声明过多的font-size
- 当值为0时不需要单位
- 尽量使用CSS3动画
优化JavaScript
- 少用全局变量,缓存DOM节点查找的结果,减少I/O读取操作
- 用 innerHTML代替DOM操作,减少DOM操作次数,
优化 JavaScript性能,用 setTimeout避免页面失去响应 - 避免使用with(with会创建自己的作用域,增加作用域链的长度)
- 多个变量声明合并
- 合理使用 requestAnimationFrame动画代替 setTimeOut
- 使用 touchstart、 touchend代替 click
- 适当使用 canvas动画
- 尽量避免在高频事件(如 TouchMove、 Scroll事件)中修改视图,这会导致多次渲染
利用缓存优化服务器端
- 缓存Ajax,使用CDN,添加 Expires头,在服务器端配置Etag
- 使用CDN托管文件,让用户更快速地访问
- 可以使用多个域名来缓存静态文件,延长静态资源缓存时间,合理设置资源的过期时间
- 开启服务器端的Gzip压缩,对文本资源非常有效
- 减少cookie头信息的大小,头信息越大,资源传输速度越慢
请求数量
优化图片加载
- 图片懒加载。可以为页面添加一个滚动条事件,判断图片是否在可视区域内或者即将进入可视区域,优先加载。
- 如果为幻灯片、相册文件等,可以使用图片预加载技术,对于当前展示图片的前一张图片和后一张图片优先下载。
- 如果图片为CSS图片,可以使用精灵图合并,减少HTTP请求
- 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩得特别小的缩略图,以提高用户体验。
- 如果图片展示区域小于图片的真实大小,则应在服务器端根据业务需要先行进行图片压缩,图片压缩后,图片大小与展示的就一致了。
- 为图片标明高度和宽度
网友评论