前端性能优化

最新推荐文章于 2024-12-10 21:29:17 发布

一棵喂猪的白菜

最新推荐文章于 2024-12-10 21:29:17 发布

阅读量422

点赞数 1

分类专栏：优化文章标签：性能优化

本文链接：https://blog.csdn.net/weixin_40308535/article/details/80910299

版权

优化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端性能优化的目的:

1. 从用户角度而言:优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。

2. 从服务商角度而言:优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

浏览器渲染机制:

当我们的浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。

1.加载说的就是获取资源文件的过程，如果在加载的过程中，遇到外部css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。

2.但是如果遇到javascript文件，html文件会挂起渲染的线程，等待javascript加载完毕后，html文件再继续渲染。

3.为什么html需要等待javascript呢？因为javascript可能会修改DOM，导致后续的html资源白白加载，所以html必须等待javascript文件加载完毕后，再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。

内联VS外置

单独提取好处：

(1)提高了js和css的复用性

(2)减小页面体积

(3)提高了js和css的可维护性

内联的好处：

(1)减少页面请求

(2)提升页面渲染速度

使用内联的情况：

(1)脚本和样式只应用于一个页面

(2)页面不经常被访问

(3)脚本和样式很少的情况

在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说，如果外部文件中的 JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小

JS数组遍历的几种方式

JS数组遍历，基本就是for,forin,foreach,forof,map等等一些方法，以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比

第一种:普通for循环

代码如下:

for(j = 0; j < arr.length; j++) {
   
}

最简单的一种，也是使用频率最高的一种，虽然性能不弱，但仍有优化空间

第二种:优化版for循环

代码如下:

for(j = 0,len=arr.length; j < len; j++) {
   
}

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

这种方法基本上是所有循环遍历方法中性能最高的一种

第三种:弱化版for循环

代码如下:

for(j = 0; arr[j]!=null; j++) {
   
}

这种方法其实严格上也属于for循环，只不过是没有使用length判断，而使用变量本身判断，实际上，这种方法的性能要远远小于普通for循环

第四种:foreach循环

代码如下:

arr.forEach(function(e){  
   
});

数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱

第五种:foreach变种

代码如下:

Array.prototype.forEach.call(arr,function(el){  
   
});

由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。

实际性能要比普通foreach弱

第六种:forin循环

代码如下:

for(j in arr) {
   
}

这个循环很多人爱用，但实际上，经分析测试，在众多的循环遍历方式中

它的效率是最低的

第七种:map遍历

代码如下:

arr.map(function(n){  
   
});

这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach

第八种:forof遍历(需要ES6支持)

代码如下:

for(let value of arr) {  
   
});

这种方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循环

JS的垃圾回收机制

现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。

1、标记清除

这是javascript中最常用的垃圾回收方式。当变量进入执行环境是，就标记这个变量为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到他们。当变量离开环境时，则将其标记为“离开环境”。

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。

2、引用计数

另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来。这样，垃圾收集器下次再运行时，它就会释放那些引用次数为0的值所占的内存。

JS中最常见的垃圾回收方式是标记清除。

工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存

工作流程：

1.声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。

2.同一个值又被赋值给另一个变量，这个引用类型值的引用次数加1.

3.当包含这个引用类型值的变量又被赋值成另一个值了，那么这个引用类型值的引用次数减1.

4.当引用次数变成0时，说明没办法访问这个值了。

5.当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。

减少JavaScript中的垃圾回收

首先，最明显的，new关键字就意味着一次内存分配，例如 new Foo()。最好的处理方法是：在初始化的时候新建对象，然后在后续过程中尽量多的重用这些创建好的对象。

另外还有以下三种内存分配表达式（可能不像new关键字那么明显了）：

{} （创建一个新对象）

[] （创建一个新数组）

function() {…} (创建一个新的方法，注意：新建方法也会导致垃圾收集！！)

1、对象object优化

为了最大限度的实现对象的重用，应该像避使用new语句一样避免使用{}来新建对象。

{“foo”:”bar”}这种方式新建的带属性的对象，常常作为方法的返回值来使用，可是这将会导致过多的内存创建，因此最好的解决办法是：每一次函数调用完成之后，将需要返回的数据放入一个全局的对象中，并返回此全局对象。如果使用这种方式，就意味着每一次方法调用都会导致全局对象内容的修改，这有可能会导致错误的发生。因此，一定要对此全局对象的使用进行详细的注释和说明。

有一种方式能够保证对象（确保对象prototype上没有属性）的重复利用，那就是遍历此对象的所有属性，并逐个删除，最终将对象清理为一个空对象。

cr.wipe(obj)方法就是为此功能而生，代码如下：

// 删除obj对象的所有属性，高效的将obj转化为一个崭新的对象！
cr.wipe = function (obj) {
    for (var p in obj) {
         if (obj.hasOwnProperty(p))
            delete obj[p];
    }
};

有些时候，你可以使用cr.wipe(obj)方法清理对象，再为obj添加新的属性，就可以达到重复利用对象的目的。虽然通过清空一个对象来获取“新对象”的做法，比简单的通过{}来创建对象要耗时一些，但是在实时性要求很高的代码中，这一点短暂的时间消耗，将会有效的减少垃圾堆积，并且最终避免垃圾回收暂停，这是非常值得的！

2、数组array优化

将[]赋值给一个数组对象，是清空数组的捷径（例如： arr = [];），但是需要注意的是，这种方式又创建了一个新的空对象，并且将原来的数组对象变成了一小片内存垃圾！实际上，将数组长度赋值为0（arr.length = 0）也能达到清空数组的目的，并且同时能实现数组重用，减少内存垃圾的产生。

3、方法function优化

方法一般都是在初始化的时候创建，并且此后很少在运行时进行动态内存分配，这就使得导致内存垃圾产生的方法，找起来就不是那么容易了。但是从另一角度来说，这更便于我们寻找了，因为只要是动态创建方法的地方，就有可能产生内存垃圾。例如：将方法作为返回值，就是一个动态创建方法的实例。

在游戏的主循环中，setTimeout或requestAnimationFrame来调用一个成员方法是很常见的，例如：

setTimeout(
    (function(self) {                    
      return function () {
              self.tick();
    };
})(this), 16)

每过16毫秒调用一次this.tick()，嗯，乍一看似乎没什么问题，但是仔细一琢磨，每一次调用都返回了一个新的方法对象，这就导致了大量的方法对象垃圾！

为了解决这个问题，可以将作为返回值的方法保存起来，例如：

// at startup
this.tickFunc = (
    function(self) {
      return function() {
                self.tick();
      };
    }
)(this);

// in the tick() function
setTimeout(th

is.tickFunc, 16);