JavaScript提高性能知识点汇总
一、针对js文件的加载位置
在HTML文件中，<script>标签是可以加在<head>区域和<body>区域的。这里鉴于JavaScript执行和UI渲染的单线程原因，如果js文件载入会阻塞后面对于页面的解析过程，页面会等到js文件完全加载并运行后才继续执行该做的操作。那么问题就来了，这样可能会出现页面空白or卡顿现象。作为一名前端开发，重要的不仅仅止于实现了需求，应该还有优质的用户体验。那么我们就需要消除用户枯燥的等待，针对这个问题，这里有本兽想到的两种解决方案：
1. 如果js文件没有特殊要求指明需要在页面渲染之前载入及编译完成的，那么选择将js文件放到</body>标签前(既所有的页面所呈现内容的后面)，css文件还是放到<head>区域(谁也不愿意看一个布局杂乱无章的页面)。这样做就能先让用户看到有布局的页面而不是空白页了，那么也会有人指出：那数据得通过js请求加载进来啊，怎么办呢？可以对数据的加载做排序，急需呈现的接口放前面执行，不是那么需要的可以延后执行，同时做个简单的载入动画or提示。
2. 如果这些js文件有指明需要先执行了，才能更好的展示页面内容，那么就在第一个js或者页面上先放个载入小动画，可以一些有趣的或者萌萌的动画场景。这样也是能较好的避免用户等待的无聊，说不定人家还对这个载入动画更感兴趣呢，这样可提升项目的用户体验感。
最终推荐：将<script>标签尽可能的放到</body>标签前面加载，以提升用户体验。
二、针对js文件的合并
在很多团队开发中，我们可能会将不同功能的代码块分别放置在不同的js文件中，以便于开发过程中众人合作写代码会更加方便，毕竟只需要找对应文件夹或文件而不是在一个很长的文件中找一个方法。这确实是会提高团队开发效率及新人加入后的更容易进行二次开发及维护。那么将这个问题放到页面性能里呢？这正是问题所在，在这本书中指出：Each HTTP request brings with it additional performance overhead,so downloading one single 100 KB file will be faster than downloading four 25 KB files.
下载1个100KB的文件比下载4个25KB的文件要快，而开发过程中区分开各个文件又有很大的好处，那么合并这个问题也就放在开发完后再处理咯，相信这个操作大家都不会陌生吧，现在的前端工具这么丰富，各位习惯用什么压缩就用什么压缩吧~
这里简单提出下，在载入文件方面还可以用到defer和async属性，用于延迟加载和异步加载，在现代浏览器中，大多数是已经支持defer属性了，还没习惯用这个额，也不知道具体会不会存在什么问题。有兴趣的朋友可自行google该知识点，这里件简单提下吧。
现在的框架也大多配合懒加载和按需加载了。
三、更快速的数据访问
对于浏览器来说，一个标识符所处的位置越深，去读写他的速度也就越慢(对于这点，原型链亦是如此)。这个应该不难理解，简单比喻就是：杂货店离你家越远，你去打酱油所花的时间就越长... 熊孩子，打个酱油那么久，菜早烧焦了 -.-~
如果我们需要在当前函数内多次用到一个变量值，那么我们可以用一个局部变量先将其存储起来，案例如下：
//修改前
function showLi(){
var i = 0;
for(;i<document.getElementsByTagName("li").length;i++){ //一次访问document
console.log(i,document.getElementsByTagName("li")[i]); //三次访问document
};
};
//修改后
function showLi(){
var li_s = document.getElementsByTagName("li"); //一次访问document
var i = 0;
for(;i<li_s.length;i++){
console.log(i,li_s[i]); //三次访问局部变量li_s
};
};
四、DOM操作的优化
众所周知的，DOM操作远比javascript的执行耗性能，虽然我们避免不了对DOM进行操作，但我们可以尽量去减少该操作对性能的消耗。
让我们通过代码解释这个问题：
function innerLi_s(){
var i = 0;
for(;i<20;i++){
document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值
};
};
针对以上方法进行一次改写：
function innerLi_s(){
var content ="";
var i = 0;
for(;i<20;i++){
content += "A"; //这里只对js的变量循环了20次
};
document.getElementById("Num").innerHTML += content; //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值
};
五、减少Dom的重绘重排版
元素布局的改变或内容的增删改或者浏览器窗口尺寸改变都将会导致重排，而字体颜色或者背景色的修改则将导致重绘。
对于类似以下代码的操作，据说现代浏览器大多进行了优化(将其优化成1次重排版)：
//修改前
var el = document.getElementById("div");
el.style.borderLeft = "1px"; //1次重排版
el.style.borderRight = "2px"; //又1次重排版
el.style.padding = "5px"; //还有1次重排版
//修改后
var el = document.getElementById("div");
el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版
针对多重操作，以下三种方法也可以减少重排版和重绘的次数：
1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none)
2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排
3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排
六、循环的优化
这应该是较多人都知道的写法了，简单带过即可(后面还是用代码+注释形式说明)~
//修改前
var i = 0;
for(;i<arr.lengthli++){ //每次循环都需要获取数组arr的length
console.log(arr[i]);
}
//修改后
var i = 0;
var len = arr.length; //获取一次数组arr的length
for(;i<len;i++){
console.log(arr[i]);
}
//or
var i = arr.length;;
for(;i;i--){
console.log(arr[i]);
}
七、合理利用二进制
如：对2取模，则偶数最低位是0，奇数最低位是0，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是1。
代码如下：
.odd{color:red}
.even{color:yellow}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
var i = 0;
var lis = document.getElementsByTagName("li");
var len = lis.length;
for(;i<len;i++){
if(i&1){
lis[i].className = "even";
} else{
lis[i].className = "odd";
}
};
虽说现代浏览器都已经做的很好了，但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响，但是从多个点进行优化后，可能产生的就会质的飞跃了
JavaScript 总结的这几个提高性能知识点，希望大家牢牢掌握。
相关推荐
-
JavaScript知识点总结之如何提高性能
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 先给大家巩固下javascript基本语法: javascript基本语法 定义变量统一用var关键字 语法:var 变量名称=变量值 标示符:①.由字母数字下划线构成 不能以数字开头 不能是关键字 严格区分大小写 数据类型: 数值型:number 字符串:string 布尔型:boolean 特殊数据类型:u
-
JavaScript知识点整理
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 首先,还是用比较官方的文字描述来解释下JavaScript: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. 它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于
-
javaScript知识点总结(必看篇)
1.javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下: 1.javaScript主要用来向HTML页面找那个添加交互行为. 2.javaScript是一种脚本语言,语法和java类似. 3.javaScript一般用来编写客户端脚本. 4.javaScript是一种解释性语言,边执行边解释. 2.javaScript由核心语法ECMAScript.浏览器对象模型(
-
JS运动相关知识点小结(附弹性运动示例)
本文总结了JS运动相关知识点.分享给大家供大家参考,具体如下: 1.多物体运动框架所有东西都不能共用 2.document.title输出频率不能太高 3.在写JS时尽量避免写小数,因为计算机内部都是模拟的,而不是实际存储的 如:0.07*100 在JS运算里不是为7 var a=3; var b=3.00000000000000000001; alert(a=b); 输出的结果却是true 4.写程序思考时先思考一般,再思考特殊,写程序是,先排除特殊,然后写一般 if(特殊1) {} else
-
JavaScript入门系列之知识点总结
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. 一.准备工作: 1.为什么学习JavaScript 所有的主流浏览器都只是Javascript 大部分网页都使用Javascript 它可以让网页呈现各种动态效果 易学 2.如何插入JS <script>标签要成对出现,并把
-
JavaScript提高性能知识点汇总
一.针对js文件的加载位置 在HTML文件中,<script>标签是可以加在<head>区域和<body>区域的.这里鉴于JavaScript执行和UI渲染的单线程原因,如果js文件载入会阻塞后面对于页面的解析过程,页面会等到js文件完全加载并运行后才继续执行该做的操作.那么问题就来了,这样可能会出现页面空白or卡顿现象.作为一名前端开发,重要的不仅仅止于实现了需求,应该还有优质的用户体验.那么我们就需要消除用户枯燥的等待,针对这个问题,这里有本兽想到的两种解决方案:
-
JavaScript 总结几个提高性能知识点(推荐)
前段时间花时间看了大半的<High Performance JavaScript>这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了.由于空不出时间,这个月写的学习笔记也不多,忙完最苦X的一周,这两天晚上也算是挑灯夜读了...终于是在残血之际将这本书shut down了... 既然读完了,总归是要学到些什么的.说说对这本书的看法先吧,整体的来说,内容还是不错的,就是感觉有点老了(作为前端小白,也可能是自身水平有限,未能体会到其中真意).看这本书的过程中也是写了挺多代码用以测试的,并且对本
-
JavaScript提高网站性能优化的建议(二)
在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为
-
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 alert(Math.max(5,8)) //8 alert(Math.max(5,7,9,3,1,6)) //9 但是在很多情况下,我们需要找出数组中最大的元素. var arr=[5,7,9,1] alert(Math.max(arr)) // 这样却是不行的.一定要这样写 function getMa
-
关于JavaScript的内存与性能问题解决汇总
目录 一.何为JavaScript内存与性能 二.谈谈关于innerHTML的性能问题? 1.使用innerHTML的反面教材 2.如何解决 三.如何解决类似按钮过多问题? 四.事件委托的优点有哪些? 五.删除事件处理程序 1.删除带有事件处理程序的元素 2.页面卸载也会导致内存中残留引用的问题 六.如何解决循环中动态添加div,造成的死循环问题? 七.JavaScript思维导图 一.何为JavaScript内存与性能 因为事件处理程序在现代web应用中可以实现交互,所以很多开发者都会错误地在
-
React-hooks面试考察知识点汇总小结(推荐)
目录 什么是hooks?解决了什么问题? Hook 简介 Hook API useState 指定初始 state 惰性初始化 自定义 Hook 什么是hooks?解决了什么问题? Hooks 是react16.8新增特性,它可以使用一些state的新特性,简化逻辑复用,副作用统一数据. Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上,那么当被钩到的数据或者事件发生变化时,产生这个目标结果的代码会重新执行,产生更新后的结果. Hook 简介 Hook出世之前React存在的问
-
JavaScript脚本性能的优化方法
From:http://www.nirvanastudio.org/javascript/improve-javascript-performance.html 作者:ShiningRay @ Nirvana Studio 随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript
-
JavaScript提升性能的常用技巧总结【经典】
本文讲述了JavaScript提升性能的常用技巧.分享给大家供大家参考,具体如下: 1.注意作用域 随着作用域链中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.访问全局变量总是要比访问局部变量慢,因为要遍历作用域链. 1). 避免全局查找 将在一个函数中会多次用到的全局对象存储为局部变量总是没错的. 2). 避免 with 语句 with会创建自己的作用域,因此会增加其中执行代码的作用域链的长度. 2.选择正确的方法 性能问题的一部分是和用于解决问题的算法或者方法有关的.
-
JavaScript提高加载和执行效率的方法
前言 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响. 一个典型的例子就是在页面中使用document.write() . JavaScript 代码内嵌示例 <html> <head> <title>Sourc