《高性能JavaScript》读书笔记

最新推荐文章于 2023-05-03 21:15:14 发布
最新推荐文章于 2023-05-03 21:15:14 发布
阅读量414 收藏
点赞数
分类专栏： Web前端-JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gingerredjade/article/details/53914264
版权

第1章：加载和执行 1

1.1 脚本位置

  • 由于脚本会阻塞页面其他资源的下载，因此，尽可能将所有的script放在body最底部

1.2 组织脚本

  • 减少script数量 当script的type为text/html时，仍然会影响速度吗？
  • 合并多个文件 当script长度受限制时，怎么做？
  • comobo

1.3 无阻塞的脚本

  • 在window的load事件触发后再下载脚本
  • 使用defer延迟<script src="xxx.js" defer></script>，仅支持IE、Firefox3.5
  • 动态创建<script>标签添加到<head>在IE中比添加到<body>更保险
  • 动态加载KISSY.getScript(url , { success : success , charset : charset }); 不在相同的域怎么处理？
  • XMLHttpRequest脚本注入，使用get方法，局限相同的域
  • 推荐做法：先添加动态加载所需的代码，然后加载初始化页面所需的剩下的代码：LazyLoad

1.4 小结

第2章：数据访问 15

  • 直接量 > 局部变量 > 数组元素、对象成员
  • 访问数组len复制给局部变量var len = arr.length;
  • 局部变量位于作用域链的起始位置
  • with或try{} catch(){}会改变作用域链，因此是动态作用域
  • 闭包需要更多内存开销
  • 内部属性[[scope]]包含了一个函数被创建的作用域中对象的集合，这个集合即函数的作用域链。
  • 含有闭包的函数执行时创建的活动对象为运行期上下文作用域链中的第一个对象，其含有的闭包被创建时[[scope]]属性被初始化为这些对象；闭包中创建的标识符如var id = "xdi9592"位于作用域链第一个对象之后的位置。
  • hasOwnProperty
  • instanceOf
  • 嵌套成员，对象成员嵌套越深，访问速度越慢
  • 多次访问同一个对象成员，则需要做缓存，即将对象成员赋值给局部变量

第3章：DOM编程 35

  • 适当缓存访问到的DOM
  • 尽量减少操作DOM的次数
  • innerHTML优于原生创建DOM
  • 节点克隆优于原生创建DOM
  • 访问HTML集合拷贝到数组中，并设置局部变量
  • 缓存集合length属性
  • nextSibling优于childNodes
  • children优于childNodes
  • querySelectorAll优于getElementsByTagName()
  • 重排：浏览器将受影响的部分失效，重新构造渲染树；如增、删DOM、位置、尺寸、窗口
  • 重绘：完成重排后，重新绘制受影响的部分
  • 最小化重绘与重排
    • 缓存布局信息
    • 让元素脱离文档流
  • 事件委托：由于浏览器跟踪每个事件处理器占用很多内存，因此将事件代理到父元素

第4章：算法和流程控制

  • for;while;do{}while;for(var prop in object){}
  • for in 性能较差
  • 减少循环迭代次数,可以使用switch
  • 优化嵌套if-else
  • 调用栈溢出，适当改为迭代算法

第5章：字符串和正则表达式

  1. 将str += "one" + "two" 改为 str = str + "one" + "two" , IE8 以上提升性能
  2. strs.join(“”);在IE7中性能较好
  3. str = str.concat(s1);较慢
  4. 将正则表达式赋值给一个变量，提高性能
  5. 对于事先知道字符串的哪一部分将被测试时，适用字符串方法，如slide(),substr(),substring(),indexOf(),lastIndexOf()
  6. 回溯是正则性能的根源；利用互斥、反向引用
  7. trim方法，用两次正则比用一次正则好，如
    • str.replace(/^\s+/,"").replace(/\s+$/,"")
    • str.replace(“/^\s|\s+$/g”,””);
  8. 贪婪()比懒惰?好

第6章：快速响应的用户界面 107

  1. 浏览器UI线程：单线程

  2. 浏览器限制：

    • 调用栈大小限制
    • 长时间运行脚本限制
      • IE小于500万条语句
      • FF: 10s
      • Safari: 5s
      • Chrome: 无限制

  3. 定时器的使用

  4. 《可用性工程》
  5. Web Worker

6.1 浏览器UI线程 107
6.1.1 浏览器限制 109
6.1.2 多久才算“太久”？ 110
6.2 使用定时器让出时间片段 111
6.2.1 定时器基础 112
6.2.2 定时器的精度 114
6.2.3 使用定时器处理数组 114
6.2.4 分割任务 116
6.2.5 记录代码运行时间 118
6.2.6 定时器与性能 119
6.3 Web Workers 120
6.3.1 Worker运行环境 120
6.3.2 与Worker通信 121
6.3.3 加载外部文件 122
6.3.4 实际应用 122
6.4 小结 124

