• 高性能javascript 学习笔记(1)


      加载和运行

      管理浏览器中的javascript代码是个棘手的问题,因为代码运行阻塞了其他浏览器处理过程,诸如用户绘制,每次遇到<script>标签,页面必须停下来等待代码下载(如果是外部的)并执行,然后再继续处理页面其他部分。但是,有几种方法可以减少javascript对性能的影响:

      将所有<script>标签放置在页面的底部,紧靠body关闭标签</body>的上方,此法可以保证在脚本运行之前完成解析。

      将脚本成组打包。页面的<script>标签越少,页面的加载速度就越快,响应也更加迅速,不论外部脚本文件还是内联代码都是如此。

      还有几种方法可以使用非阻塞方式下载javascript:

      --为<script>标签添加defer属性(只适用于IE 和 Firefox3.5 以上版本)

      --动态创建<script>元素,用它下载并执行代码

      --用XHR对象下载代码,并注入到页面中

      通过使用上述策略,你可以极大提高那些大量使用javascript代码的页面应用的实际性能。

    个人想到的优化的地方:

      1、虽然执行代码是单线程的,但是下载文件是可以并行的,有个东西叫做浏览器最大并发数(针对同一个域名),大致如下

        

      所以我们可以用CDN技术加载些公共的类库。

      2、合并压缩javascript代码,使得代码尽量占用空间小,网络下载就快很多。现在这样的集成工具很多,fis,grunt、gulp这样的自动化构建工具都能做这件事情。

      3、使用缓存技术,对javascript代码加入版本戳、时间戳什么的。

      数据访问

      在javascript中,数据存储位置可以对代码整体性能产生重要的影响。有四种数据访问类型:直接量,变量,数组项,对象成员。它们有不同的性能考虑。

      直接量和局部变量访问速度非常快,数组项和对象成员需要更长的时间。

      局部变量比域外变量快,因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深,访问所需的时间就越长。全局变量总是最慢的,因为它们总是位于作用域链的最后一环。

      避免使用with表达式,因为它改变了运行期上下文的作用域链。而且应当小心对待try-catch表达式的catch子句,因为它具有相同效果。

      嵌套对象成员会造成重大性能影响,尽量少用。

      一个属性或方法在原型链中的位置越深,访问它的速度就越慢。

      一般来说,你可以通过这种方法提高javascript代码的性能:将经常使用的对象成员,数组项,和域外变量存入局部变量中。然后,访问局部变量的速度会快于那些原始变量。

      通过使用这些策略,你可以极大地提高那些需要大量javascript代码的网页应用的实际性能。

    个人理解:不管是在原型链还是在作用域链查找标识符,都是需要消耗性能。查找次数越多越消耗时间,不然就把数据存到局部变量中(一般都是引用,不耗啥性能的,说白了就是缓存嘛)。这样访问起来就快多了

  • 相关阅读:
    获取Web.config的内容
    VS2013打开2008的项目
    Win7配置IIS7
    JavaScript通知浏览器,更改通知数目
    高分屏显示模糊修复工具
    Linux下使用 xrandr 命令设置屏幕分辨率
    虚拟机VMware怎么完全卸载干净,如何彻底卸载VMware虚拟机
    虚拟机安装VMware Tools
    网站测速、ping
    有名管道的非阻塞设置
  • 原文地址:https://www.cnblogs.com/ximuncu/p/4705904.html
Copyright © 2020-2023  润新知