如何通过优化JS代码来适合网站优化

发布网友

我来回答

共4个回答

懂视网

作为一名前端工程师，对于javascript大家都不陌生，这篇文章从更深层次的方向——JS引擎去理解javascript到底是怎么运行的，从而进行优化。

JS Engine—— JS 引擎介绍

一、基本介绍

js引擎是一个专门运行javascript的解释器(interpreter)。目前比较主流的js 引擎和介绍，大家可以简单了解一下：

二、V8引擎运行流程

现在由于NodeJS和谷歌浏览器的普及，在此就主要介绍V8引擎的运行机制，如果大家对其他引擎感兴趣，可以自行查看，基本上是大同小异的

我们可以看到，JS引擎的处理过程是先解析转换为AST语法树，然后由解释器主要做两件事，第一个是转化为机器语言bytecode，第二个是交给编辑器（optimizting compiler）进行优化，中间还有一个数据分析过程(profilling data)，主要目的是为了进行优化JS的运行，优化完毕后的代码，再转化为机器语言。

而V8引起的核心组件就分别是Ignition和TurboFan了

JS Code—— Talk is cheap

看到这，你肯定会想，我知道这有啥用，Talk is cheap，有没有代码可以分析的。 那么大家请看以下示例代码，通过分析代码后，我再详细介绍其中的原理

示例代码一：

// first case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
 a[k] = 0
}
 
for (let i = 0; i < 9999999; i++) {
 b[i] = 0
}
console.timeEnd()
 
// second case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
 a[k] = 0
}
 
for (let i = 10000000; i < 19999999; i++) {
 b[i] = 0
}
console.timeEnd()
 
// third case
var a = {}
var b = {}
 
console.time()
for (let k = 0; k < 9999999; k++) {
 a[k] = 0
}
 
for (let i = 9999999; i < 0; i--) {
 b[i] = 0
}
console.timeEnd()

看完以上代码，内容很简单，就是定义object a和b 然后不断添加属性，唯一区别的是，first case是a和b重复添加相同的属性，second case是a和b添加不同的属性，third case是a和b重复添加相同的属性，但是处理b的时候是相反顺序的。

那么问题来了：三块代码，运行速度有没有快慢之分，分别又大不大呢？ （不用去确认循环次数，都是一样滴！）

答案来了：用时时间大概是 3 (500ms)< 1 (1000ms) < 2 (2000ms)，几乎就是2倍的速度差了。

V8 Engine —— Hidden Class

我们知道，js是动态脚本语言，什么意思呢，就是你可以很简单的给object添加/删除属性，或者改变其类型，大部分的js解释器(interpreter)使用字典结构，在内存中存储变量属性值的地址，这种方式比起java和C#(非动态语言，当然了C#的dynamic类型另当别论，不在此赘述)要低效率的多，因为js的类型是可以随时转换的，本来使用字典结构结合固定的类型进行判断，可以较容易的找到变量属性值的位置，而在js中就难以实现了。

所以V8引擎就使用了一种高效率的方法叫Hidden Class。其他的引擎也有类似的方法，有叫Map的, Structures的,Hidden Class的等等，在这里我们用Shape来定义它，这样方便大家理解。

当我们定义一个object的时候，它会包含以下内容：

每个属性的意义可以见上表。

那么结合Shape，当定义一个object的时候，JS引擎会创建一个Shape (可以理解为连续的缓存buffer)，它的位置0和1存储了x和y值，如下图：

如果我定义了两个object，都是包含x和y的，那么它就会共用一个shape，如下图：

所以到这里我们可以想象的到，我们只要定义相同属性的object，那么都会共用一个shape，当我们要调用任意一个shape的属性值的时候，都可以通过同一个shape的offset来获取到了。

那么，当我们给object添加属性的时候呢？V8引擎会根据类过渡（class transition）原理创建新的shape来标记位置，如下图

也就是说，我们创建了3个shape，通过过渡链(transition chain)来实现一个object的追溯。

看到这里，大家肯定在想，每多一个shape肯定就会多占用一块内存，那么我为了优化的话，尽量在初始化的时候把属性都定义好就能优化了，Bingo~ 我们可以参照下图来验证：

通过以上的原理解释，相信大家肯定能够推算解释出，我们的示例代码的执行速度的区别了。

First Case:

1. Shape (empty) for a和b

2. Shape 1....9999999 for a

3. Shape 1....9999999 for b

