时间: 2012-02-19 / 分类: WEB前端开发 - 用户体验设计 / 浏览次数: / 0 个评论 发表评论
《高性能Javascript》读书笔记
WEB前端开发中的一些编程风格和书...
项目前端开发的架构
黄金分割与摄影构图
12条经典摄影技巧

高性能Javascript》 Nicholas C.Zakas著 丁琛译

O’REILLY|YAHOO! Press

这是一本薄薄的比较不错的有关WEB前端的Javascript优化的书籍,谈到了一些还不错的小技巧,总结了一下:

  • 优化是必要的!
  • 加载和执行Javascript:
    • script放在页面的位置:<script>标签每次都霸道的让页面等待脚本的解析和执行。无论当前的Javascript代码是内嵌的还是外链文件中的,页面的下载和渲染必须停下来等待脚本执行完成。如果把脚本放到页面body之前将会导致明显的延迟,所以如果不是特别预定义和必须先执行的Javascript,推荐把<script>标签尽可能的放到body标签的底部,以尽量减少对整个页面下载的影响
    • 减少包含的script标签数量,限制HTTP请求数
    • *建议永远不要把内嵌脚本紧跟在link标签后面
    • 延时的脚本defer:带defer属性的script标签可以放在页面的任何位置,页面解析到此位置会下载但是并不会执行,直到DOM加载全部完成(在onload事件被触发前),带defer的脚本并不会阻塞浏览器的其他进程,可以与页面中的其他资源并行下载。(浏览器不同会略有不同)
    • 通过文档对象模型(DOM),可以用Javascript动态的创建HTML中的任何内容。(浏览器不同会略有不同)
    • XMLHttpRequest脚本注入:另一种无阻塞加载脚本的方法是使用XHR对象获取脚本并注入页面中(兼容所有主流浏览器),但是有个缺陷是JS文件和所请求的页面必须处于相同的域,不能跨域,也意味着JS文件不能从CDN下载。因此,大型WEB应用并不会采用XHR脚本注入技术。
    • 扩展的无阻塞模式:loadScript方式,YUI3的设计理念(由页面中的少量代码来加载丰富的功能组件),LazyLoad库,LABjs等
  • 数据访问
    • 确定数据的最佳储存位置以获取最佳的读写效率
    • Javacript有4种基本的数据存取位置:直接量,变量,数组元素,对象成员,前面两种比后面两种速度快,消耗低。访问直接量和局部变量的速度最快,相反,访问数组元素和对象成员相对较慢。
    • 由于局部变量存在于作用域链的起始位置,因此访问局部变量比访问跨作用域变量更快。变量在作用域链中的位置越深,访问所需时间也就越长。由于全局变量总处于作用域链的最末端,因此访问速度也是最慢的。
    • 避免使用with语句,因为它会改变运行期上下文作用域链。同样,try-catch语句中的catch子句也有一定的影响,因此也要小心使用。
    • 嵌套成员:当遇到点操作符时候,嵌套成员会搜索所有对象成员,如执行location.href比window.location.href速度快,后者比window.location.href.toString()要快。
    • 通常来说,可以把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善Javascript性能,因为局部变量可以访问速度更快。
  • DOM编程
    • 访问和操作DOM是现代WEB应用的重要部分,但每次穿越连接ECMAScript和DOM两个岛屿之间的桥梁,都会被收取过桥费,为了减少DOM编程带来的性能损失,记住以下几点:
    • 最小化DOM访问次数,尽可能在Javascript端处理,可以使用局部变量储存更新后的内容,然后在循环结束后一次性写入。
    • 如果需要多次访问某个DOM节点,请使用局部变量存储它的引用。
    • 如果可能的话,使用速度更快的API,比如querySelectorAll()和firstElementChild.
    • 要留意重绘和重排,批量修改样式时,离线操作DOM数,使用缓存,并减少访问布局信息的次数
    • 动画中使用绝对定位,使用拖放代理
    • 使用事件委托来减少事件处理器的数量
  • 算法和流程控制
    • 避免使用for-in循环,除非需要遍历一个属性数量未知的对象
    • 通常来说,switch总是比if-else快,但并不总是最佳解决方案
    • 在判断条件较多时,使用查找表比if-else和switch更快
    • 改善循环性能的最佳方式是减少每次迭代的运算量和减少循环迭代次数
  • 字符串和正则表达式
    • 字符串连接方法推荐使用简单的+和+=操作符,避免不必要的中间字符串
    • 回溯既是正则表达式匹配功能的基本组成部分,也是正则表达式的低效之源
  • 快速响应的用户界面
    • 牢记任何JS任务都不应当执行超过100毫秒,过长的运行时间会导致UI更新出现明显的延迟,从而对用户体验产生负面影响
    • Web workers是新版浏览器支持的特性,允许在UI线程外执行JS代码,从而避免锁定UI
    • Web 应用越复杂,积极主动的管理UI线程就越重要,没有什么Javascript代码会重要到影响用户体验的程度
  • Ajax
    • 减少请求数,可以通过合并JS和CSS文件,或使用MXHR,Multipart XHR允许客户端用一个HTTP请求就可以从服务器向客户端传送多个资源,它通过在服务器端将资源(CSS,HTML片段,JS代码或者base64编码的图片)打包成一个由双方约定字符串分隔的长字符串并发送到客户端,然后用Javasript代码处理这个长字符串,并根据它的mine-type类型和传入的其他头信息解析出每个资源。
    • 缩短页面的加载时间,页面主要内容加载完成后,用Ajax获取那些次要的文件
    • 确保你的代码错误不会输出给用户,并在服务器端处理错误
    • 知道何时使用成熟的Ajax类库,以及何时编写自己的底层Ajax代码
  • 编程实践
    • 避免使用eval()和Function()构造器来避免双重求值带来的性能消耗
    • 尽量使用直接量来创建对象和数组
    • 避免做重复的工作,当需要检测浏览器时候,可以使用延迟加载或条件预加载
    • 在进行数学计算时候,考虑使用直接操作数字的二进制形式的位运算
    • Javascript的原生方法总会比你写的任何代码都要快,所以尽量使用原生方法
  • 构建并部署高性能Javascrit应用
    • 合并Javascript文件以减少HTTP请求数
    • 使用压缩Javascript文件(JSMin, YUI Compressor, Closure Complier, Packer)
    • 在服务器端压缩Javascript文件(Gzip编码)
    • 通过正确设置HTTP响应头来缓存Javascript文件,通过向文件名增加时间戳来避免缓存问题
    • 使用CDN(Content Delivery Network)提供Javascript文件;CDN不仅可以提升性能,也为你管理文件的压缩和缓存
    • 所有步骤都应该自动化处理,可以使用公开的工具,比如Apache Ant,也可以使用定制的工具满足你的特定需求
  • 工具
    • 当网页或者WEB应用变慢时候,分析从网络下载的资源以及分析脚本的运行性能能让你专注于哪些最需要优化的地方
    • 使用网络分析工具可以找出加载脚本和页面中其他资源的瓶颈,这会帮助分析决定哪些脚本需要延迟加载或者需要进一步的分析
    • 尽量减少HTTP请求数,把脚本尽可能的延迟加载可以加快页面的渲染速度,给用户带来更好的体验
    • YUI Profiler是一个用Javascript编写的Javascript性能分析工具
    • Firebug插件和Console API,网络面板
    • IE开发人员工具
    • Safari Web检查器,分析面板,资源面板
    • Chrome开发人员工具,脚本阻塞,Page Speed
    • Fiddler:HTTP调试代理工具。Timeline视图
    • YSlow工具可以深入观察页面初始加载和运行过程中的整体性能
    • dynaTrace Ajax Edition性能诊断工具
      站点地图 | 关于我 | 返回顶部
    Copyright © 2001-2013 { amiku.cn | zhangshunjin.com }. Powered by 

    阿米酷

    张顺金


    浙ICP备11002820号-1