JS性能优化技巧实例分享
-
脚本应该放在页面元素代码之后
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或JavaScript的命名空间,它们会对后面页面内容造成影响。
-
避免全局查找
function search() { //当我要使用当前页面地址和主机域名 alert(window.location.href + window.location.host); } //最好的方式是如下这样 先用一个简单变量保存起来 function search() { var location = window.location; alert(location.href + location.host); }
登录后复制 类型转换
般最好用”" + 1来将数字转换成字符串,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:
登录后复制
(“” +) > String() > .toString() > new String() "
" var myVar = "3.14159", str = "" + myVar, // to string num=+myVar, // to number i_int = ~ ~myVar, // to integer f_float = 1 * myVar, // to float b_bool = !!myVar, /* to boolean - any string with length and any number except 0 are true */ array = [myVar]; // to array "
多个类型声明
在JavaScript中所有变量都可以使用单个var语句来声明,这样就是组合在一起的语句,以减少整个脚本的执行时间,就如上面代码一样,上面代码格式也挺规范,让人一看就明了。
通过模板元素clone,替代createElement
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低,如果需要直接插入HTML,可以找一个容器元素,比如指定一个p或者span,并设置他们的innerHTML来将自己的HTML代码插入到页面中。通常我们可能会使用字符串直接写HTML来创建节点,其实这样做,1:无法保证代码的有效性,2:字符串操作效率低,所以应该是用document.createElement()方法,而如果文档中存在现成的样板节点,应该是用cloneNode()方法,因为使用createElement()方法之后,你需要设置多次元素的属性,使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素,应该先准备一个样板节点。
var frag = document.createDocumentFragment(); for (var i = 0; i < 1000; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); //替换为: var frag = document.createDocumentFragment(); var pEl = document.getElementsByTagName('p')[0]; for (var i = 0; i < 1000; i++) { var el = pEl.cloneNode(false); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag);
登录后复制小心使用闭包
闭包的案例
document.getElementById('foo').onclick = function(ev) { };
登录后复制在循环时将控制条件和控制变量合并起来
for ( var x = 0; x < 10; x++ ) {};
登录后复制当我们要添加什么东西到这个循环之前,我们发现有几个操作在每次迭代都会出现。JavaScript引擎需要: 1:检查 x 是否存在 2:检查 x 是否小于 10 3:使 x 增加 1
改进
var x = 9; do { } while( x-- );
登录后复制避免与null进行比较
由于JavaScript是弱类型的,所以它不会做任何的自动类型检查,所以如果看到与null进行比较的代码,尝试使用以下技术替换:
1、如果值应为一个引用类型,使用instanceof操作符检查其构造函数 2、如果值应为一个基本类型,作用typeof检查其类型 3、如果是希望对象包含某个特定的方法名,则使用typeof操作符确保指定名字的方法存在于对象上
尊重对象的所有权
因为JavaScript可以在任何时候修改任意对象,这样就可以以不可预计的方式覆写默认的行为,所以如果你不负责维护某个对象,它的对象或者它的方法,那么你就不要对它进行修改,具体一点就是说:
1、不要为实例或原型添加属性 2、不要为实例或者原型添加方法 3、不要重定义已经存在的方法 4、不要重复定义其它团队成员已经实现的方法,永远不要修改不是由你所有的对象,你可以通过以下方式为对象创建新的功能: 1、创建包含所需功能的新对象,并用它与相关对象进行交互 2、创建自定义类型,继承需要进行修改的类型,然后可以为自定义类型添加额外功能
使用直接量
var aTest = new Array(); //替换为 var aTest = []; var aTest = new Object; //替换为 var aTest = {}; var reg = new RegExp(); //替换为 var reg = /../; //如果要创建具有一些特性的一般对象,也可以使用字面量,如下: var oFruit = new O; oFruit.color = "red"; oFruit.name = "apple"; //前面的代码可用对象字面量来改写成这样: var oFruit = { color: "red", name: "apple" };
登录后复制缩短否定检测
if (oTest != '#ff0000') { //do something } if (oTest != null) { //do something } if (oTest != false) { //do something } //虽然这些都正确,但用逻辑非操作符来操作也有同样的效果: if (!oTest) { //do something }
登录后复制释放javascript对象
随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让GC能够回收这些内存控件。 对象:obj = null 对象属性:delete obj.myproperty 数组item:使用数组的splice方法释放数组中不用的item
巧用||和&&布尔运算符
function eventHandler(e) { if (!e) e = window.event; } //可以替换为: function eventHandler(e) { e = e || window.event; } if (myobj) { doSomething(myobj); } //可以替换为: myobj && doSomething(myobj);
登录后复制switch语句相对if较快
每条语句末尾须加分号
相关推荐:
以上是JS性能优化技巧实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

夸克网盘和百度网盘都是很便利的存储工具,不少的用户们都在询问这两款软件互通吗?夸克网盘怎么分享到百度网盘?下面就让本站来为用户们来仔细的介绍一下夸克网盘的文件怎么保存到百度网盘方法吧。 夸克网盘的文件怎么保存到百度网盘方法 1、想要知道怎么把夸克网盘的文件转到百度网盘,首先在夸克网盘上下载需要保存的文件,然后打开百度网盘客户端后,选择压缩文件要保存的文件夹,双击打开该文件夹。 2、打开该文件夹后,点击窗口左上角区域的“上传”。 3、在电脑中找到需要上传的压缩文件,点击选

1、首先我们进入到网易云音乐中,然后在软件首页界面中,点击进入到歌曲的播放界面中。2、然后在歌曲播放界面中,找到右上方的分享功能按钮,如下图红框所示位置,点击选择分享的渠道;在分享渠道中,点击底部的“分享至”选项,然后选择第一个“微信朋友圈”,即可将内容分享至微信朋友圈。

近期,百度网盘安卓客户端迎来了全新的8.0.0版本,这一版本不仅带来了众多变化,还增添了诸多实用功能。其中,最为引人注目的便是文件夹共享功能的增强。现在,用户可以轻松邀请好友加入,共同分享工作和生活中的重要文件,实现更加便捷的协作与共享。那么究竟该如何分享给好友自己需要分享的文件呢,下文中本站小编就将为大家带来详细内容介绍,希望能帮助到大家!1)打开百度云APP,首先点击在首页中选择相关的文件夹,然后再点击界面右上角的【...】图标;(如下图)2)随后点击“共享成员”一栏中的【+】,最后在勾选所