a和b都共用了相同的shape，可以重复使用

Second Case:

1. Shape (empty) for a和b

2. Shape 1....9999999 for a

3. Shape 10000000....19999999 for b

一共定义了 1 到 19999999的shape，那么second case肯定时间要比first case要花多一倍的时间了

Thrid Case:

1. Shape (empty) for a和b

2. Shape 1....9999999 for a

3. Shape 9999999 ....1 for b

源码：https://github.com/likeconan/Alipay_Wechat_Integration

更多JavaScript知识请关注PHP中文网js特效大全栏目。

热心网友

一、 让代码简洁：一些简略的表达方式也会产生很好的优化
eg：x=x+1;在不影响功能的情况下可以简写为x++;
二、 变量名方法名尽量在不影响语意的情况下简单。（可以选择首字母命名）
eg：定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength。
三、 关于JS的循环，循环是一种常用的流程控制。
JS提供了三种循环：for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for(;;)、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。
四、 如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。
因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。
五、 尽量选用局部变量而不是全局变量。
局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。
六、 尽量少使用eval。
每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。
七、 减少对象查找
因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。
八、 字符串连接。
如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。
如果要连接多个字符串，应该少使用+=，如s+=a;s+=b;s+=c;应该写成s+=a + b + c；
而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");
九、 类型转换
1. 把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：("" +) > String() > .toString() > new String()
尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。
String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。
2. 浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。
3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高
十、 尽量作用JSON格式来创建对象，而不是var obj=new Object()方法。
因为前者是直接复制，而后者需要调用构造器，因而前者的性能更好。
十一、 当需要使用数组时，也尽量使用JSON格式的语法，
使用JSON格式的语法即直接使用如下语法定义数组：[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。
十二、 对字符串进行循环操作，例如替换、查找，就使用正则表达式。
因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。
十三、 插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。
十四、 对象查询
使用[“”]查询要比.items()更快
十五、 定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。
十六、 尽量减少DOM调用
在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流 （reflow）操作。我们应该尽可能的减少DOM操作。

热心网友

将网页js代码调用放在网站尾部，避免网页由于js加载导致网页无法显示，更加符合用户体验

热心网友

js在数据传输，用户交互以及增进页面丰富度上起到了很大的作用，js的功用就是action。
不过js的主要功能却与搜索引擎索引页面以提供给用户相应信息及满足需求并不太吻合。因为js主要体现在来到页面后的使用体验上。而搜索引擎则主要体现在为用户提供信息，而它能识别的信息目前文字占据绝大部分。
不过二者有一个方向是吻合的，那就是满足用户。因此，js的用与不用，使用范围等就与网站本身提供的服务和功能挂钩了。如果是一个提供文字资讯的站点，多余的js是没有必要的，甚至不使用js为最好，或者将其封装起来阻止爬取，只将文本信息留给蜘蛛。
js的使用必然会产生页面延迟，过多的交互还有可能导致浏览器运行缓慢甚至崩溃。这都是不好的。这也是技术人员想着力解决的问题，不过因为各种原因总会出现各种bug。
所以无论大小站点，禁止掉对js的爬取，并将这部分数据能以非js的方式向搜索引擎展现出来，对于交互型频繁的网站或网页甚至可以将整个页面对搜索引擎关闭，并制作一套对应的静态页面用以蜘蛛爬取。当用户进入后，采用非作弊手段转向到用户交互页面。不过有的网站本就是一个交互型展示网站，页面用不着去让搜索引擎展示，这就另当别论了，尽可以使用js，只要不影响系统使用就好。
js站跟搜索引擎友好站，从本质上就是互相冲突的。所以如果重视SEO，就尽可能使用静态页面，主要原因是快。获取信息的第一要求就是快。所以在百度mip直接要求不得使用自定义js。仅引入百度提供的js文件，其他家也一样，尤其在移动端对这个的要求更加高。
我记得有人测试过搜索引擎对js代码的爬取，的确能识别一部分了。但不可预知的代码错误导致的蜘蛛漏洞，还是无处不在，这又说到浪费蜘蛛资源以及对蜘蛛不甚友好上去了。因此对于小站点来说能不能可不用。做了这么多小企业站，大站各种滚动，闪动，貌似并不能对swo产生多大价值，当然由于其代码也相对简单，风险也比较小，通常都未做任何处理，而且有时候有意用js阻止一些不必要的抓取。