读《高性能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 ...
随机推荐
- solr教程
转载请注明出处:http://www.cnblogs.com/zhuxiaojie/p/5764680.html 本教程基于solr5.5 前言 至于为什么要用solr5.5,因为最新的6.10,没有 ...
- Git-TortoiseGit完整配置流程
每次使用Git的时候都或多或少遇到些问题,为了方便以后少踩一些坑,把自己踩过的坑记录一下,加深对Git使用的理解,所以写下这篇日记记录一下. 本文需要频繁使用cmd,如果使用系统的cmd会稍微有点不便 ...
- jQuery-1.9.1源码分析系列（四） 缓存系统
先前在分析Sizzle的时候分析到Sizzle有自己的缓存机制,点击这里查看.不过Sizzle的缓存只是对内使用的(内部自己存,自己取).接下来分析jQuery可以对外使用的缓存(可存可取). 首先需 ...
- WPF老矣，尚能饭否——且说说WPF今生未来（下）：安心
在前面的上.中篇中,我们已经可以看到园子里朋友的点评“后山见! WPF就比winform好! 激情对决”.看到大家热情洋溢的点评,做技术的我也很受感动.老实说,如何在本文收笔--WPF系列文章,我很紧 ...
- 自己实现简单的AOP（二）引入Attribute 为方法指定增强对象
话续前文 : 自己实现简单的AOP(一)简介 在前一篇文章中,对AOP的实现方式做了一个简单介绍.接下来,引入Attribute 为方法指定增强对象,由此实现一个简单的AOP. 注意:指定的是增强对象 ...
- 人工智能 - AI
CNCC 2016 | 人工智能60年浪潮 (原文链接) Intelligence,智能是指生物一般性的精神能力,其三因素理论: 成分智力 Componential Intelligence:思维和对 ...
- 【MVC拾遗】MVC的单元测试简单学习总结
关于测试的必要性什么的已经在 重构与测试 里扯过了.倒也没必要说,写的代码多了自然就明白这个东西重要性. 当时说了坐等被推动去学习单元测试来着,然而等着被人推动的结果就是根本就没人来推你.o(∩_∩) ...
- 如何使用Dubbo服务和集成Spring
Dubbo是什么? Dubbo是阿里巴巴SOA服务化治理方案的核心框架,每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点. Dubbo是一个 ...
- Android 实现QQ扩展listview(expandlistview)
Android 实现QQ扩展listview(expandlistview) <?xml version="1.0" encoding="utf-8"?& ...
- 从头开始搭建一个mybatis+postgresql平台
最近有个项目的数据库使用postgresql,使用原生态的mybatis操作数据,原生态的没什么不好,只不过国内有个tk.mybatis的工具帮助我们做了很多实用的事情,大多数情况下我们需要 ...