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大小和污染
方便获取更多学习、工作、生活信息请关注本站
微信公众号
湘公网安备 43102202000103号