读《高性能javascript》笔记（一）
第一章
加载与执行：
1，js脚本会阻塞页面渲染，<script>尽可能放到<body>标签的底部
2, 合并脚本，页面中的<script>标签越少；HTTP请求带来的额外开销方面，减少页面外链脚本文件的数量将会改善性能
3，css文件是并行下载，不会阻塞页面的其他进程
无阻塞脚本：
1，延迟脚本：使用<script>的defer属性（仅适用于IE4+和Firefox3.5以上版本）
2，动态创建<script>来下载并执行代码
3，适用XHR对象下载js代码并注入页面
无阻塞脚本工具：YUI3，LazyLoad , LABjs
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
第三章：DOM编程
浏览器把DOM和javascript 独立实现，两个相互独立的功能只要通过接口彼此连接，就会产生消耗。
性能优化：
（1），最小化DOM访问次数，尽可能在javascript端处理
E.g：
function innerHTMLLoop(){
for(var count=0;count<15000;count++){
document.getElementById('here').innerHTML += 'a';
}
}
优化后：
function innerHTMLLoop(){
var content = '';
for(var count=0;count<15000;count++){
content += 'a';
}
document.getElementById('here').innerHTML = countent;
}
（2） , HMTL集合优化
HTML集合包含了DOM节点引用的类数组对象，处于一种“实时状态”实时存在，
当底层文档对象更新时，它也会自动更新
HTML集合有：document.getElementsByName() , document.images , document.links等
//一个意外的死循环
//alldivs.length每次迭代都会增加，反映出的是底层文档的当前状态
var alldivs = document.getElementsByTagName('div');
for(var i=0;i<alldivs.length;i++){
document.body.appendChild(document.createElement('div'));
}
优化方法： 1,2运行速度差不多
1，把集合长度缓存到一个变量中,，并在迭代中使用
var alldivs = document.getElementsByTagName('div');
var len = alldivs.length
for(var i=0;i<len;i++){
/* 处理代码 */
}
2，如果需要经常操作集合，建议把集合拷贝到一个数组中
var alldivs = document.getElementsByTagName('div');
var arr = toArray(alldivs); //toArray 自定义的集合到数组的函数
for(var i=0;i<arr.length;i++){
/* 处理代码 */
}
3，对于任何类型的DOM访问，当同一个DOM属性或方法需要多次访问时，最好使用一个局部变量缓存此变量
function collentionNodesLocal(){
var coll = document.getElementsByTagName('div');
len = coll.length;
name = '';
el = null;
for(var count=0;count<len;count++){
el = coll[count];
name = el.nodeName;
name = el.nodeType;
name = el.tagName;
}
return name;
}
（未完待续.......）
读《高性能javascript》笔记（一）的更多相关文章
- [在读] javascript权威指南第六版
耽搁了有大半年没看,记得当时看到5分之2了吧.权威指南是不管读几遍都能觉得有新收获的书^^
- javascript权威指南笔记
最近每天工作之余看下js的细节部分,时间不是很多,所以看的进度也不会太快,写个博客监督自己每天都看下. 以前不知道的细节或者以前知道但是没注意过的地方都会记录下来,所以适合有一定基础的,不适合零基础新 ...
- 1.语言概述-JavaScript权威指南笔记
上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...
- 2.语言概述-JavaScript权威指南笔记
上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...
- javascript权威指南笔记--javascript语言核心（四）
对象: 通过引用(而非值)来操作对象: var obj = {"x":1,"y":2}; var copyObj = obj; copyObj.x = 5; c ...
- javascript权威指南笔记--javascript语言核心（三）
1.var用来声明一个或多个变量.全局变量是全局对象的属性,它无法通过delete删除. 如果var语句中的变量没有指定初始化表达式,那么这个变量的初始值为undefined. 变量声明语句会被提前到 ...
- javascript权威指南笔记--javascript语言核心（二）
1.函数作用域:在函数内声明的所有变量在函数体内始终是可见的.这意味着在变量声明之前甚至已经可用. *“声明提前”:javascript函数里声明的所有变量(但不涉及赋值)都被提前至函数的顶部. fu ...
- javascript权威指南笔记--javascript语言核心（一）
1.javascript的数据类型分为两类:原始类型和对象类型. 原始类型包括字符串.数字.布尔值.null.undefined. 对象是属性的集合,每个对象都由“名/值”对构成.数组和函数是特殊的对 ...
- 3.类型、值和变量-JavaScript权威指南笔记
开始变得有意思起来了,然而第三章还是以基础知识了解的角度阐释相关的概念,并没有深入到结合代码以及要实现的功能讲用法和原理的程度. 1.概论. value:程序的运行是对值的操作. type:能够表示并 ...
- 2.词法结构-JavaScript权威指南笔记
今天是第二章.所谓词法结构(lexical structure),就是写代码中最基本的东西,变量命名,注释,语句分隔等,这是抄书抄的... 1.字符集,必须是Unicode,反正Unicode是ASC ...
随机推荐
- TCP三次握手，四次挥手
前言 在面试的过程中,TCP的传输协议经常会出现.以前我参加面试的过程中就被问到过,现在轮到我面试其他人的时候,我也会问一些相关的问题.作为一名开发者,无论使用什么样的开发语言,最基本的网络知识一定要 ...
- Win10 UWP 开发系列：使用SQLite
在App开发过程中,肯定需要有一些数据要存储在本地,简单的配置可以序列化后存成文件,比如LocalSettings的方式,或保存在独立存储中.但如果数据多的话,还是需要本地数据库的支持.在UWP开发中 ...
- C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系
我们在开发微信相关的应用的时候,一般需要完善的基础模块支持,包括微信公众号,微信企业号,以及一些业务模块的支持,一般随着功能的增多,我们需要非常清晰的界定他们的关系.模块的分拆以及合并往往需要考虑的代 ...
- sqlserver 通用分页存储过程(转)
USE [AAA_TYDC] GO /****** Object: StoredProcedure [dbo].[proc_DataPagination] Script Date: 11/20/201 ...
- .NET跨平台之Sake和KoreBuild
最近在了解Asp.net Core 1.0(也可称为Asp.net5\Asp.net vNext)的跨平台,发现了两个新的新东西:Sake和KoreBuild(或者已经出了很久). 通过国内某度查询资 ...
- Spring Boot中静态资源（JS, 图片）等应该放在什么位置
Spring Boot的静态资源,比如图片应该放在什么位置呢, 如果你放在传统WEB共的类似地方, 比如webapp或者WEB-INF下,你会得到一张示意文件未找到的破碎图片.那应该放哪里呢? 百度一 ...
- 一元多项式的乘法与加法运算(C语言)
输入格式: 输入分2行,每行分别先给出多项式非零项的个数,再以指数递降方式输入一个多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. 输出格式: 输出分2行,分别以指数递降方 ...
- Lind.DDD.ExpressionExtensions动态构建表达式树，实现对数据集的权限控制
回到目录 Lind.DDD框架里提出了对数据集的控制,某些权限的用户为某些表添加某些数据集的权限,具体实现是在一张表中存储用户ID,表名,检索字段,检索值和检索操作符,然后用户登陆后,通过自己权限来构 ...
- 获取SqlServer存储过程定义的3种方法
第一种: declare @p_text varchar(max) SELECT @p_text= text FROM syscomments WHERE id = ( SELECT id FROM ...
- (转)SqlServer索引及优化详解(1)
(一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引.簇集索引)和非聚 ...