js 优化方面

根据网上查阅关于优化方面的问题,根据自己理解,进行简单整理。仅供大家在优化方面参考

一.在web开发中,通过dom 对浏览器进行操作,来实现js 与html 的交互,而DOM的操作是非常昂贵的,因为这会导致浏览器执行回流 (reflow)操作。但我们不可避免进行dom操作,所以选择尽可能的减少DOM操作来进行优化。

  回流(是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程。)所以通过操作引起元素位置的改变就会引起回流。

导致回流产生的情况:

   用户的操作,比如改变浏览器大小,改变浏览器的字体大小等

  当你移动 DOM 的位置,或做动画的时候。

  对DOM节点进行增删或者更改内容时。

  当你修改 CSS 样式导致元素位置发生改变。注:更改background-color;color; 不会引起回流

  当你修改网页的默认字体时。

  动态设置样式等

解决方法:

  1.dom 不适合table布局,不宜使用。

  2.离线对dom 进行操作,修改完后再上线

    2.1clone 一个 DOM 节点到内存里,,改完后,和在线的那个的交换一下。  一次回流重绘

    2.2 通过display:none ,可以任意修改,之后再显示出来。         引发回流重绘两次

    2.3使用documentFragment或div等元素进行缓存操作,先把所有要添加到元素添加到1个div(这个div也是新加的),

      最后才把这个div append到body中。                 只引发回流重绘一次    

  3.修改css 样式时尽量采用创建类,className里预先定义好样式,如果是动态改变, 应该一次写完(cssText);

  4.因为回流是自上而下的,所以下不及上,我们在最后面修改信息对全局影响越少。

  (回流必将引起重绘,而重绘不一定会引起回流。一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流.)

  

二.字符串的拼接 += 的效率低 ,创建一个数组 最后用 arr.join(‘‘)返回。

三.for循环中 先缓存数组,再放入局部变量中,可以减少计算机查询长度 for(i=0;len = x.length,i<len,i++)

四.局部变量的访问要比全局变量快

五.尽量作用JSON格式来创建对象,而不是var obj=new Object()方法

六.循环很多次时,用setInterval() , 少用setTimeout(),这是因为setTimeout()每次运行都重新创建一个定时器.

七.对于大的JS对象,因为创建时时间和空间的开销都比较大,因此应该尽量考虑采用缓存。

八.优化js 文件 把不影响的js 放入一个文件中,减少请求。

九.压缩js 文件

十.减少页面重绘 ,通过创建数组,来存储,最后把数组添加到页面上去。虽然看起来写的多了,但性能提升许多。

<body>
<div id="demo"></div>
<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />

<script type="text/javascript">
var str = "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>"
//运行完整个代码用时长,效率低
function func1() {
    var obj = document.getElementById("demo");
    for(var i = 0; i < 100; i++) {
        obj.innerHTML += str + i;
    }
}
//效率高的
function func2() {
    var obj = document.getElementById("demo");
    var start = new Date().getTime();
    var arr = [];
    for(var i = 0; i < 100; i++) {
        arr[i] = str + i;
    }
    obj.innerHTML = arr.join("");

}
</script>
</body>    

  

时间: 2024-10-11 05:32:57

js 优化方面的相关文章

前端js优化方案(连续更新)

最近在读<高性能javascript>,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发布一些前端教程还有前端干货,话不多说,进入我们的正题 一.js优化之加载 1.script标签放在底部,不要放在head标签: 2.尽量减少js文件数量 3.给script标签添加一个defer属性,defer属性指明所含的脚本不会修改DOM,因此代码能安全地延迟执行. <script type=&qu

Joomla T3模板启用CSS、JS优化

如何优化生成后的文件 当启用了优化选项,CSS和JS优化文件将在一个页面第一次被加载时自动生成.如果CSS或JS有改动,新生成的优化文件也会自动生成. 生成优化文件路径: XXX/t3-assets/css XXX/t3-assets/js XXX:项目名称

js优化原则

首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率.除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略.例如FF.Opera和Safari的JS引擎,都对字符串的拼接运算(+)做了特别优化.显然,要获得最大效率,就必须要了解引擎的脾气,尽量迎合引擎的口味.所以对于不同的引擎,所作的优化极有可能是背道而驰的. 而如果做跨浏览器的web编程,则最大的问题是在于IE6(JScript 5.6)!因为在不打hotfix的情况下,JScript引擎的垃圾回收的b

r.js优化前端(摘抄)

r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用r.js需下载r.js文件(点我下载),将其放到你的项目根目录:还需要安装nodeJS(点我下载),以便通过命令行来执行r.js功能.我们将拿一个小案例来详细说明使用r.js的方法(你可以点此下载这个案例). 如下图所示的项目(见案例中的before文件夹)仅仅使用了requireJS,但还未使用过

js优化总结

避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些 function search() {    //当我要使用当前页面地址和主机域名    alert(window.location.href + window.location.host); } //最好的方式是如下这样  先用一个简单变量保存起来 function search() {    var location = window.location;    alert

由一段代码谈前端js优化和编码规范

这段代码是撸主刚毕业那会写的,主要是实现一个左侧的导航条的折叠功能.当时实现的比较简陋,每次在导航条增加新的项目的时候,都要手动去修改js代码中写死的索引...确实是比较恼火的,后来就修改了一下,能够自动的查找索引了,但是写的代码很不规范,前几天看到这段代码的时候,简直要吐血...所以就简单优化了一下 1.情景描述: html代码大致就是如下所示: <a><li></li></a> <li></li> <li></l

dom操作中的js优化

频繁地对于DOM进行操作的很是损耗性能,但在富网页应用中我们编写脚本无可避免地要跟DOM打交道,到底怎么才能优化这个性能瓶颈呢,大致从以下三种情况去考虑: 访问和修改DOM元素 修改DOM样式,会造成页面的重绘和重新排版 通过DOM事件处理程序来响应用户 访问和修改DOM元素 在浏览器中,DOM的实现和Javascript的实现通常是保持相互独立的.下面了解一下主流浏览器的渲染引擎和JS引擎: 浏览器 渲染引擎(内核) JS引擎 IE mshtml.dll(Trident) JScript Ch

js优化提升访问速度

一.给JS文件减肥. 有的人为了给网站增加炫目效果,往往会使用一些JS效果代码,这在上个世纪似乎还很流行,对于现在来说,最好在用户体验确实需要的情况下,使用这些东西.至于希望给自己的JS文件减肥的童鞋,网上的工具里有很多,在百度一搜就会有应用,功能很全.把一个已经完善的JS文件进行压缩是主流网站的一个惯性动作,因为压缩量确实很可观.以下是几个比较好的压缩工具: YUI压缩工具 (http://developer.yahoo.com/yui/compressor/)Dean Edwards Pac

JS优化工具 Doloto

Doloto是“Download Time Optimizer”的简写.官方页面上说它对于大型复杂的AJAX应用尤其的有用,因为这些应用包含了大量的 JavaScript 代码.简单的说,它的工作原理就是把页面中最先用到的JavaScript代码剥离出来,将页面初始化时候加载的JavaScript的代码量降到最低,然后其它的代码采用异步的方式加载进来. 1. Doloto 分析你的应用程序,它会创建一个本地代理(local proxy)拦截JS文件并在运行时记录每个函数的运行时间. 2. 第一步