提升 web 应用程序的性能,找出瓶颈,加快客户端内容的速度。
   作为 web 用户,我们知道页面加载或刷新的速度对其成功至关重要。本文将帮助您更好地理解影响 web 应用程序性能的因素。学习识别这些问题并且找到客户端内容的瓶颈。探索 JavaScript、DOM、CSS 和 Dojo 小部件的性能问题。

JavaScript 性能和函数

在 JavaScript 中,当需要某一功能时,使用 函数。尽管有些情形下可以用字符串代替函数,我们还是建议您尽可能使用函数。在 JavaScript 中,函数在使用前会预编译。

例如,看 清单 1 中的 eval 方法。

清单 1. eval 方法用字符串作参数
function square(input) {   var output;   eval('output=(input * input)');   return output; }

eval 方法计算平方值并输出结果,但性能不好。此例使用字符串 output=(input*input) 作为 eval 方法的参数,无法利用 JavaScript 预编译。

清单 2 显示了一个完成此任务的更好的方法。

清单 2. 使用函数作参数的 Eval 方法
function square(input) {   var output;   eval(new function() { output=(input * input)});   return output; }

使用函数代替字符串作参数确保新方法中的代码能被 JavaScript 编译器优化。

函数作用域

JavaScript 函数作用域链中的每个作用域都包含几个变量。理解作用域链很重要,这样才能利用它。清单 3 显示的是一个函数作用域样例。

清单 3. 函数作用域
function test() {   var localVar = “test”;   test1(this. localVar); var pageName = document.getElementById(“pageName”); }

字符串函数

JavaScript 中最不可取的函数是字符串连接。我通常使用 + 号来实现连接。清单 4 显示了一个此类样例。

清单 4. 字符串连接

var txt = “hello” + “ ” + “world”;

这条语句创建了几个包含连接结果的中间字符串。这样在后台连续创建和销毁字符串导致极低的字符串连接性能。早期的浏览器对这样的操作没有优化。我们建议您创建一个 StringBuffer 类来实现,如 清单 5 所示。

清单 5. StringBuffer 对象

function StringBuffer() { this.buffer = []; }  StringBuffer.prototype.append = function append(val) {  this.buffer.push(val);  return this; }  StringBuffer.prototype.toString = function toString () {  return this.buffer.join(“”); }

对字符串对象(而非值)定义了所有的属性和方法。当您引用一个字符串值的属性或方法时,ECMAScript 引擎在方法执行前隐式创建一个具有相同值的新字符串对象。此对象只用于特定请求,当下一次使用字符串值的方法时重新创建。

这种情况下,对那些方法会被调用多次的字符串使用新的语句。

新字符串对象的例子如 清单 6 所示。

清单 6. 创建新字符串对象的例子

var str = new String(“hello”);

StringObject.indexOf 比 StringObject.match 快。当搜索简单字符串匹配时,尽可能用 indexOf 而不用正则表达式匹配。

尽量避免在长字符串中匹配(10KB 及以上),除非您别无选择。如果您确定只在字符串某一特定部分匹配,用子串而不是整个字符串比较。

DOM 性能

本章简要介绍了一些可进行调整以提升 DOM 性能的内容。

重绘(Repaint)

当之前不可见的内容变得可见,DOM 就会重绘,反过来也一样。重绘也称为重画。此行为不会改变文档布局。不改变元素尺寸、形状或位置,只改变外观也会触发重绘。

例如,给元素添加边框或改变背景色就会触发重绘。重绘的性能代价很大;它需要引擎搜索所有元素以确定哪些可见,哪些必须显示。

回流(Reflow)

回流是比重绘更显著的改变。在回流中:

  • 要操作 DOM 树。
  • 影响布局的样式会改变。
  • 元素的 className 属性会改变。
  • 浏览器窗口尺寸改变。

引擎将会对相关元素回流,以确定各部分显示在哪。子元素也会被回流以反映父元素的新布局。DOM 中元素后面的元素也会被回流,以计算新布局,因为它们可能在初始回流时被移动了。祖先元素也会因子孙元素大小变化而被回流。最后,所有内容都被重绘。

每次向文档添加一个元素,浏览器都要回流页面来计算所有内容如何定位、如何呈现。添加的东西越多,回流次数越多。如果能减少单独添加元素的次数,浏览器回流次数就更少,运行也更快。

CSS 性能

将 Cascading Style Sheets (CSS) 放在顶端。如果样式表放在底部,将最后加载。之前几秒钟,页面都是空白,浏览器等待样式表加载,然后页面上其他东西才能呈现 — 甚至是静态文本。

在 Internet Explorer 中,@import 与在底部使用 <link> 效果一样。我们建议您不要使用。

缩写属性

使用缩写属性在一个声明中一次设置几个属性,而不是每个属性用一个声明。使用缩写属性,可以减小文件大小,降低维护量。

