`
yangguoklose
  • 浏览: 19848 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

web前端性能优化-高性能javascript学习

    博客分类:
  • JS
阅读更多
最近读过《高性能javascript》,记录如下:



PS: 没有什么JS代码会重要到可以影响用户体验的程度



1. 由于浏览器在执行js代码时,会阻塞其他资源的下载



2. 无阻塞的脚本

  * 延迟的脚本(defer)

    + 并不是理想的跨浏览器解决方案

  * 动态脚本元素

    + 通过动态创建script元素来获取脚本

  * XHR脚本注入

    + 通过ajax请求获取js,然后动态创建script元素,并将responseText附加到script中

    + 不能跨域



PS:推荐学习开源组件LABjs(开源无阻塞脚本加载工具,可以管理不同脚本的依赖关系)



3. 数据访问相关问题

  * 改变作用域链

    ** with和try+catch语句

    ** 使用with语句时,运行期山下文的作用域链临时被改变了。这时一个新的可变对象被创建,它包含了参数指定的对象的所有属性。这个对象被推入所用域链的头部,这意味着函数的所有局部变量现在处于第二个所用域链对象中。因此访问代价变得更高。

    ** try catch语句具有同样的问题,不过它是非常有用的语句,不建议完全避免。



  * 缓存对象成员

  * 访问直接量和局部变量的速度最快,相反,访问数组元素和对象成员相对较慢

  * 嵌套的对象成员会明显影响性能,尽量少用

  * 属性或者方法在原型链中的位置越深,访问它的速度越慢



4. dom编程

  * HTML集合一直与文档保持着连接,每次需要最新信息时,都会重复执行查询的过程,哪怕是获取集合里的元素个数

  * 遍历dom树中节点时,推荐使用nextSibling(IE6、7十分推荐)

  * 最小化dom访问次数

  * 小心处理HTML文档集合,因为它实时连系着底层文档

  * 如果可以的话,使用更快的API(比如:querySelectorAll, firstElementChild)

  * 留意重绘和重排;批量修改样式时,“离线”操作dom树,使用缓存,并减少访问布局信息的次数

  PS: 有关重绘和重排请参考:

  * 使用事件委托来减少时间处理器的数量(主要利用冒泡原理)

 

5. 算法和流程控制

  * for in 循环的每次迭代都会产生更多开销(建议不要使用for in遍历数组成员)

  * js引擎支持的递归数量与js调用堆栈大小直接相关,只有ie例外,它的调用栈于系统空闲内存有关

  * 使用Memoization方法避免重复工作(缓存计算数据)



6. 正则表达式(待继续学习)



7. 快速响应的用户界面

  * 浏览器限制了js任务的运行时间

  * 单个js操作花费的总时间不应该超过100ms(超过100ms意味着用户会感到自己与界面失去联系)

  * 使用定时器让出时间片段,定时器建议时间最小25ms(windows系统中定时器分辨率为15ms)(详细信息请参考:http://hi.baidu.com/chyong168/blog/item/330b6f07392d8c60020881bc.html)

  * 尝试HTML5中的Web Workers API

    ** 可以使得代码运行且不占用浏览器UI线程的东西

    ** 每个新的worker都在自己的线程中运行代码



8. Ajax

  * 数据格式

    ** xml

    ** json

    ** json-p

    ** html

    ** 自定义格式



  * Ajax性能指南

    ** 缓存数据

      *** 设置http头

      *** 本地存储

    

9. 编程实践

  * 避免双重求值

    ** eval、Function

    ** setTimeout和setInterval建议传入函数而不是字符串来作为第一个参数

    ** 不要重复工作(不要做已经完成的工作)

      *** 示例:addHandler

function addHandler(target, eventType, handler) {

  if(target.addEventListener) {

    target.addEventListener(eventType, handler, false);

  }

  else {

    target.attachEvent("on" + eventType, handler);

  }

}




上述代码对做了不同浏览器的兼容,看似充分优化,隐藏的性能问题在于每次函数调用时都做了重复工作。每次检查过程都相同:看看置顶方法是否存在,用户不可能在页面加载完成后奇迹般得改变浏览器,那么这次检查就是重复的。



      *** 解决方案:

+ 延迟加载

function addHandler(target, eventType, handler) {

  //重写现有函数

  if(target.addEventListener) {

    addHandler = function(target, eventType, handler) {

      target.addEventListener(eventType, handler, false);

    }

  }

  else {    

    addHandler = function(target, eventType, handler) {

      target.attachEvent("on" + eventType, handler);

    }

  }

  //调用新函数

  addHandler(target, eventType, handler) 

}




+ 条件预加载

   ++ 在脚本加载期间提前检测,而不会等到函数被调用
分享到:
评论

相关推荐

    前端学习书籍汇总(JavaScript语言精粹;大巧不工Web前端设计修炼之道;高性能JavaScript用AngularJS开发下一代Web应用)

    汇总前端知识分享,各类书籍打包奉上,满足当前环境下前端知识技能学习,该系列包括用AngularJS开发下一代Web...高性能JavaScript;网站重构—应用Web标准进行设计[中文版];悟透JavaScript;用AngularJS开发下一代Web应用

    高性能JavaScript 编程pdf电子书(中英文对译)

    《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...

    高性能JavaScript

    资源名称:高性能JavaScript内容简介:如果你使用 Javascript 构建交互丰富的 Web 应用,那么 Javascript 代码可能是造成你的Web应用速度变慢的主要原因。《高性能Javascript》揭示的技术和策略能...

    高性能JavaScript 高清完整.pdf版下载

    《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...

    Web前端开发最佳实践

    本书立足于Web前端开发的基础,介绍如何编写符合W3C规范、可维护性好且高性能的Web前端代码。 本书的主要内容和特色:  以W3C Web规范为基础展开讨论,介绍Web前端开发中的最佳实践方法及编码风格。为Web前端开发...

    高性能Javascript编程--英文版

    《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...

    High.Performance.Responsive.Design-响应式Web设计性能优化 中文高清完整版pdf 带详细书签

    文件已上传到百度网盘,附件中是下载地址。... High.Performance.Responsive.Design-响应式Web设计性能优化 [美]tom barker(著) | 余绍亮 丁一 叶磊(译) | 人民邮电出版社 | 9787115399748 | 2015-09-01

    高性能JavaScript编程中英对照版

    高性能JavaScript编程中英对照版,带有标签和备注笔记,欢迎加入web前端交流群(75701468)共享免费下载。

    Web前端开发规范文档(css/javascript)

    为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请...

    知乎大神萧井陌web前端课程

    第7章 数据类型、多行字符串和转义符号、高阶函数、匿名函数 第8章 事件委托、时间操作、标签的可编辑属性、(本地存储) 和 JSON 格式 第9章 作业选讲、抽象化, 如何封装功能, 如何组织代码结构、变量命名的方法 第10...

    高性能javascript设计

    设计高性能的javascript 代码,优化Web的前端,保证代码高效运行

    高性能JavaScript(High Performance JavaScript )

    《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM 交互、页面生存周期等。雅虎的前端工程师 Nicholas C. Zakas 和其他五位 ...

    初,中,高级工程师web前端面试题

    适用于各级别工程师的面试题,包含基础js,html,css,vue+react 以及高级浏览器原理,工程化,手写代码和性能优化问题,适用于各级别工程师的面试题,包含基础js,html,css,vue+react ...手写代码和性能优化问题,

    高性能JavaScript编程(中英文)

    《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...

    高性能JavaScript编程

    《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位...

    高效前端:Web高效编程与优化实践_机械工业出版社; 第1版 (2018年1月1日) 完整版-未加密

    全书以问题为导向,精选了前端开发中的34个疑难问题,从分析问题的原因入手,逐步给出解决方案,并分析各种方案的优劣,最后针对每个问题总结出高效编程的最佳实践和各种性能优化的方法。全书共7章,内容从逻辑上...

    Web性能优化系列 10个提升JavaScript性能的技巧

    他是《高性能 Javascript》的作者,这本书值得每个程序员去阅读。 当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为《Speed Up Your Javascript》的演讲。 但 Javascript ...

    高性能网站建设指南:前端工程师技能精髓

    绪言A前端性能的重要性 绪言BHTTP概述 第1章规则1——减少HTTP请求 第2章规则2——实用内容发布网络 第3章规则3——添加Expires头 第4章规则4——压缩组件 第5章规则5——将样式表放在顶部 第6章规则6——将脚本放在...

Global site tag (gtag.js) - Google Analytics