高性能javascript小结

高机能javascript小结

文章转载于我的CSDN博客:http://blog.csdn.net/hello_world_20/article/details/46793317

近来看完了动物丛书的《高机能javascript》,以为那本书的小结部份写得异常不错,简约、轻盈易懂、概括性很强。无法书是藏书楼借的,网上也没有类似的总结,所以写篇博客,记录下来,也愿望能够协助到人人。

  • 第一章:削减javascript对机能的影响:

    • </body> 闭合标签之前,将一切的 <script> 标签放到页面底部。这能确保在剧本实行前页面已完成了衬着。不然 script 标签会壅塞页面的衬着。

    • 兼并剧本。页面中的 script 标签越少,加载也就越快,响应也更敏捷。不管外链文件照样内嵌剧本都是云云。因为每一次 script 外部文件都邑有一次HTTP要求

    • 有多中无壅塞下载javascript的要领

      • 运用defer属性

      • 运用动态建立的 script 元素来下载并实行代码。

      • 运用XHR对象下载javascript代码并注入页面中

  • 第二章:数据接见

    • 对象成员的嵌套也会开支系统资本。location.href永久会比window.location.href快。

    • 接见直接量和部分变量的速率最快,相反,接见数组元素和对象成员相对较慢。

    • 因为部分变量存在于作用域链的肇端位置,因而接见部分变量比接见跨作用域变量更快。变量在作用域链中的位置越深,接见所需时刻就越长。因为全局变量总处在作用域链的最末端,因而接见速率也是最慢的。

    • 防止运用with语句,因为它会转变运转期上下文作用域链。一样,try-catch语句中的catch子句也有一样的影响,因而要警惕运用。

    • 嵌套的对象成员会显著影响机能,只管罕用

    • 属性或要领在原型链中的位置越深,接见它的速率也越慢。

    • 部分一般来讲,你能够经由历程把常常使用的对象成员、数组元素、跨域变量保存在变量中来改良javascript的机能,因为部分变量接见速率最快。

  • 第三章:DOM编程

    • 最小化DOM接见次数,只管在javascript端处置惩罚

    • 假如须要屡次接见某个DOM节点,请运用部分变量存储它的援用

    • 警惕处置惩罚HTML鸠合,因为它及时联系着底层文档。把鸠合的长度缓存到一个变量中,并在迭代中运用它。假如须要常常操纵鸠合,发起把它拷贝到一个数组中。

    • 假如能够的话,运用速率更快的API,比方querySelectorAll()firstElementChild()

    • 要注意重绘和重排;批量修正款式时,“离线”操纵DOM树,运用缓存,并削减接见规划信息的次数。

    • 动画中运用相对定位,运用拖放代办

    • 运用事宜托付来削减事宜处置惩罚器的数目

  • 第四章:算法和流程掌握

    • forwhiledo-while轮回机能类似,所以没有一种轮回范例显著快于或慢于其他范例

    • 防止运用for-in轮回,除非你须要遍历一个属性数目未知的对象

    • 改良轮回机能的最好体式格局是削减每次迭代的运算量和削减轮回迭代次数

    • 一般来讲,switch老是比if-else快,但并不老是最好解决计划

    • 在推断前提较多时,运用查找表比if-elseswitch更快

    • 浏览器的挪用栈大小限定了递归算法在javascript中的运用;栈溢出毛病解致使其他代码中缀运转

    • 假如你碰到栈溢出毛病,可将要领改成迭代算法,或运用Memoization来防止反复盘算。

  • 第五章:字符串和正则表达式

    • 当衔接数目庞大或尺寸庞大的字符串时,数组项衔接是唯一在IE7及更早版本中机能合理的要领

    • 假如不斟酌IE7及更早版本的机能,数组项衔接是最慢的字符串衔接要领之一。引荐运用简朴的+和+=操纵符替换,防止不必要的中心字符串

    • 回溯既是正则表达式婚配功用的基础组成部份,也是正则表达式的低效之源

    • 回溯失控发生在正则表达式本应该疾速婚配的处所,但因为某些特别的字符串婚配行动致使运转迟缓以至浏览器崩溃。防止这个题目的方法是:使相邻的字元互斥,防止嵌套量词对统一字符串的雷同部份屡次婚配,经由历程反复应用向前检察的原子组去除不必要的回溯

    • 进步正则表达式效力的种种手艺手段会有助于正则表达式更快地婚配,并在非婚配位置上花更少的时刻

    • 正则表达式并不老是完成事情的最好东西,特别当你只搜刮字面字符串的时刻

    • 只管有很多要领能够去除字符串的首尾空缺,但运用两个简朴的正则表达式(一个用来去除头部空缺,另一个用于去除尾部空缺)来处置惩罚大批字符串内容能供应一个简约而跨浏览器的要领。从字符串末端最先轮回向前搜刮第一个非空缺字符,或许将此手艺同正则表达式结合起来,会供应一个更好的替换计划,它很少遭到字符串长度的影响

  • 第六章:疾速响应的用户界面

    • 任何javascript使命都不应该实行凌驾100毫秒。太长的运转时刻会致使UI更新涌现显著的耽误,从而对用户体验发生负面的影响。

    • javascript运转时代,浏览器相运用户交互的行动存在差别。不管如何,javascript长时刻运转将致使用户体验变得杂沓和摆脱

    • 定时器可用来布置代码耽误实行,它使得你能够把长时刻运转的剧本分解成一系列的小使命

    • Web workers是新版浏览器支撑的特征,它许可你在UI线程外部实行javascript代码,从而防止锁定UI

  • 第七章:Ajax

    • 作为数据花样,纯文本和HTML只适用于特定场合,但它们能够节约客户端的CPU周期。XML被广泛运用而且支撑优越,然则它非常笨重且剖析迟缓。JSON是轻量级的,剖析速率快(被视为原生代码而不是字符串),通用性与XML相称。字符分开的自定义花样非常轻量,在剖析大批数据集时异常快,但须要编写分外的服务端组织程序,并在客户端剖析。

    • 当从页面当前所处的域下要求数据时,XHR供应了最完美的掌握和灵活性,只管它会把接收到的一切数据当做一个字符串,且这有能够下降剖析速率。另一方面,动态剧本注入许可跨域要乞降当地实行javascript和JSON然则它的接口不那么平安,而且还不能读取头信息或响应代码。Multipart XHR能够用来削减要求数,并处置惩罚一个响应中的种种文件范例,然则它不能缓存接收到的响应。当须要发送数据时,图片信标是一种简朴而有用的要领。XHR还能够用POST要领发送大批数据。

    • 除了这些花样和传输手艺,另有一些原则有助于加速你的Ajax

      • 削减要求数,可经由历程兼并javascript和CSS文件,或运用MXHR

      • 收缩页面的加载时刻,页面主要内容加载完成后,用Ajax猎取那些次要的文件

      • 确保你的代码毛病不会输出给用户,并在服务端处置惩罚毛病

      • 指点什么时候运用成熟的Ajax类库,以及什么时候编写本身的底层Ajax代码

  • 第八章:编程实践

    • 经由历程防止运用eval()Function()组织器来防止两重求值带来的机能斲丧。一样的,给setTimeout()setInterval()传递函数而不是字符串作为参数

    • 只管运用直接量建立对象和数组。直接量的建立和初始化都比非直接量情势要快

    • 防止做反复的事情。当须要检测浏览器时,可运用耽误加载或前提预加载

    • 在举行数学盘算时,斟酌运用直接操纵数字的二进制情势的位运算

    • javascript的原生要领总会比你写的任何代码都要快。只管运用原生的要领

  • 第九章:构建并布置高机能javascript运用

    • 兼并javascript文件以削减HTTP要求数

    • 运用YUN Compressor紧缩javascript文件

    • 在服务器端紧缩javascript文件(Gzip编码

    • 经由历程准确设置HTTP响应头来缓存javascript文件,经由历程向文件名增添时刻戳来防止缓存题目

    • 运用CDN供应javascript文件,CDN不仅能够提拔机能,它也为你治理文件的紧缩与缓存

  • 第十章:东西(截稿时代是2010年)

    • 运用网络剖析东西找出加载剧本和页面中其他资本的瓶颈,这回协助你决议哪些剧本须要加载耽误,或许须要进一步剖析

    • 只管传统的履历通知我们要只管削减HTTP要求数,但把剧本只管耽误加载能够加速页面衬着速率,给用户带来更好的体验

    • 运用机能剖析东西照吃剧本运转历程当中速率慢得处所,搜检每一个函数所斲丧的时刻,以及函数被挪用次数,经由历程挪用栈本身供应的一些线索来找出须要集中精力优化的处所

    • 只管消耗的时刻和条用次数一般是数据中最有价值的部份,但仔细观察函数的挪用历程,你或许会发明其他优化目的

    原文作者:Hello_World20
    原文地址: https://segmentfault.com/a/1190000003908314
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