第一章
加载与执行：
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》笔记（一）的更多相关文章

  1. [在读] javascript权威指南第六版

    耽搁了有大半年没看,记得当时看到5分之2了吧.权威指南是不管读几遍都能觉得有新收获的书^^

  2. javascript权威指南笔记

    最近每天工作之余看下js的细节部分,时间不是很多,所以看的进度也不会太快,写个博客监督自己每天都看下. 以前不知道的细节或者以前知道但是没注意过的地方都会记录下来,所以适合有一定基础的,不适合零基础新 ...

  3. 1.语言概述-JavaScript权威指南笔记

    上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...

  4. 2.语言概述-JavaScript权威指南笔记

    上周三的时候交给老板目前的项目第一个迭代回顾会的总结.原本是以综述性的表述方式写的,交给他之后表示程序员不要长篇大论.总结要分为优点缺点期望等等块,每块列出条目,简明扼要的表达出来.这里也用这种风格. ...

  5. javascript权威指南笔记--javascript语言核心（四）

    对象: 通过引用(而非值)来操作对象: var obj = {"x":1,"y":2}; var copyObj = obj; copyObj.x = 5; c ...

  6. javascript权威指南笔记--javascript语言核心（三）

    1.var用来声明一个或多个变量.全局变量是全局对象的属性,它无法通过delete删除. 如果var语句中的变量没有指定初始化表达式,那么这个变量的初始值为undefined. 变量声明语句会被提前到 ...

  7. javascript权威指南笔记--javascript语言核心（二）

    1.函数作用域:在函数内声明的所有变量在函数体内始终是可见的.这意味着在变量声明之前甚至已经可用. *“声明提前”:javascript函数里声明的所有变量(但不涉及赋值)都被提前至函数的顶部. fu ...

  8. javascript权威指南笔记--javascript语言核心（一）

    1.javascript的数据类型分为两类:原始类型和对象类型. 原始类型包括字符串.数字.布尔值.null.undefined. 对象是属性的集合,每个对象都由“名/值”对构成.数组和函数是特殊的对 ...

  9. 3.类型、值和变量-JavaScript权威指南笔记

    开始变得有意思起来了,然而第三章还是以基础知识了解的角度阐释相关的概念,并没有深入到结合代码以及要实现的功能讲用法和原理的程度. 1.概论. value:程序的运行是对值的操作. type:能够表示并 ...

  10. 2.词法结构-JavaScript权威指南笔记

    今天是第二章.所谓词法结构(lexical structure),就是写代码中最基本的东西,变量命名,注释,语句分隔等,这是抄书抄的... 1.字符集,必须是Unicode,反正Unicode是ASC ...

随机推荐

  1. 使用webstom或者idea上传代码到github或coding

    鉴于github网络速度太慢,建议用coding.先介绍github上传方式,因为webstom或idea集成了github,方法简单. git是一个版本控制器,他的作用是管理代码.比如你修改了代码, ...

  2. .net 将List序列化成Json字符串

    将List类型转化为Json,是我们平常开发时最常见的了.在使用中,有很多种方法,也可以使用. 第一种 第三方组件:Newtonsoft.Json.dll //转化成Json Newtonsoft.J ...

  3. [开源ORM] SqliteSugar 3.x .net Core版本成功上线

    SqliteSqlSugar 3.X API 作为支持.NET CORE 为数不多的ORM之一,除了具有优越的性能外,还拥有强大的功能,不只是满足你的增,删,查和改.实质上拥有更多你想像不到的功能,当 ...

  4. Oracle索引梳理系列（四）- Oracle索引种类之位图索引

    版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...

  5. css毛玻璃效果

    毛玻璃其实就是磨砂玻璃,能够模糊的看清背后的风景,让人感觉有种朦胧美,让界面看上去有些层次感. 比如: 高大上啊,接下来肯定是眼馋手痒的过程... 当然,用ps搞一个全景毛玻璃背景毫无疑问是最省事的, ...

  6. .NET 扩展方法 （一）

    我还记得刚刚学编程的时候,老师经常会提到一句话:注意空指针.所以经常在某些“入口”位置,进行代码校验,空指针的判断就是其中的一项工作. string类型作为常用的数据类型,它在项目中出现的机率极高,所 ...

  7. 【WCF】WCF中的InstanceContext与ConcurrencyMode【转】

    一.前言 最近忙于公司的在线升级项目,一个人要负责公司四大产品的在线升级,这四个产品是在Revit中以插件形式存在的,目前基于WCF来实现.等客户总量突破5万了,再重新用socket实现. 由于有服务 ...

  8. ASP.NET Core开发-如何配置Kestrel 网址Urls

    ASP.NET Core中如何配置Kestrel Urls呢,大家可能都知道使用UseUrls() 方法来配置. 今天给介绍全面的ASP.NET Core 配置 Urls,使用多种方式配置Urls. ...

  9. jquery完整弹窗代码

    </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  10. gSOAP MTOM

    前言 需要准备的知识:wsdl,soap,gSOAP,C++,fidder. 首先介绍几个相关的概念 1.MTOM基础概念      MTOM(Message Transmission Optimiz ...