JavaScript의 성능 문제는 과소평가할 수 없습니다. 따라서 개발자는 JavaScript 프로그램을 작성할 때 몇 가지 세부 사항에 더 많은 주의를 기울여야 합니다. 이 기사에서는 JavaScript 성능 최적화에 대한 지식 포인트를 매우 자세하게 소개하며 이는 확실히 유용한 정보입니다.
서문
저는 javascript를 배웠고 "Sharp Development of Jquery Kernel 세부 설명 및 실습"도 읽었습니다. 아마도 자바스크립트 때문에 제대로 이해하지 못하거나 너무 멍청해서일지도 모르겠습니다. 더 중요한 것은 제가 생각을 잘 못하고 게으르기 때문에 본질에 대한 깊은 이해가 없다는 것입니다. 그것의.
나 자신을 발전시키고 싶지만 더 넓은 세상에 들어갈 수 없기 때문에 잘 살 수 있는 나만의 공간을 찾아야 하기 때문에 주로 jQuery를 의도적으로 또는 무의식적으로 사용하는 것에 대한 상식을 축적합니다. 성능 요구 사항이 발생하면 이를 달성할 수 있는 더 좋은 방법이 있는지 항상 궁금합니다.
다음은 참고용으로만 요약한 몇 가지 팁입니다. (먼저 일반적인 제목을 붙인 다음 짧은 문단을 사용하여 의미를 설명하고 마지막으로 데모를 사용하여 간략하게 설명하겠습니다.)
글로벌 검색은 피하세요
글로벌은 함수에서 사용됩니다. 전역 조회를 줄이기 위해 객체는 지역 변수로 저장됩니다. 왜냐하면 지역 변수에 액세스하는 것이 전역 변수에 액세스하는 것보다 빠르기 때문입니다
function search() {
//当我要使用当前页面地址和主机域名
alert(window.location.href + window.location.host);
}
//最好的方式是如下这样 先用一个简单变量保存起来
function search() {
var location = window.location;
alert(location.href + location.host);
}로그인 후 복사
타이머
지속적으로 실행되는 타겟팅 코드에서는 setTimeout을 사용하지 말고 setInterval을 사용해야 합니다. 왜냐하면 setTimeout은 매번 타이머를 초기화하고 setInterval은 처음에만 타이머를 초기화하기 때문입니다
<🎜. >
var timeoutTimes = 0;
function timeout() {
timeoutTimes++;
if (timeoutTimes < 10) {
setTimeout(timeout, 10);
}
}
timeout();
//可以替换为：
var intervalTimes = 0;
function interval() {
intervalTimes++;
if (intervalTimes >= 10) {
clearInterval(interv);
}
}
var interv = setInterval(interval, 10);로그인 후 복사
문자열 연결
여러 문자열을 연결하려면
s+=a;<와 같이 더 적은 +=를 사용해야 합니다.
s+=b;
s+=c;
는 s+=a + b + c
로 작성해야 하며, 컬렉션 문자열인 경우, 예를 들어, 동일한 문자열에 대해 += 연산을 여러 번 수행하는 경우 캐시를 사용하고 JavaScript 배열을 사용하여 수집한 다음 마지막으로
조인 메서드를 사용하여 연결<🎜하는 것이 가장 좋습니다. >
var buf = [];
for (var i = 0; i < 100; i++) {
buf.push(i.toString());
}
var all = buf.join("");로그인 후 복사
with 문 피하기
함수와 유사하게 with 문은 자체 범위를 생성하므로 그 안에서 실행되는 코드의 범위 체인 길이를 늘립니다. 추가 효과로 인해 도메인 체인 검색의 경우 with 문에서 실행되는 코드는 외부에서 실행되는 코드보다 확실히 느립니다.
을 사용할 수 없는 경우에는 with 문
을 사용하지 마세요.
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}
//可以替换为：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;로그인 후 복사
숫자를 문자열로 변환
숫자를 문자열로 변환하려면 일반적으로 "" + 1을 사용하는 것이 가장 좋지만 상대적으로 A처럼 보입니다. 약간 보기 흉하지만 실제로는 이것이 성능 측면에서 가장 효율적입니다.
(“” +) > String() > .toString() > >
부동 소수점 숫자를 정수로 변환
많은 사람들이 parsInt()를 사용하는 것을 좋아합니다. 실제로,parseInt()는 부동 소수점 숫자와 정수 사이가 아닌 문자열을 숫자로 변환하는 데 사용됩니다. 변환을 위해서는 Math.floor() 또는 Math.round()
다양한 유형 변환
var myVar = "3.14159",
str = "" + myVar, // to string
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로그인 후 복사
If toString( ) 메소드를 사용해야 합니다. 유형 변환을 수행하려면 toString()
을 명시적으로 호출하는 것이 좋습니다. 모든 가능성을 시도한 후 내부 작업에서 객체의 toString() 메서드를 시도하여 문자열로 변환할 수 있는지 확인하기 때문입니다. 따라서 이 메소드를 직접 호출하는 것이 더 효율적입니다
다중 유형 선언
JavaScript에서는 단일 var 문을 사용하여 모든 변수를 선언할 수 있으므로 해당 문을 결합하여 전체 스크립트를 줄일 수 있습니다. 실행 시간은 위의 코드와 같고, 위의 코드 형식도 상당히 표준화되어 있어 한눈에 이해하기 쉽습니다.
반복자 삽입
예를 들어, 처음 두 문은 var name=values[i++]
직접 사용 수량
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" };로그인 후 복사
DocumentFragment를 사용하여 여러 추가 최적화
DOM을 업데이트해야 하면 문서 조각을 사용하여 DOM 구조를 구축하는 것을 고려하세요. 기존 문서에 추가합니다.
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
document.body.appendChild(el);
}
//可以替换为：
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);로그인 후 복사
dom 요소를 구축하는 대신 innerHTML 할당을 한 번 사용하세요.
대규모 DOM 변경의 경우 innerHTML을 사용하는 것은 표준 DOM 메서드를 사용하는 것과 같습니다. DOM 구조를 만드는 것이 훨씬 빠릅니다.
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 html = [];
for (var i = 0; i < 1000; i++) {
html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');로그인 후 복사
createElement 대신 템플릿 요소 복제
많은 사람들이 페이지 콘텐츠를 생성하기 위해 JavaScript에서 document.write를 사용하는 것을 좋아합니다. 실제로 이는 덜 효율적입니다. HTML을 직접 삽입해야 하는 경우 p 또는 범위 지정과 같은 컨테이너 요소를 찾아 innerHTML을 설정하여 페이지에 자신만의 HTML 코드를 삽입할 수 있습니다. 일반적으로 문자열을 사용하여 HTML을 직접 작성하여 노드를 생성할 수 있습니다. 실제로 이렇게 하면 1. 코드의 유효성을 보장할 수 없으며 2. 문자열 작업 효율성이 낮으므로 document.createElement() 메서드를 사용해야 합니다. 템플릿 노드의 경우 createElement() 메서드를 사용한 후 해당 요소의 속성을 여러 번 설정해야 하므로 cloneNode() 메서드를 사용해야 합니다. 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);로그인 후 복사
firstChild 및 DOM 요소를 순회하기 위한 childNodes 대신 nextSibling
var nodes = element.childNodes;
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
//……
}
//可以替换为：
var node = element.firstChild;
while (node) {
//……
node = node.nextSibling;로그인 후 복사
删除DOM节点
删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存。另外，在removeChild和innerHTML=’’二者之间,尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点
使用事件代理
任何可以冒泡的事件都不仅仅可以在事件目标上进行处理，目标的任何祖先节点上也能处理，使用这个知识就可以将事件处理程序附加到更高的地方负责多个目标的事件处理，同样，对于内容动态增加并且子节点都需要相同的事件处理函数的情况，可以把事件注册提到父节点上，这样就不需要为每个子节点注册事件监听了。另外，现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听
重复使用的调用结果，事先保存到局部变量
//避免多次取值的调用开销
var h1 = element1.clientHeight + num1;
var h2 = element1.clientHeight + num2;
//可以替换为：
var eleHeight = element1.clientHeight;
var h1 = eleHeight + num1;
var h2 = eleHeight + num2;로그인 후 복사
注意NodeList
最小化访问NodeList的次数可以极大的改进脚本的性能
var images = document.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) {
}로그인 후 복사
编写JavaScript的时候一定要知道何时返回NodeList对象，这样可以最小化对它们的访问
要了解了当使用NodeList对象时，合理使用会极大的提升代码执行速度
优化循环
可以使用下面几种方式来优化循环
大多数循环使用一个从0开始、增加到某个特定值的迭代器，在很多情况下，从最大值开始，在循环中不断减值的迭代器更加高效
由于每次循环过程都会计算终止条件，所以必须保证它尽可能快，也就是说避免属性查找或者其它的操作，最好是将循环控制量保存到局部变量中，也就是说对数组或列表对象的遍历时，提前将length保存到局部变量中，避免在循环的每一步重复取值。
var list = document.getElementsByTagName('p');
for (var i = 0; i < list.length; i++) {
//……
}
//替换为：
var list = document.getElementsByTagName('p');
for (var i = 0, l = list.length; i < l; i++) {
//……
}로그인 후 복사
循环体是执行最多的，所以要确保其被最大限度的优化
在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以，就应该尽量少用。for(;;)和while循环，while循环的效率要优于for(;;)，可能是因为for(;;)结构的问题，需要经常跳转回去。
var arr = [1, 2, 3, 4, 5, 6, 7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
sum += arr[i];
}
//可以考虑替换为：
var arr = [1, 2, 3, 4, 5, 6, 7];
var sum = 0, l = arr.length;
while (l--) {
sum += arr[l];
}로그인 후 복사
最常用的for循环和while循环都是前测试循环，而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。
展开循环
当循环次数是确定的，消除循环并使用多次函数调用往往会更快。
避免双重解释
如果要提高代码性能，尽可能避免出现需要按照JavaScript解释的字符串，也就是
使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间，而且使用Eval带来的安全性问题也是不容忽视的。
不要给setTimeout或者setInterval传递字符串参数
var num = 0;
setTimeout('num++', 10);
//可以替换为：
var num = 0;
function addNum() {
num++;
}
setTimeout(addNum, 10);로그인 후 복사
缩短否定检测
if (oTest != '#ff0000') {
//do something
}
if (oTest != null) {
//do something
}
if (oTest != false) {
//do something
}
//虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
if (!oTest) {
//do something
}로그인 후 복사
条件分支
if (a > b) {
num = a;
} else {
num = b;
}
//可以替换为：
num = a > b ? a : b;로그인 후 복사
使用常量
重复值:任何在多处用到的值都应该抽取为一个常量
用户界面字符串:任何用于显示给用户的字符串，都应该抽取出来以方便国际化
URLs:在Web应用中，资源位置很容易变更，所以推荐用一个公共地方存放所有的URL
任意可能会更改的值:每当你用到字面量值的时候，你都要问一下自己这个值在未来是不是会变化，如果答案是“是”，那么这个值就应该被提取出来作为一个常量。
避免与null进行比较
由于JavaScript是弱类型的，所以它不会做任何的自动类型检查，所以如果看到与null进行比较的代码，尝试使用以下技术替换
如果值应为一个引用类型，使用instanceof操作符检查其构造函数
如果值应为一个基本类型，作用typeof检查其类型
如果是希望对象包含某个特定的方法名，则使用typeof操作符确保指定名字的方法存在于对象上
避免全局量
全局变量应该全部字母大写，各单词之间用_下划线来连接。尽可能避免全局变量和函数, 尽量减少全局变量的使用，因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话，后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉（overwrite）你的。
//糟糕的全局变量和全局函数
var current = null;
function init(){
//...
}
function change() {
//...
}
function verify() {
//...
}
//解决办法有很多，Christian Heilmann建议的方法是：
//如果变量和函数不需要在“外面”引用，那么就可以使用一个没有名字的方法将他们全都包起来。
(function(){
var current = null;
function init() {
//...
}
function change() {
//...
}
function verify() {
//...
}
})();
//如果变量和函数需要在“外面”引用，需要把你的变量和函数放在一个“命名空间”中
//我们这里用一个function做命名空间而不是一个var，因为在前者中声明function更简单，而且能保护隐私数据
myNameSpace = function() {
var current = null;
function init() {
//...
}
function change() {
//...
}
function verify() {
//...
}
//所有需要在命名空间外调用的函数和属性都要写在return里面
return {
init: init,
//甚至你可以为函数和属性命名一个别名
set: change
};
};로그인 후 복사
尊重对象的所有权
因为JavaScript可以在任何时候修改任意对象，这样就可以以不可预计的方式覆写默认的行为，所以如果你不负责维护某个对象，它的对象或者它的方法，那么你就不要对它进行修改，具体一点就是说：
不要为实例或原型添加属性
不要为实例或者原型添加方法
不要重定义已经存在的方法
不要重复定义其它团队成员已经实现的方法，永远不要修改不是由你所有的对象，你可以通过以下方式为对象创建新的功能:
创建包含所需功能的新对象，并用它与相关对象进行交互
创建自定义类型，继承需要进行修改的类型，然后可以为自定义类型添加额外功能
循环引用
如果循环引用中包含DOM对象或者ActiveX对象，那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前，即使是刷新页面，这部分内存不会被浏览器释放。
简单的循环引用：
var el = document.getElementById('MyElement');
var func = function () {
//…
}
el.func = func;
func.element = el;로그인 후 복사
但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
}
init();로그인 후 복사
init在执行的时候，当前上下文我们叫做context。这个时候，context引用了el，el引用了function，function引用了context。这时候形成了一个循环引用。
下面2种方法可以解决循环引用：
1) 置空dom对象
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
}
init();
//可以替换为：
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
el = null;
}
init();로그인 후 복사
将el置空，context中不包含对dom对象的引用，从而打断循环应用。
如果我们需要将dom对象返回，可以用如下方法：
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
return el;
}
init();
//可以替换为：
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
try {
return el;
} finally {
el = null;
}
}
init();로그인 후 복사
2) 构造新的context
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {
//……
}
}
init();
//可以替换为：
function elClickHandler() {
//……
}
function init() {
var el = document.getElementById('MyElement');
el.onclick = elClickHandler;
}
init();로그인 후 복사
把function抽到新的context中，这样，function的context就不包含对el的引用，从而打断循环引用。
通过javascript创建的dom对象，必须append到页面中
IE下，脚本创建的dom对象，如果没有append到页面中，刷新页面，这部分内存是不会回收的！
function create() {
var gc = document.getElementById('GC');
for (var i = 0; i < 5000; i++) {
var el = document.createElement('p');
el.innerHTML = "test";
//下面这句可以注释掉，看看浏览器在任务管理器中，点击按钮然后刷新后的内存变化
gc.appendChild(el);
}
}로그인 후 복사
释放dom元素占用的内存
将dom元素的innerHTML设置为空字符串，可以释放其子元素占用的内存。
在rich应用中，用户也许会在一个页面上停留很长时间，可以使用该方法释放积累得越来越多的dom元素使用的内存。
释放javascript对象
在rich应用中，随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。
对象：obj = null
对象属性：delete obj.myproperty
数组item：使用数组的splice方法释放数组中不用的item
避免string的隐式装箱
对string的方法调用，比如’xxx’.length，浏览器会进行一个隐式的装箱操作，将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时，采用如下写法：
var myString = new String(‘Hello World’);
松散耦合
1、解耦HTML/JavaScript
JavaScript和HTML的紧密耦合：直接写在HTML中的JavaScript、使用包含内联代码的
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
