web前端性能优化问题以及解决方法

web前端性能优化问题以及解决方法

1、减少HTTP请求:

解决办法：合并图片（精灵图），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad(懒加载) 等技术进行优化。

2、请正确理解 Repaint(重绘) 和 Reflow(回流):

注：{Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

    Reflow(回流)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。}

解决办法：有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

3、减少对DOM的操作:

解决办法：修改和访问DOM元素会造成页面的Repaint和Reflow, 合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

4、使用JSON格式来进行数据交换:

注:{JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。}

5、高效使用HTML标签和CSS样式:

正确理解：HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
CSS是用来渲染页面的，也是存在渲染效率的问题。

6、使用CDN（内容分发网络）加速:

基本思路: 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

7、压缩CSS和JS文件:

基本原理: CSS和JavaScript的压缩，直接减少下载的文件体积。

8、压缩图片和使用图片Sprite技术(精灵图):

图片压缩的方式：
8.1、缩小图片分辨率；
8.2、改变图片格式；
8.3、降低图片保存质量;

精灵图的话, 我就不做过多介绍了, 相信大家对这个就像家常便饭一样。

9、注意控制Cookie大小和污染 :

9.1、因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；
9.2、使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响；
9.3、Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

作者：LuckyDeity_
来源：CSDN
原文：https://blog.csdn.net/luckydeity_/article/details/81292288