javascript 性能优化

sean 发布于2019-08-19 14:37 / 2561人阅读

摘要：尽量减少和对象和浏览器对象的交互。这能提高的操作的速度，从而提高性能。对的操作批量进行对样式的更改最后通过增加和删除类来进行。因为每次操作和元素的样式更改浏览器都会重新渲染对性能造成影响。语句在编译的时候更容易被优化。会导致内存泄漏。

1. 尽量减少和DOM对象和浏览器对象的交互。 2. 选择元素的时候尽量通过ID选择器去选取元素document.getElement("id"); 3. 避免每次使用browser objects 方法时都遍历原型。可以用一个变量存放这些方法。如下：

var slice = [].slice,
    split = "".split;

4.简化你的html,使你的html更加简洁,删除那些不必要的div,span 等标签。这能提高javascript的dom操作的速度，从而提高性能。如下：yahoo34条中的一条,减少dom元素。

Reduce the Number of DOM Elements. A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.

document.getElementsByTagName("*").length获取页面中dom元素的数量。 5.对dom的操作批量进行,对样式的更改最后通过增加和删除类来进行。因为每次dom操作和元素的样式更改浏览器都会重新渲染,对性能造成影响。

var ul = document.getElementById("id"),
    fragment = document.createDocumentFragment(),
    data = ["text1","text2","text3"],
    li;
for(var i = 0,len = data.length; i < len; i++) {
    li = document.createElment("li");
    li.appendChild(document.createTextNode(data[i]));
    fragment.appendChild(li);
}
ul.appendChild(fragment);

6. 减少对js库的依赖 7. 合并js压缩js 8. 仅仅加载你需要的模块,可以使用依赖管理如Require.js 9. 在IE上使用Array.prototype.join()来代替字符串相加的方法来连接字符串。

  Joining strings using the plus sign (ie var ab = "a" + "b";) creates performance issues in IE when used within an iteration. This is because, like Java and C#, JavaScript uses unmutable strings. Basically, when you concatenate two strings, a third string is constructed for gathering the results with its own object instantiation logic and memory allocation. While other browsers have various compilation tricks around this, IE is particularly bad at it.

10.充分利用引用类型,对于函数传参来说,传引用与传基本类型的值来说,引用的开销更小。 11.缩短作用域链 12.利用好this变量,通过使用call,apply

var Person = Object.create({
  init: function(name) {
     this.name = name;
  },
  do: function(callback) {
     callback.apply(this);
  }
});
var john = new Person("john");
john.do(function() {
    alert(this.name); // "john" gets alerted because we rewired "this".
});

13. 使用switch代替if/else 语句。switch语句在编译的时候更容易被优化。 14. 变量声明带上var 慎用全局变量 15. 慎用闭包,闭包如果形成循环引用的话。会导致内存泄漏。 16. 使用for 代替 for in 遍历数组

GPU云服务器云服务器性能优化优化系统性能网站性能优化页面性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78034.html

图说 WebAssembly（五）：高性能原因

摘要：本文是图说系列文章的第五篇。这样的话，使用的开发者也不需要做任何适配，但是它们却能获得更高性能。该图并不是用来准确的衡量其性能的。运行编写出高性能的代码是可能的。这种清理工作由引擎自动进行，称为垃圾回收。本文是图说 WebAssembly 系列文章的第五篇。如果您还未阅读之前的文章，建议您从第一篇入手。在上一篇文章中，我们说到了使用 WebAssembly 和 JavaScript...

seal_de 2019-08-22 16:59 评论0 收藏0
前端性能优化之--页面渲染优化全面解析

摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。为什么做优化经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题怎么做优化如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...

MadPecker 2019-08-29 15:29 评论0 收藏0
前端性能优化之--页面渲染优化全面解析

摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。为什么做优化经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题怎么做优化如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...

gghyoo 2019-08-22 17:30 评论0 收藏0
前端性能优化之--页面渲染优化全面解析

摘要：下面我们撇开网络方面的优化，只分析静态资源方面的优化。不过，也会阻止的构建和延缓网页渲染。未优化正常加载优化后异步加载根据上面的分析，我们可以清楚的认识到，非必要优先加载的，选择异步加载是最优选择。为什么做优化经典问题：白屏时间过长，用户体验差产生的原因：网络问题、关键渲染路径（CRP）问题怎么做优化如何做好优化呢，网上随便一搜，就有很多优化总结，无非就是网络优化、静态资源（h...

gaomysion 2019-08-02 10:33 评论0 收藏0
个人常用JavaScript及React常用优化总结

摘要：插件性能优化及个人常用优化方法经常会触发视觉变化。作用域链指的是当前作用于下可用变量的集合，它在各种主流浏览器中至少包含两个部分局部变量的集合和全局变量的集合。在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。 JavaScript 插件性能优化及个人react常用优化方法 JavaScript 经常会触发视觉变化。有时是直接通过样式操作，有时是会产生视觉变化...

yuanxin 2019-08-20 15:07 评论0 收藏0