第7章：Ajax 125

  1. XHR

    • GET参数限制小于2018
    • 跨域限制

  2. Dynamic

    • 可跨域
    • 只能GET
    • 不能设置请求头
    • 不能是纯CML、JSON，而必须封装在回调中，如
      • jsonback({"status":1})

  3. MXHR

    • PHP方法：base64-encode
    • 合并图片请求
      • src='data:img/jpeg;base64,........'

7.1 数据传输 125
7.1.1 请求数据 125
7.1.2 发送数据 131
7.2 数据格式 134
7.2.1 XML 134
7.2.2 JSON 137
7.2.3 HTML 141
7.2.4 自定义格式 142
7.2.5 数据格式总结 144
7.3 Ajax性能指南 145
7.3.1 缓存数据 145
7.3.2 了解Ajax类库的限制 148
7.4 总结 149

第8章：编程实践 151

8.1 避免双重求值（Double Evaluation） 151
8.2 使用Object/Array直接量 153
8.3 不要重复工作 154
8.3.1 延迟加载 154
8.3.2 条件预加载 156
8.4 使用速度快的部分 156
8.4.1 位操作 156
8.4.2 原生方法 159
8.5 小结 161

第9章：构建并部署高性能JavaScript应用

9.1 Apache Ant 163
9.2 合并多个JavaScript文件 165
9.3 预处理JavaScript文件 166
9.4 JavaScript压缩 168
9.5 构建时处理对比运行时处理 170
9.6 JavaScript的HTTP压缩 170
9.7 缓存JavaScript文件 171
9.8 处理缓存问题 172
9.9 使用内容分发网络（CDN） 173
9.10 部署JavaScript资源 173
9.11 敏捷JavaScript构建过程 174
9.12 小结 175

第10章：工具 177

10.1 JavaScript性能分析 178
10.2 YUI Profiler 179
10.3 匿名函数 182
10.4 Firebug 183
10.41 控制台面板分析工具 183
10.4.2 Console API 184
10.4.3 网络面板 185
10.5 IE开发人员工具 186
10.6 Safari Web查看器 188
10.6.1 描述文件面板 189
10.6.2 资源面板 191
10.7 Chrome开发人员工具 192
10.8 脚本阻塞 193
10.9 Page Speed 194
10.10 Fiddler 196
10.11 YSlow 198
10.12 dyna Trace Ajax Edition 199
10.13 总结 202

