高性能JS(读书札记)】的更多相关文章

js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 ""(空字符串) Number 任何非零数值(包括无穷大) 0和NaN Object 任何对象 null Undefined n/a undefined 2. Number():可以用于任何数据类型 数据类型 返回值 true or false 1和0 数字值 简单传入和返回 null 0 undefin…
第一章:加载和执行 1.1脚本位置 将js脚本放在body底部 1.2组织脚本 文件合并,减少http请求(打包工具) 1.3无阻塞的脚本 js倾向于阻止浏览器的某些处理过程,如http请求和用户界面更新,这是所有开发者面临的最显著的性能问题. 尽管下载单个较大的js文件只产生一次http请求,却会死锁浏览器一大段时间.为避免这种情况,你需要向页面中逐步加载js文件,这样做在某种程度上来说不会阻塞浏览器. 无阻塞脚本的秘诀在于,在页面加载完成后才加载js代码.用专业术语来说,这意味着在windo…
第一章:加载和执行 .浏览器的JavaScript的引擎是编译器层的优化: .当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着 .主流浏览器都允许并行下载JS. .减少外链脚本数量将会改善性能(合并JS) .任何网站都可以使用一个把制定文件合并处理后的URL来获取任意数量的文件. .defer属性可延迟脚本(只有IE4 和FF3. 支持) 第二章:数据访问 .JavaScript中有四种基本的数据存取位置: 直接量,变量,数组元素(以数字作为索引),对象成员(以…
零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) 这样的组织结构也符合我们的开发习惯,首先进入第一部分. 一.JavaScript加载 起因:script脚本的加载会阻塞浏览器渲染页面和处理用户交互,如果加载的script脚本太多太大,就会长时间阻塞,造成页面假死. 解决方案: 1.脚本位置 放在底部. 放在底部可以保证页面主体结构已经基本加载完…
参考: <<高性能JavaScript>> Nicbolas C. Zakas 著 javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到<script>标签的时候都必须停下来等待代码的下载并执行. 然后才继续处理其他部分. 无阻塞加载javascript代码的推荐方式: // 将下面的这段加载代码放到</body>的闭合标签之前,这样确保了JS执行过程中不会阻碍页面的其他 // 内容显示, 其次第二个js文件完成下载时,…
d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定到文档中(这里的文档指的是html文档)的元素,根据需要创建新元素: 解析每个元素范围内的数据并为其设置相应的可视化属性,实现元素的变换(transforming); 响应用户输入实现元素状态的过渡(transitioning); SVG D3最适合用来生成和操作SVG(Scalable Vecto…
一.何为异步   执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上执行下一个任务,当任务执行完成时则会收到通知. 面对IO操作频繁的场景,异步执行模式可在同等的硬件资源条件下提供更大的并发处理能力,也就是更大的吞吐量. 但由于异步执行模式打破人们固有的思维方式,并且任务的发起和任务的执行是分离的,从而提高编程的复杂度. 多线程.多进程均可实现异步模式. 二.从回调…
一.访问与修改DOM DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响. 减少访问DOM的次数,把运算尽量留在JS端操作. 二.innerHTML 对比 DOM 方法 1.对于原生的DOM方法和innerHTML比较,性能相差无几. 2.对于大量操作,针对不同浏览器,性能不一样,因此取决于经常用的浏览器. 3.建议从可读性.稳定性.编码习惯来决定使用哪种方式.在对字符串经过优化后,innerHTML性能可以得到大幅提升. 三.操作上的优化 1.节点克隆 例如…
原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 第二章 Js概览 基于GoogleV8引擎 Object.keys(o) 数组方法:遍历forEach.过滤filter.改变map 实现了String.prototype.trim() 含有JSON解析 第三章 阻塞与非阻塞IO 单线程注意点 小心处理内存中的变量,可能会影响两次访问的结果 不要编写阻塞式代码,可能会影响第二次访问的时间 事件轮训 先注册事件 不断询问这些事件是否已经分发dispatch 当事件分发…
一.脚本位置 1.Script标签尽可能放到Body底部,以减少脚本文件下载对整个页面UI渲染的影响. 2.Script标签永远不要紧跟Link标签后面. 二.组织脚本 1.合并多个文件在一个Script中加载: <script type="text/javascript" src="/scripts/jquery.min.js&/scripts/jquery.validation.js"></script> 三.无阻塞的脚本 1.无…