web前端优化
时间:01-21来源:作者:点击数:27
- 请减少HTTP请求
当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时,将会频繁的与服务器建立连接,与释放连接,这必定会造成资源的浪费,且每个HTTP请求都会对服务器和浏览器产生性能负担。
网速相同的条件下,下载一个100KB的图片比下载两个50KB的图片要快。
解决办法:
合并图片(css sprites),合并CSS和JS文件;图片较多的页面也可以使用 lazyLoad 等技术进行优化。
- 合理设置 HTTP缓存
- 合理重绘,尽量少重排
基本原理:
Repaint(重绘)就是在一个元素的外观被改变,但没有改变布局(宽高)的情况下发生,如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性(宽和高),浏览器会重新计算元素的几何属性,Reflow是低效的,应当尽量避免。
- 减少dom操作
解决办法:
减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。
- 使用JSON格式来进行数据交换
- 高效使用HTML标签和CSS样式,将 CSS放在 HEAD中
对css选择符按照开销从小到大的顺序梳理一下:
ID选择符 #box
类选择符 .box
标签 div
伪类和伪元素 a:hover
解决办法:
当页面被触发引起回流(reflow)的时候,低效的选择符依然会引发更高的开销,所以请避免低效。
- 使用CDN加速(内容分发网络),将外部脚本置底
- 精简CSS和懒加载JS文件,减少请求次数
- 压缩资源,图片视情况使用懒加载或者Sprite技术
解决办法:
1.缩小图片分辨率;
2.改变图片格式;
3.降低图片保存质量。
- 注意控制Cookie大小和污染
方便获取更多学习、工作、生活信息请关注本站
微信公众号
