Javascript 性能优化

最新推荐文章于 2021-07-12 23:21:29 发布
最新推荐文章于 2021-07-12 23:21:29 发布
阅读量198 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/visitor009/article/details/107395412
版权

加载

放到body底部, 这样不会阻塞页面渲染

<body>
<script></script>
</body>

数据读取

  1. 访问局部变量 比 全局要快
 //bad
let data = {};
(function(){
  alert(data);
}())

// goods
let data = {};
(function(){
  let l_data = data;
  alert( l_data);
}())
  1. 频繁访问对象属性，请保存到变量中
// bad
if (doucment.querySdocument.querySelector('#root').offsetHeight > '100') {
  doucment.querySdocument.querySelector('#root').style.height = '200px';
}

// good
let root = doucment.querySdocument.querySelector('#root');
if (root .offsetHeight > '100') {
  root .style.height = '200px';
}

DOM操作

  1. 最小化DOM的操作次数
// bad
let root = doucment.querySdocument.querySelector('#root');
root.style.height = '100px';
root.style.width= '100px';
root.style.paddingTop= '100px';

// good 
let root = doucment.querySdocument.querySelector('#root');
root.style.cssText = 'width:100px;height:100px;padding-top:100px';

// bad
let root = doucment.querySdocument.querySelector('#root');
for (let i=0;i<10;i++) {
  root.innerHTML += i;
}
// good 
let root = doucment.querySdocument.querySelector('#root');
let container= doucment.querySdocument.createElement('div');
for (let i=0;i<10;i++) {
  container.innerHTML += i;
}
root.appendChild(container);
  1. 使用事件委托
// bad
let lis = document.querySelector('li');
for (let i=0,len=i.length; i<len; i++) {
  lis[i].addEventListener('click',function(){ /* ... */ },false);
}
// good
let wrap = document.querySelector('ul');
ul.addEventListener('click',function(e){
  let elem = e.target;
  switch (elem.id) {
    case 'nav':
      // ...
      break;
  }  
 },false);

for 循环优化

1.保存length属性

// bad 
for (let i=0; i<array.length; i++) {}

// good 
for (let i=0,len=array.length; i<len; i++) {}

2.与顺序无关的

for (let i=array.length; i-- ;) { }

垃圾回收

  1. 没用的对象
// 进行回收
obj = null;
  1. 没用事件处理程序
// DOM0级
elem.onclick = null;

// DOM2级
elem.removeEventListener('click',toggle,false);

字面量代替构造函数

// bad
let obj = new Object();
let arr = new Array();

// good
let obj = {};
let arr = [];

参考资料

《高性能JavaScript》

visitor009
关注
专栏目录
JavaScript性能优化的小知识总结共23页.pdf
11-21
以下是一些关于JavaScript性能优化的关键知识点： 1. **延迟加载（Lazy Loading）**：为了提高页面加载速度，可以使用延迟加载策略，如图片懒加载，只在用户滚动到可视区域时才加载资源。 2. **代码分割（Code ...
JavaScript 性能优化小结
10-23
在JavaScript性能优化的范畴中，字符串的拼接是一个常见的操作，也是性能优化的典型案例。通常情况下，开发者会使用类似Java中的StringBuilder或StringBuffer的方式来提升字符串拼接的性能。在JavaScript中，可以...
JavaScript性能优化
weixin_30951389的博客
12-27 175
如今主流浏览器都在比拼JavaScript引擎的执行速度，但最终都会达到一个理论极限，即无限接近编译后程序执行速度。 这种情况下决定程序速度的另一个重要因素就是代码本身。 在这里我们会分门别类的介绍JavaScript性能优化的技巧，并提供相应的测试用例，供大家在自己使用的浏览器上验证， 同时会对特定的JavaScript背景知识做一定的介绍。 目录 变量查找优化 变量声明带上...
JavaScript 性能优化
wwb0517的博客
07-12 157
性能优化是不可避免的 哪些内容可以看做是性能优化 无处不在的前端性能优化 JavaScript 语言的优化：内存管理、垃圾回收与常见的GC算法、v8引擎的垃圾回收、performance工具、代码优化事例 1、JavaScript 内存管理 内存：由可读写单元组成，表示一片可操作空间 管理：人为的去操作一片空间的申请、使用和释放 内存管理：开发者主动申请空间、使用空间、释放空间 管理流程：申请—使用—释放 JavaScript 中的内存管理：申请内存空间、使用内存空间、释放内存空间 2、
JavaScript 性能优化的小知识总结.pdf
08-12
JavaScript 性能优化的小知识总结
javaScript的性能优化
weixin_33774883的博客
12-15 61
随着网络的发展，网速和机器速度的提高，越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验，希望能帮助大家改进自己的JavaScript脚本性能。语言层次方面 循环 循环是...
javascript性能优化
woyebuzhidao321的博客
11-06 872
GC算法是什么 GC是一种机制，垃圾回收器完成的具体的工作 工作的内容就是查找垃圾释放空间、回收空间 算法就是工作时查找和回收所遵循的规则 常见的GC算法 引用计数 标记清除 标记整理 分代回收 引用计数算法实现原理 核心思想：设置引用数，判断当前引用数是否为0 引用计数器 引用关系改变时修改引用数字 引用数字为0时立即回收 引用计数算法优点 发现垃圾时立即回收 最大限度减少程序的暂停 引用计数算法的缺点 无法回收循环引用对象 时间开销大 funcion fn() { const
JavaScript之性能优化
张鹏~IT~少年人的博客
12-23 1982
一、脚本应该放在页面元素代码之后 页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或JavaScript的命名空间，它们会对后面页面内容造成影响。 二、避免全局查找 function search() { //当我要使用当前页面地址和主机域名 ale...
Javascript性能优化
weixin_42429288的1博客
03-29 163
内存管理（memory management) 概念 内存： 有可读写单元组成，表示一片可操作的空间 管理：人为操作去申请、使用和释放空间 内存管理：就是开发者申请、使用和释放内存空间 管理流程：申请-使用-释放 Javascript中的内存管理： 1. 申请空间； 2. 使用空间； 3. 释放空间 //申请 let obj = {}; //使用 obj.name = "test"; //释放 obj = null; Javascript中的垃圾回收 javascript中的内存管理是自动
JavaScript 最佳实践之性能篇
读万卷书，行万里路
08-31 765
最初的 JavaScript 是一种解释型的语言，所以在执行速度上比编译型语言慢得多。后面有了 Chrome，它内置了优化引擎，把 JavaScript 编译为本地代码再执行，很多浏览器纷纷效仿，所以现在的 JavaScript 已经是编译型的语言咯O(∩_∩)O~1 注意作用域1.1 for 循环中的全局变量使用全局变量或函数的查找开销比局部变量或函数大得多，因为这会涉及到作用域链上的查找：//避
JavaScript性能优化技巧解析
"JavaScript性能优化是提高用户体验的关键，主要涉及管理作用域、操作数据、流控制、Reflow、DOM操作以及处理长时间运行的脚本。优化的目标是减少响应时间，确保在0.1s内给用户流畅的感觉，避免超过1s导致的不流畅...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值