关于前端性能优化的讨论一直都很多,包罗的知识也很多,可以说性能优化只有更好,没有最好。前面我写了一篇关于css优化的总结文章,今天再从javascript方面聊一聊。

1.从资源加载方面来说,浏览器的加载顺序是按源码从上到下加载解析的,遇到link,script等资源都会阻塞页面渲染,所以我们会把script放在</body>前面,我们还可以结合构建工具(webpack,gulp...)压缩js文件,抽离公共js、去掉空格、注释,尽可能地让js文件变小,防止脚本阻塞页面渲染。

2.在写代码的时候我们还要注意以下问题。

(1)减少作用域链上的查找次数。我们知道,js代码在执行的时候,如果需要访问一个变量或者一个函数的时候,它需要从当前执行环境的作用域链一级一级地向上查找,直到全局作用域。如果我们需要经常访问全局环境的变量对象的时候,我们每次都必须在当前作用域链上一级一级的遍历,这显然是比较耗时的。


function getTitle() {
var h1 = document.getElementByTagName("h1");
for(var i = 0, len = h1.length; i &lt; len; i++) {
h1[i].innerHTML = document.title + " 测试 " + i;
}
}

上面这样写就非常耗时,我们可以优化一下:


function getTitle() {
var doc = document;
var h1 = doc.getElementByTagName("h1");
for(var i = 0, len = h1.length; i &lt; len; i++) {
h1[i].innerHTML = doc.title + " 测试 " + i;
}
}

通过创建一个指向document的局部变量,就可以通过限制一次全局查找来改进这个函数的性能。

(2)闭包导致的内存泄露。
闭包可以保证函数内的变量安全,可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中,不会被自动清除。使用场合:设计私有的方法和变量。使用不当就会造成内存占用过高。我们需要手动销毁内存中的变量。

(3)尽量少用全局变量,尽量使用局部变量。全局变量如果不手动销毁,会一直存在,造成全局变量污染,可能很产生一些意想不到的错误,而局部变量运行完成后,就被会被回收;

(4)使用classname代替大量的内联样式修改。很多时候我们会在用户操作的时候,页面元素样式会进行相应的变化,这时候我们就可以把要变化的样式写成一个class,操作class变化,就能实现大量样式的变化。

(5)批量元素绑定事件,可以使用事件委托。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。比如我们有100个li,每个li都要绑定click点击事件,就可以用事件委托。举一个例子:我们需要给所有的button绑定click事件


&lt;div id="box"&gt;
&lt;input type="button" id="add" value="添加" /&gt;
&lt;input type="button" id="remove" value="删除" /&gt;
&lt;input type="button" id="move" value="移动" /&gt;
&lt;input type="button" id="select" value="选择" /&gt;
&lt;/div&gt;

我们有可能会这样写


window.onload = function(){
var Add = document.getElementById("add");
var Remove = document.getElementById("remove");
var Move = document.getElementById("move");
var Select = document.getElementById("select"); Add.onclick = function(){
alert('添加');
};
Remove.onclick = function(){
alert('删除');
};
Move.onclick = function(){
alert('移动');
};
Select.onclick = function(){
alert('选择');
}
}

用事件委托就可以这样写:


window.onload = function(){
var oBox = document.getElementById("box");
oBox.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() == 'input'){
switch(target.id){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('删除');
break;
case 'move' :
alert('移动');
break;
case 'select' :
alert('选择');
break;
}
}
} }

而且使用事件委托,还有一个好处就是,当你添加一个新的button,一样的会绑定上click事件,这就是委托事件的好处。上面这样的写法是原生js的写法,jquery可以这样写:


$("#box").on("click","input",function(event){
var targetId = $(this).attr('id');
switch(targetId){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('删除');
break;
case 'move' :
alert('移动');
break;
case 'select' :
alert('选择');
break;
}
})

这样写就简便得多。

(6)避免不必要的DOM操作,尽量使用 ID 选择器:ID选择器是最快的,避免一层层地去查找节点。

(7)类型转换:把数字转换成字符串使用number + "" 。
虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:


("" + ) &gt; String() &gt; .toString() &gt; new String()

(8)对字符串进行循环操作,譬如替换、查找,应使用正则表达式。因为本身JavaScript的循环速度就比较慢,而正则表达式的操作是用C写成的语言的API,性能很好。

(9)对象查询使用[""]查询要比.items()更快。这和前面的减少对象查找的思路是一样的,调用.items()增加了一次查询和函数的调用。

(10)浮点数转换成整型使用Math.floor()或者Math.round()。parseInt()是用于将字符串转换成数字,Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用的时间,速度是最快的。

关于js性能优化来说,涉及到很多方面,特别是现在又出现很多的前端框架,优化方法又各有不同。上面说的这些只是很浅显的东西,在开发中多注意一下就可以了,尽量精简自己的代码。性能优化还需要继续深入研究。

来源:https://segmentfault.com/a/1190000017837710

前端性能优化JavaScript篇的更多相关文章

  1. 前端性能优化---缓存篇SDK

    1.把前端最常用的资源css.js存在本地1.1  前端缓存技术SessionStorage 优点:临时存储神器,关闭页面标签自动回收,不可以跨页面交互. 取值的时候有两种方法,一种是用session ...

  2. 前端性能优化(JavaScript篇)

    正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是 ...

  3. 前端性能优化(三)——传统 JavaScript 优化的误区

    注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...

  4. Web前端性能优化进阶——完结篇

    前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...

  5. 【前端性能优化】高性能JavaScript整理总结

    高性能JavaScript整理总结 关于前端性能优化:首先想到的是雅虎军规34条然后最近看了<高性能JavaScript>大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅 ...

  6. 前端性能优化:细说JavaScript的加载与执行

    本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...

  7. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  9. Web前端性能优化教程09:图像和Cookie优化

    本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...

随机推荐

  1. HDU 5379——Mahjong tree——————【搜索】

    Mahjong tree Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  2. StreamWrite类

    FileStream类,该对象只能以字节形式读取/写入数据,这就使得操作非常困难. 一般有了FileStream对象,都会借用StreamWrite对象或StreamReader对象的方法来处理文件. ...

  3. Oracle错误——ORA-03113:通信通道的文件结尾

    请参考:http://blog.csdn.net/zwk626542417/article/details/39667999 今天跟往常一样,登陆PL/SQL,确登陆失败,出现一个错误“ORA-010 ...

  4. Java反射破坏单例模式

    今天电话面试的时候问到了,Google了一下 原出处: http://blog.csdn.net/lws332969674/article/details/8125893 一. Java中的反射技术可 ...

  5. 错误Cannot find module 'stylus'

    vue项目中使用stylus预处理器写css语法,老是出现 Cannot find module ‘stylus’ 的错误,鼓捣了很久,包括webstorm中配置stylus的支持,安装依赖. 终于找 ...

  6. android 屏幕单击位置测试

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  7. mybatis学习目录

    mybatis详解动态SQL https://www.cnblogs.com/ysocean/p/7289529.html mybatis查询时间段sql语句 http://www.cnblogs.c ...

  8. React 环境搭建及页面调试方法

    React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...

  9. HCNA配置RIPv1

    1.拓扑图 2.配置 R1 The device is running! ###### <Huawei>sys Enter system view, return user view wi ...

  10. mysql在控制台里出现中文问号问题

    由于重装了wampserver,之前遇到的问题统统会重新出现,那么今天遇到的是在mysql控制台中,在表里输入中文数据,却出现问号的问题: 那么这个就跟编码有关系了,那么,我们就去wampserver ...