读书笔记2,高性能JavaScript编程

不记得什么时候看得这本书了,今天拿来一看,嗯~内容真的是很简单了,,作为纪念还是来总结下吧。
此书,主要是从各个方面讲解了如何最大化的进行前端性能优化。

加载和运行

多个js文件可并行下载,但是仍会阻塞其他文件如图片的下载。

js下载和运行会阻塞浏览器运行,所以在script标签里的js代码一定要注意。

优化:放在body底部,延时加载(defer,dom加载完成后)

每个http请求都会产生额外性能负担,1个100K的文件比4个25Kb的文件下载要快。所以应适当使用打包

数据访问

每一种数据存储位置都具有特定的读写操作负担。大多数情况下,对一个直接量和一个局部变量数据访问,其性能消耗是微不足道的。访问数组和对象成员的代价要高一些。

对不同数据类型进行200,000次读操作所用的时间

1. 作用域:一个变量的可访问区域

作用域链:一个函数在创建时,相应的会产生一个作用域链。这个链有下(当前函数作用域,运行时上下文)层层到上(全局作用域),记录了该函数所有可访问的变量。

在函数运行过程,每遇到一个变量,标识符识别过程要决定从哪里获得或存储数据。此过程先从运行时上下文,层层向上查找(未找到,则将变量定为未定义)。正是这搜索过程影响了性能。

一个标识符的位置越深,他的读写速度越慢,所以函数内局部变量的访问速度是最快的,全局通常是最慢的(部分浏览器会优化此处)。建议:全局变量先存储在局部变量里,如document对象就可以先定义一个局部doc对象存储。
作用域链改变: try发生异常后,会把自己的作用域链转给catch

2. 闭包:允许函数访问局部范围之外的数据。

在经常访问一些范围之外的变量,每次访问都会导致一些性能损失。

一个函数的激活对象与运行期上下文一同销毁,当涉及闭包时,激活对象无法销毁了,因为引用仍然存在于闭包中。这意味着,闭包比非闭包函数需要更多内存消耗

3.对象: 实例属性,原型属性

js是面向对象的

深入原型链越深,搜索属性的速度越慢

DOM编程

对DOM(文档对象模型)的操作代价昂贵,在富页面应用中通常是一个性能瓶颈。
访问修改DOM元素

优化:减少访问,先克隆在修改

修改DOM元素,造成重绘或重新排版:
优化:

1. 从文档流中摘除该元素(隐藏,克隆),

2. 使元素脱离文档流(position:absolute)

浏览器在下载完所有资源后,他解析完文件会创建2个内部数据结构:dom树>页面结构,渲染树>dom节点如何显示。一旦dom树和xuanrans构造完毕,浏览器就可以显示页面上的元素了。

ps:渲染树的每个节点称为“框”或者“盒”,符合css模型的定义,将页面元素看做一个具有填充,边距边框和位置的盒

当dom改变影响元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,其他元素的几何属性也因此受到影响,然后重构渲染树,这个过程称作重拍版

不是所有dom操作都会影响几何属性,例如改变背景色,只需要重绘

通过DOM事件处理用户相应

事件有3个阶段:捕获,到达目标,冒泡

优化:事件托管在父元素上,阻止冒泡等默认对你无用行为

算法和流程控制

1. 4中循环类型中,for-in性能最差,因为每次操作都要搜索实例或原型属性。
2. 优化循环工作量的第一步是,减少对象成员或数组查找的次数

3. 存储length

4. forEach等基于函数的迭代虽然更加便利,但是要比基于循环(for等)的迭代要慢一些(一般慢8倍)。每个数组项要关联额外的韩式调用是造成速度慢的原因。

5, 当比较数目很多时,switch表达式比if-else更快。

6. if-else优化,应将最常见的条件放在首位,减少比较次数

字符串和正则表达式

在js中,正则是必不可少的东西,他的重要性远超过琐碎的字符串处理。

1. 字符串拼接

如下图:

字符串常见拼接方式

当连接少量字符串时,操作都很快。

当字符串量多时:

第二种比第一种快,因为第一种内存先创建一个临时字符串,最后再讲字符串赋给str。

join 方法比其他方法都慢,因为他多了一个每个字符后插入一个空字符操作
contact,比+ 和+=慢。

2. 正则表达式

原理:?

响应UI

一个用户点击操作后,浏览器执行2个任务:UI响应+js事件code运行已响应点击。

js运行过慢会导致用户体验错乱和脱节。

浏览器在js运行时间上采取了限制:

1. 调用栈尺寸限制

2. 长时间脚本限制:统计脚本运行的总时间, firefox 10s, safari 5s,chrome没有时间限制但使用崩溃检测系统来处理此类限制。达到限制时,浏览器会弹框提示是否继续运行。

3. 接口最优应该在100ms内响应用户。

优化: 用定时器先响应事件再执行任务,分解任务,限时运行任务(过了时间自动return)

ajax异步JavaScript和XML

有5种方法可向服务器发送请求: XHR,动态脚本标签插入,iframes,comet,multipart XHR。不同情况使用不同方法

expires: get请求,告诉浏览器缓存多久

编程实践

避免重复代码:如浏览器检测

num判断是否奇偶:num&1 == 1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 225,015评论 6 522
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,373评论 3 404
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,253评论 0 368
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,069评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,079评论 6 400
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,550评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,911评论 3 429
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,892评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,435评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,465评论 3 346
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,586评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,178评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,920评论 3 340
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,356评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,493评论 1 277
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,151评论 3 381
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,663评论 2 366

推荐阅读更多精彩内容