高性能Javascript总结

时间: 2018-05-14阅读: 858标签: 性能

一、加载和运行

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对象提供的诸多方法。

 

转载请注明出处 http://www.cnblogs.com/jiangcheng-langzi/



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/763

关闭

php中一些提高性能的技巧

【概述】* 把类定义成static* echo比print快* 用全等号代替双等,减少类型转换* echo用逗号连接字符串效率高* require比require_once()快,并且尽量不要使用相对路径

web前端性能优化指南

性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明,网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为,提升你的网站性能,就是提升你的业务数据(甚至是业务收入)

前端性能的本质是什么?

性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR 和数据可视化,前端工程师总是在突破极限

怎样测试 JavaScript 的函数性能

通过衡量执行某个函数所花费的时间,以“证明”某些实现比另一些实现更高效始终是一个很好的主意。这也是确保性能在进行一些修改后不受影响并找出瓶颈的好方法。良好的性能有助于获得良好的用户体验。良好的用户体验能够留住用户

2018 前端性能检查表

性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)

React性能优化整理

通过判断减少数据变化触发的重新渲染, 以及之后的 DOM diff;函数式语言当中, 语言设计允许两个对象一样, 举例 Clojure:;每个函数体当中生成的对象都会有新的引用, useMemo 可以保留一致的引用.

大型php网站性能和并发访问优化方案

网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎么进行整体性能优化呢

PHP性能优化总结

在循环中判断时,数值判断使用恒等要比等于高效。在数组中,数组下标是字母时一定要加上单引号或双引号。因为$row[‘id‘]的效率是$row[id]的7倍。尽量不要在for循环中使用函数

前端开发工程师必须关注的几个性能指标

对于一个网站如果希望抓住用户,网站的速度以及稳定性是首当其冲的。从各式各样的前端监控平台中,你都可以获得页面很多的性能指标。本文将介绍几个几个比较关键的指标,并给出相应的优化思路。

JavaScript最佳实践:性能

该函数可能看上去完全正常,但是它包含了三个对于全局document对象的引用。如果在页面上有多个图片,那么for循环中的document引用就会被执行多次甚至上百次,每次都会要进行作用域链查找

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!