高性能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代码的网页应用的实际性能。
个人理解:不管是在原型链还是在作用域链查找标识符,都是需要消耗性能。查找次数越多越消耗时间,不然就把数据存到局部变量中(一般都是引用,不耗啥性能的,说白了就是缓存嘛)。这样访问起来就快多了
高性能javascript 学习笔记(1)的更多相关文章
- 高性能javascript学习笔记系列(1) -js的加载和执行
这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...
- 高性能javascript学习笔记系列(6) -ajax
参考 高性能javascript javascript高级程序设计 ajax基础 ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...
- 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践
参考高性能javascript 理解浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...
- 高性能javascript学习笔记系列(4) -算法和流程控制
参考高性能javascript for in 循环 使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...
- 高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
- 高性能javascript学习笔记系列(2)-数据存取
参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文 当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
随机推荐
- English - because of,due to ,thanks to ,owing to ,as a result of ,on account of解析
because of,due to ,thanks to ,owing to ,as a result of ,on account of 等都可以用来表示原因,但其用法却各有不同.下面就其用法分述如 ...
- Matlab中取模(mod)与取余(rem)的区别
取模(mod)与取余(rem)是不同的,通常取模运算也叫取余运算,它们返回结果都是余数. rem和mod唯一的区别在于: 当x和y的正负号一样的时候,两个函数结果是等同的:当x和y的符号不同时,rem ...
- [转载]VMWare网络连接透析
http://blog.csdn.net/struggleyb/article/details/1102214 以前在学校,VMWare里面的Gentoo Linux是采用network bridge ...
- 读书笔记 - 设计模式(Head First)
设计模式让你和其他开发人员之间有共享的词汇,设计模式可以把你的思考架构的层次提高到模式层面,而不是停留在琐碎的对象上. 设计原则: 封装变化:找出应用中可能需要变化之处,把它们独立出来,不要和那些不需 ...
- node中的get请求和post请求的不同操作【node学习第五篇】
获取get的请求内容 /** * Created by Administrator on 2016/8/5. */ var http = require("http"); var ...
- C++_基础_类和对象3
内容: (1)析构函数 (2)拷贝构造和拷贝赋值 (3)静态成员 (4)成员指针 (5)输入输出运算符重载 1.析构函数 当一个对象被创建时,自动调用构造函数进行初始化 当一个对象被销毁时,自动调用析 ...
- 一个关于css3背景透明的例子
大家都知道使用opacity调节透明度不仅是背景透明了而且选择区域的文字也跟着透明了, 这是我们不想要的效果,于是强大的css3便有了只让背景透明的功能 那就是background:rgba(0,0, ...
- UVALive 6709 - Mosaic 二维线段树
题目链接 给一个n*n的方格, 每个方格有值. 每次询问, 给出三个数x, y, l, 求出以x, y为中心的边长为l的正方形内的最大值与最小值, 输出(maxx+minn)/2, 并将x, y这个格 ...
- python 推导式和迭代器、生成器
1.常用推导式 推导式是从一个或者多个迭代器快速简洁创建数据结构的一种方法. 1.1 _ 列表推导式 最简单的形式: [exprssion for item in iterable] 示例: nu ...
- 【STM32学习笔记1】基于固件库的STM32_MDK工程模版
文章包含STM32固件库介绍和工程模板搭建两方面内容. 一.STM32固件库介绍 要建立工程模板,首先要对STM32的固件库有所了解.STM32的固件可以从ST官网下载,网址为:http://www. ...