成都达内：WEB前端开发javaScript代码性能优化方案

达内教育—中国IT培训领导品牌成都达内：WEB前端开发javaScript代码性能优化方案JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。Firefox拥有目前最快的JavaScript解析器SpiderMonkey,有各种各样的让JavaScript的速度更快的努力，其中一个是asm.js.Asm.js是JavaScript是由Emscripten产生的一个子集，它为C/C++编绎成的JavaScript代码做了很多优化，编译型后的代码很难看，这就是为什么你不能自己写优化后的代码，但它运行非常快。我建议你阅读一下这篇文章。好了，我们的目标是写速度更快的JavaScript代码，这里有让你的代码跑得更快一些的小窍门，以及更好的内存效率。请注意，我不是严格讨论DOM和Web应用程序，它是关于JavaScript的，DOM只是一部分。眼见为实，我要添加为第一个添加jsperf测试用例，使用的是Firefox38和Chrome39测试。#1不要类型转换JavaScript是动态类型，但如果你想提高速度不要使用该功能。尽量保持变量的类型一致。这也适用于数组，尽管主要是由浏览器都进行了优化,但尽量不要混用不同类型的数组。这就是为何编译成JavaScript的C/C++代码使用静态类型的原因之一。{达内教育—中国IT培训领导品牌varx='2';vary=5;x=2;x+y;}测试用例另外:字符串与数字类型间相互转换比方说，你必须将字符串转换为数字，parseInt与parseFloat是最好的方法吗?让我们来看看。parseFloat(100)+100//整型parseInt(100,10)100|010001000//仅适用于正数1000parseInt测试~parseFloat测试Firefox对位操作进行了优化，运行的代码比parseInt和+运算速度快约99%。而Chrome显然对位运算符没有偏爱，他们比parseInt函数还慢62%。达内教育—中国IT培训领导品牌parseFloat比+运算符在两种浏览器(Firefox28%，Chrome39%)上都要快。因此，如果你在写Node/Chrome或Firefox的应用程序?我认为，一般使用parseInt函数是正确的。#2不要重新构造对象重组对象不便宜，应该避免它：不要使用delete运算符删除操作比分配一个null属性慢很多。分配null在两个浏览器都快99%，但它不能修改对象的结构，但删除可以。编辑：我认为这里有点误导，这并不意味着你不应该使用delete操作符，delete运算符有它自己的使用情况，它可以防止对象的内存泄漏。deletevsnull不要以后再添加属性尽量不要在以后再添加属性，最好从一开始就定义对象的架构。这在Firefox中快100%，在Chrome中快89%。动态属性VS预先定义结构#3字符串联连字符串联连是一个非常昂贵的操作，但是应该用什么方法呢?当然不是Array.prototype.join。达内教育—中国IT培训领导品牌+=运算符似乎比+快很多，String.prototype.concat和Array.prototype.join在两种浏览器都更快。Array.prototype.join是最慢的，符合市场预期。字符串连接测试#4正确的使用正则表达式使用RegExp.prototype.exec是没有必要，不是吗?然而，RegExp.prototype.test和String.prototype.search之间是有性能差异的，让我们来看看哪个方法更快：正则表达式的方法RegExp.prototype.exec比String.prototype.match快了不少，但他们是不完全一样的东西，它们的区别超出了本文的范围，看这个问答。RegEx.prototype.test更快，可能是因为它不返回找到匹配的索引。String.prototype.search应仅用于找到所需的匹配的索引。然而，你不应该使用正则表达式来查找另一个字符串的位置，你可以使用String.prototype.indexOf方法。String.prototype.searchVSString.prototype.indexOf另一个有趣的基准是String.prototype.indexOfVSRegExp.prototype.test，我个人预计后者要快，这是在Firefox中发生的事情，但在Chrome中，事实并非如此。RegExp.prototype.test在Firefox中快32%，达内教育—中国IT培训领导品牌而在Chrome中String.prototype.indexOf快33%。在这种情况下，你自己选择喜欢的方式吧。#5限制声明/传递变量的范围(作用域)假如你调用一个函数，浏览器必须做一些所谓的范围查找，它的昂贵程度取决于它要查找多少范围。尽量不要依辣全局/高范围的变量，尽量使局部范围变量，并将它们传递给函数。更少的范围查找，更少的牺牲速度。这个测试告诉我们，从局部范围内传递和使用变量比从更高的声明范围查找变量快，无论是Chrome和Firefox。内部范围VS高范围VS全局#6你不需要所有的东西都用jQuery大多数开发者使用jQuery做一些简单的任务，我的意思在一些场合你没有必要使用jQuery，你觉得用$.val()始终是必要的吗?就拿这个例子：$('input').keyup(function(){if($(this).val()==='blah'){...}});这是学习如何使用JavaScript修改DOM的最重要原因之一，这样你可以编写更高效的代码。用纯JavaScript100%完成同样的功能100%的速度更快，这是JSPerf基准测试$('input').keyup(function(){if(this.value==='blah'){...}达内教育—中国IT培训领导品牌});4种方法帮你的网站创建更丰富的Web体验技巧资源admin想查看各个浏览器对一些新特性的兼容性情况可以去caniuse.com，上面列的很详细。下面就来看看这四个增强你的站点用户体验的方法是什么。1.CSSCSS是CascadingStyleSheets(层叠样式表单)的简称。更多的人把它称作样式表。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。CSS是CascadingStyleSheets（层叠样式表单）的简称相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。2.SVGSVG是可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。达内教育—中国IT培训领导品牌矢量图像用点和线来描述物体，所以文件会比较小，同时也能提供高清晰的画面，适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值，因此一般的图像文件都很大，会占用大量的网络带宽。SVG是一种矢量图形格式，GIF、JPEG是光栅文件格式。有了两者的概念后，SVG较GIF、JPEG的优势显而易见。更多的好东西可以去snapsvg看看。SVG是可缩放矢量图形是基于可扩展标记语言SVG是一个XML文件，用于XML编程的两种模型DOM和SAX也适用于它。因为SVG是被设计用于互联网，所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML，同样也可以在浏览器中动态地创建、修改和删除图片。3.2DCanvasHTML5不过，getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。getContext(“2d”)对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。2DCanva4.WebGLWebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就达内教育—中国IT培训领导品牌可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。一些效果可以去threejs看看。WebGL是一种3D绘图标准WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。