LuckyJiang.2021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
High Performance JavaScript(高性能JavaScript)读书笔记分析
12-09
第一章：加载和执行 ... 减少外链脚本数量将会改善性能（合并JS） 任何网站都可以使用一个把制定文件合并处理后的URL来获取任意数量的文件。 defer属性可延迟脚本（只有IE4 和FF3.5 支持） 第二章：数据访问 JavaSc
高性能Javascript 读书笔记
今晚打老斧的博客
11-30 436
最近看了《高性能JavaScript》一书，里面有讲很多提高js性能的书，所以根据个人见解记下一些我觉得有用的有意思的点，供以后学习参考。 前言：尽管现在已经发展出了各种方法，压缩，合并、模块化等加载方式，以及强大的JS处理引擎提高js性能，但仍有一些javascript引擎力不能及的地方：DOM交互、网络延迟、JavaScript的阻塞和并发下载等。
高性能javascript读书笔记之注意点
kikyo 博客
10-11 306
1.避免双重求值      允许传人另一段javascript代码字符串并执行的四种方法：      eval()、Function()构造函数、setTimeout()和setInterval()      当在javascript代码中执行另一段javascript代码时，都会导致双重求值的性能消耗（每次调用都会要创建一个新的解释器／编译器实例）。      a.大多数时候，没有必要使
高性能javascript读书笔记之操作DOM
kikyo 博客
10-07 562
DOM：文档对象模型，是一个独立于语言的，用来操作XML和HTML文档的程序接口（API）。 浏览器通常会把DOM和javascript独立实现，每次连接DOM和ECMAScript，都会被收取“过桥费”（性能消耗）。 优化方法： 1.减少访问DOM的次数，把运算尽量留在ECMAScript这一端处理。  慢：      function innerHTMLLoop() {  
高性能javascript读书笔记之算法和流程控制
kikyo 博客
10-08 241
代码的组织结构和解决具体问题的思路是影响代码性能的主要因素。 循环的类型：for循环、while循环、do-while循环、for-in循环。 注：只有for-in循环比其它几种明显要慢。不要使用for-in循环来遍历数组成员。 优化循环： 1.减少迭代的工作量：限制循环中耗时操作的数量、倒序循环； 2.减少迭代次数：Duff’s Device（达夫设备）； 3.条件数
高性能javascript读书笔记之数据存取
kikyo 博客
10-07 325
数据存储的位置关系到代码执行过程中数据的检索速度，改变数据的存储位置来获得最佳的读写性能。 javascript中四种基本的数据存取位置： 1.字面量：只代表自身，不存储在特定位置，有字符串、数字、布尔值、对象、函数、正则表达式，以及特殊的null 和undefined值。 2.本地变量：使用var定义的数据存储单元。 3.数组元素：存储在javascript数组对象内部，以数字作
JavaScript之 高性能读书笔记
stephen的专栏
12-10 814
1.当浏览器在执行javascript代码时，不能同时做其它任何事情。大多数浏览器都使用单一进程来处理用户界面更新和javascript脚本执行。 2.雅虎特别性能小组http://developer.yahoo.com/performance/ 3.标签可以在或中。 4.推荐将所有标签放在body标签的底部 5.减少页面中外链脚本文件的数量将会改善性能。 6.无阻塞的脚本： a.延迟
【前端性能优化】高性能JavaScript读书笔记
Cool的博客
03-25 237
序 曾经看过一篇文章，有一句话这样说： 只有在大学的图书馆里，你才能真正赚回你交的学费。 临近毕业，还想再去图书馆多转转。偶然在架子上发现了这本书，一看作者是写大名鼎鼎的红宝书的人，就很感兴趣。再者，最近用 JavaScript 刷 LeetCode 发现，提交显示 JavaScript 要比 Go 语言或 Python 有更大的时间和内存消耗，也使我把了解 JavaScript 内存机...
《高性能javascript》读书笔记
weixin_40821790的博客
02-27 252
此书主要从js语法层面，算法，浏览器渲染机制，网络传输HTTP、XHR，项目创建和部署方面给与高性能网站的优化方式。 一、加载和运行 1.javascript阻塞dom渲染，尽量放在body底部。可以组合外接javascript，数量多性能更慢。 保持javascript文件小。//window.onload之后开始下载脚本。 不改变dom的脚本使用defered属性，其会异步下载，并
JavaScript高级程序设计——读书笔记
淡水瑜的博客
05-03 830
想要全面理解和掌握JavaScript，关键在于弄清楚它的本质、历史、局限性。ECMAScriptECMAScript（简称ES）是一种用于编写Web浏览器脚本语言的标准，它定义了JavaScript语言的核心规范。它由Ecma International 标准化组织负责管理和更新。JavaScript是ECMAScript标准的一种实现，其他还有JScript和ActionScript等。ECMAScript的目标是提供一种可以跨平台、可靠、高效、强大的脚本语言。
高性能Javascript笔记 数据的存储与访问性能优化
12-08
局部变量也就可以理解为在函数内部定义的变量，很明显访问局部变量要比域外的变量要快，因为它位于作用域链的第一个变量对象中(关于作用域链的介绍可以阅读这篇文章)。变量在作用域链的位置越深，访问所需要的时间就...
rabbit77#conclusion#day2017-03-26 高性能Javascrit读书笔记1
07-25
当单个键和值存在逻辑映射时，可以用一个数组作为查找表来代替、位操作按位与 两个操作数的对应位都是1时，则在改为返回1按位或 两个操作数的对应位只要有一个为1时，
javascript框架设计读书笔记之模块加载系统
10-25
模块加载系统的基本思想是将JavaScript代码分割成独立的模块，然后按需加载，以优化性能和提升用户体验。 动态加载JavaScript模块是实现这一目标的关键技术。如文中提到的方法`loadJs(url, callback)`，通过创建新...
JavaScript中判断json里是否包含某key
^_^TaeYang-Jade^_^
04-07 8701
1.该种有缺陷，如果这个key定义了，并且就是很2的赋值为undefined，用这语句判断就出问题了。 obj['key'] != undefined; 2。这两种比较好，推荐使用 !("key" in obj) // 不包含 obj.hasOwnProperty("key") // 包含 ...
ESLint：Strings must use single quote
^_^TaeYang-Jade^_^
05-19 4049
方法一： 在 .eslintrc.js 配置你的规则rule rules: { ··· "quotes": [1, "single"], //引号类型 `` "" '' ··· } 方法二 万能方法，就是在报错的JS文件中第一行写上 /* eslint-disable */ Use /* eslint-disable */ to ignore all warnings i...
邮箱验证正则表达式
^_^TaeYang-Jade^_^
01-27 3943
下面这种用了符号方式来声明RegExp正则对象： !/^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d\-]*\.)+[A-Za-z]{2,4}$/.test(email.value) 或者 !new RegExp("^[a-z\\d]+[\\W\\-\.]*@([a-z\\d]+[a-z\\d\\-]*\.)+[a-z]{2,4}$...
jQuery中判断变量不为空或null
^_^TaeYang-Jade^_^
04-07 2496
var con = $("con").val(); if(!con){ alert('不为空，请输出内容。'); return; // 该判断相当于判断con="",con=null,con=undefined,con=0 }
D3实现的ChinaMap
^_^TaeYang-Jade^_^
12-26 1238
中国地图 var width = 1000; var height = 1000; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform",
高性能javascript pdf 下载
最新发布
10-06
高性能JavaScript PDF下载是指通过JavaScript代码实现快速、高效地下载PDF文件的过程。下面我将简要介绍几个实现高性能JavaScript PDF下载的方法。 首先，可以使用XMLHttpRequest对象发送请求并接收PDF文件的二进制...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LuckyJiang.2021

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值