加载和运行

  管理浏览器中的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代码的网页应用的实际性能。

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

高性能javascript 学习笔记(1)的更多相关文章

  1. 高性能javascript学习笔记系列(1) -js的加载和执行

    这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...

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

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

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

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

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

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

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

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

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

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

  7. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  8. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

随机推荐

  1. 数据结构中La表的数据合并到Lb表中

    实验描述:La表中的数据为(3,5,8,11)  Lb 表中的数据为(2,6,8,9,11,15,20) 将La表中的数据而不存在Lb表的数据插入到Lb表中,从而实现并集操作. 出现的问题:最后实现的 ...

  2. PostMessage和SendMessage的区别

    1, PostMessage只把消息放入队列,不管其他程序是否处理都返回,然后继续执行,这是个异步消息投放函数.而SendMessage必须等待其他程序处理消息完了之后才返回,继续执行,这是个同步消息 ...

  3. XLSReadWrite控件简介

    2015-10-22  23:57:55 原帖地址:http://www.cnblogs.com/dabiao/archive/2011/07/08/2100609.html XLSReadWrite ...

  4. 代码风格——Cocos2d-x学习历程(四)

    1.Cocos2d-x拥有一个包含其他所有头文件的文件"cocos2d.h".通常,我们只需要在使用时包含这个头文件,就可以使用引擎的全部功能了. 2.Cocos2d-x的类都放置 ...

  5. HelloWorld——Cocos2d-x学习历程(二)

    HelloWorld分析: 1."resource"文件夹 该文件夹主要用于存放游戏中需要的图片.音频和配置等资源文件. 2."include"和"s ...

  6. 理解ROS的参数

    记住每次操作之前都要在一个单独的终端中运行ros的核心. roscore rosparam命令允许你在ROS的参数服务器上操作和存储数据,参数服务器可以存储整数,浮点数,布尔类型,字典,列表.ROS使 ...

  7. MVC定义路由

    标准路由配置 routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Defa ...

  8. hdu 3530 Subsequence 单调队列

    题目链接 题目给出n个数, 一个下界m, 一个上界k, 让你求出最长的一段序列, 满足这段序列中的最大的数-最小的数<=k&&>=m, 输出这段长度. 可以维护两个队列, ...

  9. js跨域及解决方法

    什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...

  10. 14-C语言宏

    目录: 一.宏定义 二.#x,##x使用和预定义宏 三.宏的高级使用(条件编译) 回到顶部 一.宏定义 1 宏是常用的预处理功能之一,是在编译之前进行宏替换,即将宏名替换成所定义的宏体. 2 优点:可 ...