第一章、加载和执行 Loading & Execution

原因:Javascript 的执行导致页面渲染中止等待。

解决:

  1. 将script放在页面底部,紧靠body 闭合标签之前,保证页面在script执行之前渲染完成。
  2. 将script成组打包,减少script的请求数量。
  3. 非阻塞的方式加载script。(设置defer属性;动态创建script标签;使用xhr下载脚本注入到页面)

第二章、数据访问 Date Access

原因: 在Javascript中,数据存储位置可以对代码整体兴能产生重大影响。有四种数据访问类型:直接量,变量,数组项,对象成员。直接量和变量访问快,数组项和对象访问慢。

解决:

  1. 避免使用with语句改变上下文执行环境,应该适当小心的使用try catch的catch子句,他有同样的效果。
  2. 嵌套对象成员会造成重要性能影响,尽量少用
  3. 一个属性或方法在原型链位置越深,访问速度越慢。
  4. 访问局部变量快。将经常使用的对象成员,数组项和域外变量存入局部变量中。

第三章、DOM编程 DOM Scripting

原因:DOM和 Javascript(ECMAScript)实现保持相互独立。两者就像两座岛屿,ECMAScript每次访问DOM时,都会交上一次‘过桥费’,访问越多,交得越多。

解决:

  1. 最小化DOM的访问,在Javascript端尽量做更多的事情。
  2. 将反复使用的地方使用局部变量存放DOM引用
  3. 小心处理HTML集合(访问慢,总是对底层文档进行查询),将Length缓存到变量中,在迭代中使用这个变量。如果经常操作html集合,可以将集合拷贝到数组中使用
  4. 如果可以的话使用更快的API,如querySelectorAll and firstElementChild。
  5. 注意重绘和重排:批量修改style, 离线操作dom树,缓存并减少对布局信息的访问。
  6. 动画中使用绝对定位(脱离文档流,不影响文档流的dom重绘重排),使用拖放代理。
  7. 使用事件委托技术最小化事件句柄数量。

《高性能Javascript》  Summary(二)

《高性能Javascript》 Summary(一)的更多相关文章

  1. 《高性能Javascript》 Summary(二)

    第四章.算法和流程控制 Algorithms And Flow Control 原因:代码整体结构是执行速度的决定因素之一.代码量少不一定运行速度快,代码量多不一定运行速度慢.性能损失与组织代码和具体 ...

  2. 《高性能Javascript》 Summary(三)

    第八章.编程实践 Programming Practices 经验: 避免使用 eval_r()和Function构造器避免二次评估.此外,给setTimeout()和setInterval()函数传 ...

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

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

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

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

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

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

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

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

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

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

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

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

  9. 高性能JavaScript 编程实践

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

随机推荐

  1. hdu2102 BFS

    这是一道BFS的搜索题目,只是搜索范围变为了三维.定义数组visit[x][y][z]来标记空间位置,x表示楼层,y和z表示相应楼层的平面坐标. #define _CRT_SECURE_NO_DEPR ...

  2. 关于异步请求AJAX的具体解释

    1,异步请求的方法步骤: 1,推断当前用户支持的浏览器类型 XMLHttpRequest:推断是否支持非IE浏览器,相应的创建方法:xmlhttp = new XMLHttpRequest(); wi ...

  3. linux使用tar命令打包压缩时排除某个文件夹或文件

    今天在使用tar命令进行文件夹打包压缩的时候,需要打包压缩masalaPage目录,但是该目录中的2017,2016两个目录中的文件不进行打包压缩 所以通常使用的tar -zcvf masalaPag ...

  4. 2017.2.28 activiti实战--第六章--任务表单(一)动态表单

    学习资料:<Activiti实战> 第六章 任务表单(一)动态表单 内容概览:本章要完成一个OA(协同办公系统)的请假流程的设计,从实用的角度,讲解如何将activiti与业务紧密相连. ...

  5. 【VBS】使用Visual Studio调试VBS程序

    首先要确保机器上安装了Visual Stuido, 然后打开命令行窗口执行如下命令,会弹出是否使用Visual Studio进行调试的确认窗口. 点[是]进行调试. WScript.exe [vbs文 ...

  6. MySQL具体解释(14)----------事务处理

    前言:前一篇文章关于事务处理的博文没有写清楚,读起来非常晦涩.非常难理解,所以有整理了一些资料,帮助理解.见谅! 关于MySQL事务处理学习记 START TRANSACTION COMMIT ROL ...

  7. Android Studio/IntelliJ IDEA使用手记

      使用第三方jar包 1.将jar包放入项目里的libs文件夹中: 2.在project选中该jar包,点击右键选择:"Add as library": 1. 代码中中文显示乱码 ...

  8. Hibernate “N+1”查询问题

    Hibernate 默认情况下使用立即检索策略,即从数据库加载A对象时  会同时加载跟它关联的B,这样产生了不必要的对象集合查询,而且本来可以合并的sql要执行1+N次,因为一条select出所有的A ...

  9. cmake学习之-project

    一.系统版本 cmake version: 3.5.2 系统版本: Ubuntun 16.04 cmake docment: 3.14.4 最后更新: 2019-05-31 二.指令说明 projec ...

  10. 兔子--改动Android Studio的快捷键,改动成eclipse的快捷键

    仅仅须要2步 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzQyNTUyNw==/font/5a6L5L2T/fontsize/400/fill ...