芒果TV拥有各种类型的电影、电视剧、综艺等资源,用户可以在其中自由的选择进行观看。芒果tv会员不仅能够看到全部的VIP剧而且还能够设置最高清的画质,帮助用户爽快看剧,下面小编就给大家带来一些芒果tv免费的会员账号供用户们使用,赶紧来看一看吧。芒果tv最新会员账号免费分享2023:注意:都是收集的最新会员账号,可以直接登录使用,不要随意的修改密码。账号:13842025699密码:qds373账号:15804882888密码:evr6982账号:13330925667密码:jgqae账号:1703

惠普打印机是很多办公室内必备的打印设备,在电脑上安装打印机驱动,可以完美解决打印机无法连接等等问题。那么惠普打印机驱动怎么安装?下面小编就给大家介绍两个惠普打印机驱动程序安装方法。 第一种方法:官网下载驱动 1、在搜索引擎中搜索惠普中国官网,在支持一栏中,选择【软件与驱动程序】。 2、选择【打印机】分类,在搜索框中输入你的打印机型号,点击【提交】,即可查找到你的打印机驱动。 3、根据你电脑的系统选择对应的打印机,win10即选择win10系统的驱动。 4、下载成功后,在文件夹中找到

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

番茄小说是丰富的小说宝库,其中汇聚了海量优质的小说资源。在这里,你可以根据自己的喜好,从多种不同类型的小说中挑选出心仪之作。对于热爱阅读的你,这无疑是一片可以自由翱翔的文学天地。有的时候遇到心仪的读物也像分享给好友一起阅读,但是很多用户们还不清楚究竟该如何分享,那么这篇教程攻略就将为大家带来详细的攻略介绍,想要了解的玩家们就快来跟着本文一起阅读吧!番茄小说怎么分享书给好友?1、打开番茄小说,点击进入小说,点击右上角分享图标。2、选择分享渠道,这里小编以分享至微信好友为例。3、点击分享。4、即可查

wps是一款颇受欢迎的办公软件,无论是在学习、工作还是生活中,都能大大提高工作效率。我们经常会将wps文件分享给需要的朋友,具体要怎么操作呢?下面就由小编来演示一下详细操作。 1、打开需要分享的文件。 2、点击文件,再点击分享文档。 3、权限选择仅指定人可查看/编辑,然后点击创建并分享。 4、然后点击复制链接。 5、打开自己要分享的途径,如分享微信好友,在输入框点击鼠标右键,选择粘贴。 6、然后点击发送就可以了。
