性能优化

第一章:加载和执行

总结:

  1. 将所有<script>标签放到页面底部。这能确保在脚本执行前页面已经渲染了。
  2. 合并脚本。<script>标签越少,加载越快,响应速度也更迅速。
  3. 有多种无阻塞下载js方法:

    1)使用<script>标签的defer属性;  defer属性只有ie4+和Firefox3.5+游览器支持

    2)动态创建<script>元素来下载执行代码;

    3)使用XHR对象下载js代码并注入页面中;

第二章:数据存储

总结:

  1. 访问字面量和局部变量的速度最快,相反,访问数组元素和对象成员相对较慢。
  2. 变量,属性或方法在作用域链中的位置越深,访问所需要时间就越长。全局变量处在作用域链的最末端,因此访问速度也是最慢的。
  3. 避免使用with语句,因为它会改变执行环境作用域链,同样,try-catch也会,因此要小心使用
  4. 嵌套的对象成员尽量少用
  5. 通常来说,你可以通过把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善js性能,因为局部变量访问速度更快。

第三章:获取dom元素优化

总结:

  1. 减少dom访问次数,如果需要多次访问dom节点请定义一个局部变量存储它的引用。
  2. 推荐使用速度更快的API,比如querySelectorAll()。
  3. 留言重绘重排,批量修改样式,动画中使用绝对定位。

innerHTML和createElement():

innerHTML相对createElement在创建节点速度更快,大约是3.6倍。且大多数游览器均innerHTML使用更快,除webkit游览器,createElement相对会快些。

对DOM中特定元素操作时,开发者通常需要得到比getElementById()和getElementsByTagName()更好的控制。有时候为了得到需要的元素列表,你需要组合它们并遍历返回的节点,但这种繁密的过程效率低下。这时候,使用css选择器也是一种定位节点的便利途径,这时候javascript库提供了大量API,最新的游览器提供了一个名为quertSekectorAll()的原生DOM方法。这种方法自然比使用js和DOM来遍历查找元素快,同时对目前游览器的兼容性更高。

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

<div id="menu">
<a>123</a>
<a>456</a>
</div>
<script>
//获取id,遍历该id下的所有a元素 ,打印出个数
var elements=document.getElementById('menu').getElementsByTagName('a');
console.log(elements.length) //2
//使用querySelectorAll(),兼容ie6及以上
var elements2=document.querySelectorAll('#menu > a');
console.log(elements2.length) //2
</script>
同样能查找获取,如果需要大量组合查询,使用下面的效率会更好,速度很提高很多。 重绘与重排
例如:
var bodyColor=document.body.style;   //背景色被修改了2次,游览器需要刷新渲染队列   var bodyColor=document.body.style;
var bgcolor=bodyColor.background;      =========================>    v
bgcolor='red';                        优化            bgcolor='red';
console.log(bgcolor);                                  bgcolor='blue'
bgcolor="blue";                                    console.log(bgcolor);
console.log(bgcolor);                                //这里只需要读取一次 改变样式:
var eldocument.getElementById("mydiv");          var el=document.getElementById("mydiv");
el.style.borderLeft='1px';      =================>  el.style.cssText='border-left:1px; border-right:2px; padding:5px;'
el.style.borderRight='2px';        优化        //合并所有改变,然后一次处理。这样只会修改一次DOM,可以优化
el.style.padding='5px';                   //方法2: 使用className ,调用的是一个写好的css样式
//这段代码执行下来,会触发3次重排!!!              el.className='active'
												

高性能javascript-总结(一)的更多相关文章

  1. 《高性能javascript》一书要点和延伸(上)

    前些天收到了HTML5中国送来的<高性能javascript>一书,便打算将其做为假期消遣,顺便也写篇文章记录下书中一些要点. 个人觉得本书很值得中低级别的前端朋友阅读,会有很多意想不到的 ...

  2. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  3. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  4. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  5. 高性能javascript学习笔记系列(6) -ajax

    参考 高性能javascript javascript高级程序设计 ajax基础  ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...

  6. 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践

    参考高性能javascript 理解浏览器UI线程  用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程  UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...

  7. 高性能JavaScript 编程实践

    前言 最近在翻<高性能JavaScript>这本书(2010年版 丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效.但是有些章节的 ...

  8. 高性能javascript学习笔记系列(4) -算法和流程控制

    参考高性能javascript for in 循环  使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...

  9. 高性能javascript学习笔记系列(3) -DOM编程

    参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...

  10. 高性能javascript学习笔记系列(2)-数据存取

    参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文   当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...

随机推荐

  1. C#关于多线程的笔记

    Thread thNetwork; thNetwork = new Thread(new ThreadStart(GetNetworkInfo));//创建一个线程 thNetwork.Start() ...

  2. Android零基础入门第47节:自动完成文本框AutoCompleteTextView

    原文:Android零基础入门第47节:自动完成文本框AutoCompleteTextView 上一期学习的Spinner的使用,掌握的怎么样?本期一起来学习AutoCompleteTextView的 ...

  3. NBU客户端安装失败

    该服务器是阿里云上的centos6.8,是用来做oracle服务器,买来之后进行测试,发现没有安装图形化界面,还有部分包也没有安装.在oracle安装完成之后,尝试安装NBU的客户端,结果发生报错:T ...

  4. 了解BroadcastRecever

    广播分类: 标准广播(Normal broadcasts):完全异步执行的广播,接收没有先后顺序,效率高,无法被接收器被拦截. 有序广播(Ordered broadcasts) :同步执行的广播,有先 ...

  5. Qt 开发WEB Services客户端代码(使用gSoap)

    1.   首先下载gSoap开发包 http://sourceforge.net/projects/gsoap2  目录包含 wsdl2h.exe( 由wsdl生成接口头文件C/C++格式的头文件 ) ...

  6. Standard C 语言标准函数库速查(彩色的函数列表,十分清楚)

    Standard C 语言标准函数库速查 (Cheat Sheet) wcstombs 函数说明 #include <stdlib.h> size_t mbstowcs(wchar_t * ...

  7. Python连载14-random模块&函数式编程

    ​一.random模块 1.函数:random() (1)用法:获取0~1之间的随即小数 (2)格式:random.random() (3)返回值:随机0~1之间的小数 2.函数:choice() ( ...

  8. 面试官:你了解过Redis对象底层实现吗

    上一章我们讲了Redis的底层数据结构,不了解的人可能会有疑问:这个和平时用的五大对象有啥关系呢?这一章我们就主要解释他们所建立的联系. 看这个文件之前,如果对ziplist.skiplist.int ...

  9. 浅谈Java中的命名规范

    现代软件架构的复杂性需要协同开发完成,如何高效地协同呢? 答案是:制定一整套统一的规范. 无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上是保障公众的人身安全,试想如果没 ...

  10. 上不了名校?可以在 GitHub 上读他们的课程

    今天开始,全国各大区域的高考成绩陆续公布,又到了几家欢喜几家愁的时刻,如果你准备报考计算机相关专业,但是又由于分数不高而苦恼.别担心,在 GitHub 上有着大量的名校教学资源,即使上不了名校,也可以 ...