码迷,mamicode.com
首页 > 编程语言 > 详细

高性能Javascript总结

时间:2018-05-12 22:33:58      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:排版   提高   界面   gulp   构造   带来   总结   产生   压缩   

一、加载和运行

Javascript代码执行会阻塞其他浏览器处理过程、充分利用webpack或gulp工具对文件打包压缩,减少js文件的数量,从而减少http请求的次数,以提高网页应用的实际性能。

二、数据访问

       经典计算机科学的一个问题是确定数据应当存放在什么地方、以实现最佳的读写效率。数据存储在哪里会关系到代码运行期间数据被检索到的速度。

JS中的四种基本的数据存储位置:直接量(字符串、数字、布尔值、对象、数组、函数、正则、null、undefind)、变量、数组项、对象成员。

每一种数据存储位置都具有特定的读写操作负担。直接量和局部变量的访问速度要快于数组项和对象成员的访问速度。因此尽量使用直接量和局部变量,限制数组项和对象成员的使用。

对所有的浏览器来说,一个标识符所处的位置越深,读写它的速度就越慢。在函数体内中,如果对于使用多于一次的变量值,就尽量用局部变量存储本地范围之外的变量值。

局部变量比域外变量快,是因为他位于作用域链的第一个对象中。变量在作用域链的位置越深,访问的实际就越长。全局变量总是最慢的,因为它们总是位于作用域链的最后一环。

嵌套对象成员会造成重大性能影响,应尽量少用。

三、DOM编程

文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口。DOM和JS(ECMAScript)相互独立并以功能接口连接,因此每次通过js访问或修改DOM就会带来性能损耗。

一般而言,对于任何类型的DOM访问,假如同一个DOM属性或方法被访问一次以上,最好使用一个局部变量缓存此DOM成员。

        重绘和重排:当DOM改变影响到元素的几何属性(宽高)或其内部内容时,浏览器需要重新计算元素的几何属性,而且其他元素的几何属性和位置也会因此改变受到影响。浏览器使渲染树上受到的部分失效,然后重构渲染树。这个过程被称作重排。重排版完成时,浏览器会在一个重绘进程中重新绘制屏幕上受影响的部分。

引发重排的几个原因:

         1、添加或删除可见的DOM元素

         2、元素位置改变

         3、元素尺寸改变(盒子模型)

         4、内容改变

         5、最初的页面渲染

         6、浏览器窗口尺寸的改变

 针对重排和重绘引发的性能问题可以通过批量修改离线操作DOM树缓存并减少对布局信息的访问来降低其带来的影响。

 事件托管技术可以最小化事件句柄数量。

四、算法和流程控制

JS中的for-in循环可枚举任何对象的命名属性(包括对象的实例属性和继承而来的属性),一般不推荐使用。

JavaScript引擎所支持的递归数量与JavaScript调用栈的大小直接相关。

五、响应接口

大多数浏览器有一个单独的处理进程,它由两个任务所共享:JavaScript任何和用户界面更新任务(UI线程)。

一个单一的JavaScript操作应当使用的总时间(最大)是100毫秒。

当多个重复的定时器被同事创建会产生性能问题。因为只有一个UI线程,所有定时器竞争运行时间。

六、Ajax  异步JavaScript和XML

ajax是一种与服务器通讯而不重载当前页面的方法。

Beacons(灯标):JS用于创建一个新的Image对象,将src设置为服务器上一个脚本文件的url,该url包含希望通过get格式传回的键值对数据。

作为数据格式,纯文本和HTML是高度限制的,但其可以节省客户端的CPU周期。XML应用广泛但非常冗长且解析缓慢。json是轻量级、解析迅速,交互性和XML相当。自定义格式非常轻量。总而言之,越轻量级的格式越好,最好是json和字符分割的自定义格式。

七、编程实践

 eval()、Function()构造器、定时器(setTimeout()和setInterval())四种函数可以允许在程序中获取一个包含代码的字符串然后运行它。但此时会付出二次评估的代价,与直接包含相应代码相比将占用更长的时间。

定时器建议第一个参数传入一个函数而不是一个字符串,否则会造成内存泄漏。

JS的原生部分一般是用低级语言写的,如C++,所以无论怎样优化JS代码,永远不会比JS引擎提供的原生方法更快,比如内置的Math对象提供的诸多方法。

 

高性能Javascript总结

标签:排版   提高   界面   gulp   构造   带来   总结   产生   压缩   

原文地址:https://www.cnblogs.com/jiangcheng-langzi/p/9029752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!