例如,可以设置背景、边框、边框颜色、边框样式、边框侧(顶部边框、右侧边框、底部边框、左侧边框)、边框宽度、字体、页边距、轮廓、填充属性。

CSS 选择器

CSS 选择器通过从右到左 移动来匹配。清单 7 所示,浏览器必须遍历页面中每个锚元素以确定它的父元素 ID 是否是 aElement

清单 7. 选择器正从右到左匹配

#aElement > a{
font-size: 18px;
}

如果从代码中移除 > ,如 清单 8 所示,性能更糟。浏览器要检查整个文档中的所有锚。这样就不是只检查锚的父元素,而是顺着文档树向上查找 ID 为 aElement 的祖先元素。如果正在检查的元素不是aElement 的子孙,浏览器就要沿着祖先元素的树查找,直到文档根部。

清单 8. 如果没有 >,性能更糟

#aElement a{     font-size: 18px; }

提升 web 应用程序的性能(一)的更多相关文章

  1. 提升 web 应用程序的性能(二)

    最佳实践 本章将略述能帮助您提升 web 应用程序性能的最佳实践. 减少 HTTP 请求数 每个 HTTP 请求都有开销,包括查找 DNS.创建连接及等待响应,因此削减不必要的请求数可减少不必要的开销 ...

  2. Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net

    Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net 1. 提升单例有能力的1 2. 减少工作数量2 2.1. 减少距 ...

  3. 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能

    来源: http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 我们都希望创建高性能的Web应 ...

  4. 使用异步存储提升 Web 应用程序的离线体验

    localForage 是一个 JavaScript 库,通过使用简单的.类似 localStorage 风格的 API 实现异步存储,帮助你提升 Web 应用程序的离线经验(通过 IndexedDB ...

  5. Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能

    Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能 二.减少 HTTP 的请求数    当用户浏览页面时,如果我们在用户第一次访问时将一些信息一次性加载到客户端缓存, ...

  6. 利用Httponly提升web应用程序安全性

    随着www服务的兴起,越来越多的应用程序转向了B/S结构,这样只需要一个浏览器就可以访问各种各样的web服务,但是这样也越来越导致了越来越 多的web安全问题.www服务依赖于Http协议实现,Htt ...

  7. 利用Httponly提升web应用程序安全性(转)

    原文:http://kb.cnblogs.com/page/115136/ 随着www服务的兴起,越来越多的应用程序转向了B/S结构,这样只需要一个浏览器就可以访问各种各样的web服务,但是这样也越来 ...

  8. Oboe 提升web 用户体验以及性能

    Oboe  地址:http://oboejs.com/ 1.安装  bower bower  install oboe 2.使用,ajax 模式 oboe('/myapp/things.json') ...

  9. 利用memcached构建高性能的Web应用程序(转载)

    面临的问题 对于高并发高访问的Web应用程序来说,数据库存取瓶颈一直是个令人头疼的问题.特别当你的程序架构还是建立在单数据库模式,而一个数据池连接数峰 值已经达到500的时候,那你的程序运行离崩溃的边 ...

随机推荐

  1. 关于Xcode6 Segue 的疑问,没有解决!

    xcode6 的segue 变化了,如图 关于前3个选项,始终没有太明白,我试验结果如下,简单地把几个viewController连接起来时,无论用show,还是showdetail,还是Presen ...

  2. ExecutorService 和 NSOperationQueue

    ExecutorService,简化了Android中的并发处理,NSOperationQueue简化了iOS中的并发处理.它们都管理线程池,作用十分相近,下面简单说明一下. 1.ExecutorSe ...

  3. 不使用arc功能时的编译参数 –fno-objc-arc

    用一些老代码时,里面总有release调用,你需要用上这个标记,不使用arc功能编译代码.我总记不住具体写法,做个记录.

  4. Java for LeetCode 152 Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  5. 字母排列_next_permutation_字典序函数_待解决

    问题 B: 字母排列 时间限制: 1 Sec  内存限制: 64 MB提交: 19  解决: 5[提交][状态][讨论版] 题目描述 当给出一串字符时,我们逐个可以变换其字符,形成新的字符串.假如对这 ...

  6. UVALive 7267 Mysterious Antiques in Sackler Museum (判断长方形)

    Sackler Museum of Art and Archaeology at Peking University is located on a beautiful site near the W ...

  7. Intellj IDEA快捷键

    Alt+回车 导入包,自动修正 Ctrl+N   查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+Insert 生成代码 ...

  8. document.createElement

    document.createElement()的用法 document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合 ...

  9. Java创建Web项目

    首先下载Tomcat服务,用来运行JAVA程序,跟windows中的IIS类似 下载地址:tomcat.apache.org ,最好下载ZIP压缩版的,解压后就可以直接用.如下图: 检查Tomcat是 ...

  10. Linux Top

    http://www.it165.net/os/html/201402/7262.html