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