前端性能优化

最新推荐文章于 2024-10-14 11:37:56 发布

MoonLight_dR

最新推荐文章于 2024-10-14 11:37:56 发布

阅读量292

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/MoonLight_dR/article/details/79632253

版权

学习笔记专栏收录该内容

22 篇文章

订阅专栏

前端性能优化的方法

1.减少HTTP请求次数

基本原理：在浏览器和服务器之间发生信息交换时，需要耗费大量时间，而一个正常的http请求是比较复杂的，平凡的发送http请求会大大降低运行速度；而当我们请求的网页中有多个图片、css、js时会频繁的与服务器建立连接，释放连接，会造成资源的浪费，所以减少http请求次数会提高性能；

具体方法：尽量和并图片、css、js。

网速相同的情况下，加载一个100kb的图片比加载两个50kb的图片要快的多；

如果加载一个页面有5个css文件，则会发出5次http请求，如果合并成一个文件，只会发送一个http请求；

2.使用CDN加速

基本原理：CDN是内容分发网络，网络上的静态资源即css、js均使用CDN分发，图片亦然；

将css放在顶部：网页上的资源加载是从上往下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

将js放在底部：加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续文件，所以就把js放在页面底部最后加载。

3.减少DOM操作

基本原理：对DOM操作的代价是非常大的，也是网页应用中的一个性能瓶颈；

解决方法：修改和访问DOM元素会造成页面回流和重绘，所以需要合理的使用js变量存储内容，考虑大量DOM元素中循环的性能开销、减少DOM元素的查询和修改，查询时可将其赋值给局部变量。

4.正确理解重排和重绘

基本原理：重绘就是在一个元素的外观被改变，但没有改变布局（宽高）如改变visibility、outline、背景色等等。

重排就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其他节点的visibility属性，这也是重排低效的原因。如：改变窗口大小、改变文字大小、内容的改变、浏览器窗口变化、style属性的改变等等。如果重排过于频繁，cpu使用率就会噌噌网上涨。

解决办法：上面提到通过设置style属性改变节点样式的话，每设置一次都会导致一次重排，所以最好通过设置class的方式；有动画效果的元素，它的position属性应该设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置fixed或absolute,那么就权衡速度的平滑性.

总之：因为reflow有时不可避免，所以只能尽可能限制重排的影响。

5.使用JSON格式进行数据交换

基本原理：JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 Javascript原生格式，这意味着在javascript中处理JSON数据不需要任何特殊的API或工具包。

与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用lJSON作为数据交换方式。

JS操作JSON：

在JSON中，有两个结构：对象和数组。

一个对象以 “ { ” 开始，“ } ” 结束。每个“名称”后跟一个 “ : ” ；“名称/值对”之间使用 “ , ”（逗号）分隔。名称用引号括起来；值如果是字符串则必须用引号括起来，数值型则不需要。如：
var obj={"name":"darren","age":24,"location":"beijing"}
数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：

var jsonlist=[{"name":"darren","age":24,"location":"beijing"},

{"name":"weidong.nie","age":24,"location":"hunan"}];

对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。