前端性能优化JavaScript篇
关于前端性能优化的讨论一直都很多,包罗的知识也很多,可以说性能优化只有更好,没有最好。前面我写了一篇关于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 < 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 < len; i++) {
h1[i].innerHTML = doc.title + " 测试 " + i;
}
}
通过创建一个指向document的局部变量,就可以通过限制一次全局查找来改进这个函数的性能。
(2)闭包导致的内存泄露。
闭包可以保证函数内的变量安全,可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中,不会被自动清除。使用场合:设计私有的方法和变量。使用不当就会造成内存占用过高。我们需要手动销毁内存中的变量。
(3)尽量少用全局变量,尽量使用局部变量。全局变量如果不手动销毁,会一直存在,造成全局变量污染,可能很产生一些意想不到的错误,而局部变量运行完成后,就被会被回收;
(4)使用classname代替大量的内联样式修改。很多时候我们会在用户操作的时候,页面元素样式会进行相应的变化,这时候我们就可以把要变化的样式写成一个class,操作class变化,就能实现大量样式的变化。
(5)批量元素绑定事件,可以使用事件委托。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。比如我们有100个li,每个li都要绑定click点击事件,就可以用事件委托。举一个例子:我们需要给所有的button绑定click事件
<div id="box">
<input type="button" id="add" value="添加" />
<input type="button" id="remove" value="删除" />
<input type="button" id="move" value="移动" />
<input type="button" id="select" value="选择" />
</div>
我们有可能会这样写
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 + "" 。
虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:
("" + ) > String() > .toString() > 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篇的更多相关文章
- 前端性能优化---缓存篇SDK
1.把前端最常用的资源css.js存在本地1.1 前端缓存技术SessionStorage 优点:临时存储神器,关闭页面标签自动回收,不可以跨页面交互. 取值的时候有两种方法,一种是用session ...
- 前端性能优化(JavaScript篇)
正巧看到在送书,于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告:更多内容可以看我的博客 优化循环 如果现在有个一个data[]数组,需要对其进行遍历,应当怎么做?最简单的代码是 ...
- 前端性能优化(三)——传统 JavaScript 优化的误区
注:本文是纯技术探讨文,无图无笑点,希望您喜欢 一.前言 软件行业极其缺乏前端人才这是圈内的共识了,某种程度上讲,同等水平前端的工资都要比后端高上不少,而圈内的另一项共识则是--网页是公司的脸面! 几 ...
- Web前端性能优化进阶——完结篇
前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
- 【前端性能优化】高性能JavaScript整理总结
高性能JavaScript整理总结 关于前端性能优化:首先想到的是雅虎军规34条然后最近看了<高性能JavaScript>大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅 ...
- 前端性能优化:细说JavaScript的加载与执行
本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
随机推荐
- POJ 2594 —— Treasure Exploration——————【最小路径覆盖、可重点、floyd传递闭包】
Treasure Exploration Time Limit:6000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64 ...
- centos系统安装mysql
方式一. 通过yum install mysql-server安装mysql服务器.chkconfig mysqld on设置开机启动,并service mysqld start启动mysql服务,并 ...
- 关于使用Github,gitignore不起作用的解决方法
直接上解决方法: 1 2 3 git rm -r --cached . git add . git commit -m 'update .gitignore' 解释: .gitignore文件,具 ...
- 使用js来执行全屏
当用户按下F11事件,浏览器为触发自身全屏功能,这个过程我们一般是不可控制的,即使是监听了F11的键盘事件,退出全屏的时候,我们也捕捉不到退出全屏触发的事件.所以,我们就用程序自己去实现F11的功能, ...
- HTTP杂记
HTTP请求中的浏览器Timing信息: stalled:浏览器发出请求到这个请求可以发出的等待时间 proxy negotiation: 代理协商的时间 request sent:请求的第一个字节发 ...
- JSP中的Property 'name' not found on type java.lang.String
如果是在forEach中出现. 那么看下items里是不是没有el表达式,只是个字符串. 今天犯了好几次. 特此记录
- Struts_OGNL(Object Graph Navigation Language) 对象图导航语言
1.访问值栈中的action的普通属性: 请求: <a href="ognl.action?username=u&password=p">访问属性</a& ...
- Linux命令之查看日志等实时文件命令(less 、tail)使用
一.less的使用 1)less 文件名,即可快速打开文件 2)相关查看搜索 3)利用键盘向上向下箭头键盘上的向上和向下箭头,点击一次向下简单,文件内容往下读取一行:点击一次向上箭头,文件内容,往上 ...
- 06、部署Spark程序到集群上运行
06.部署Spark程序到集群上运行 6.1 修改程序代码 修改文件加载路径 在spark集群上执行程序时,如果加载文件需要确保路径是所有节点能否访问到的路径,因此通常是hdfs路径地址.所以需要修改 ...
- vos套餐设置
为实现对客户不同时段按不同费率计算,可以在vos里设置套餐, 具体案例: 1. 2.时段费率 套餐里没包含的时间段是不能打电话的 即:周一到周五 21:30—24:00 00:00- ...