浏览器客户端性能

缘起

在伯乐在线上看到“现代浏览器工作原理”这篇译文时，顺便浏览了一下原来的英文文章，发现“Client side performance”，很短好像也没人翻译。于事我就试着翻译一下。

正文

1. 客户端性能 Client side performance

1.1. 性能议题 Performance issues

In the last years client side performance has become an issue. Many sites use Ajax and complex JavaScript for creating RIA applications resembling desktop apps. In many cases there are severe performance problems.

近年来，客户端性能已经成为一个议题。很多站点使用了Ajax和复杂的JavaScript来创建类似桌面应用的RIA应用。很多时候，存在严重的性能问题。
Browsers keep improving JavaScript's speed. Most of them use hotspot compilation for repeating code. Other optimizations are used, for instance Chrome's    JavaScript engine uses hidden classes to decrease the penalty caused by JavaScript's dynamic qualities.

浏览器持续提高JavaScript的速度。大多数对重复代码使用热点编译，也使用一些其他的优化。例如，Chrome的JavaScript引擎(传说中的V8引擎)使用隐藏类减少JavaScript动态特性的性能降质。

Other operations are also optimized and get faster each version. For example, Firefox speculative parser enables concurrent download of resources without interfering with the document processing.

其他的浏览器也会优化并在新版中变得更快。例如，firefox推测解析器启动并发的下载那些文档解析中没有引用的资源。

Even with enhanced speed, performance is still an issue. Steve Souders, a "performance guru" from Google, checked and found out that in average,  client side processing takes more time than the server side.

即使增强速度，性能依然是个问题。来自google的性能大师Steve Souders检查并发现客户端进程比服务器端的进程更加耗时。

1.2. 修改代码获取更好的性能 Correct code makes good performance

It is important to understand that the way we write our code has a dramatic influence on performance. 

理解这一点很重要：写代码的方式对性能将产生极其戏剧性的影响。

There are many resources for performance tips. Here are some good ones: 

存在很多关于优化性能的建议，下面是一些比较好资源：

• l Google -  Web Performance Best Practices
• l Yahoo - Best Practices for Speeding Up Your Web Site
• l Steve Souders - 14 Rules for Faster-Loading Web Sites

1.3. 性能工具 Performance tools

There are some good tools for performance analysis and profiling. Unfortunately, they are currently specific to each browser.
存在很多好的性能分析和优化的工具。不幸的是，都是针对特定的浏览器。

There is a new Web Timing specification that is beginning to be implemented by Webkit and Firefox. This may allow for a unified performance tool for all browsers.
Web timing规范被webkit和Firefox实现，这可以允许对所有的浏览器使用统一性能工具。

静态分析工具 Static analysis tool:：

• l YSlow is a Firefox extension that checks the application and grades it according to its conformance with performance best practices. It does static analysis of the HTML code. The results are mostly applicable to all browsers, not just Firefox.
  Since it’s targeted towards Firefox, some fine grained performance problems in other browsers will be missed - for example Chrome and Safari react badly to inline style tags and perform style recalculation of the entire DOM tree, this is missed by YSlow.

• l YSlow是一个Firefox扩展，检查应用并根据性能最佳实践进行分级。它对HTML代码进行静态分析。其分析结果是适用于所有的浏览器，不仅仅是Firefox。由于其目标是Firefox，一些细粒的性能问题在其他浏览器将忽略-例如Chrome和Safari对内联样式的标签反应极差，而且会对整个DOM树重新计算样式，YSlow不考虑此种情况。

• Run time profilers - these tools measure the browser's internal operations like resource loading, parsing, layout and painting:
  

• 运行时性能分析-这些工具测量浏览器内部运行，如资源加载，解析，布局和绘置：

• l For Chrome - Speed Tracer. A Chrome extension that gives performance information in a graphical way. It also gives you "hints" - marks the location of a potential problem and gives a clear textual explanation. Very useful for finding performance bottlenecks. A great tool but only for Chrome (although the results will probably be relevant for other browsers).
  

• l 对Chrome-Speed Tracer。一个Chrome扩展，以图形化的方式给出了性能信息。它也给你“提示”-标志着一个潜在的问题并给出了一个明确的文字说明。这在寻找性能瓶颈非常有用。一个伟大的工具，但只有适用Chrome（虽然结果可能和其他浏览器相关）。

• l For Safari and Chrome - Timeline tab. It is located in the developer tools that come with the browsers. It brings a subset of Speed Tracer data (both browsers are based on the same engine). The graphical view is less clear and it lacks Speed Tracer's performance hints. The developer tools include also a JavaScript profiler (CPU and heap). You can find a good quick start tutorial for developer tools here.

• l Safari和Chrome - Timeline选项卡。它在浏览器的开发者工具中。它提供Speed Tracer数据的子集（两个浏览器是基于相同的引擎）。图形视图是不明确并且缺乏性能的提示。开发工具还包括一个JavaScript性能分析器（CPU和堆）。在这里可以找到一个好的开发者工具快速入门教程。

• l For Intenet Explorer - dynaTrace.  An IE extension. It’s gives extensive profiling data. A nice feature - it can display the JavaScript code being executed, making it easy to pinpoint to the bottleneck code.

• l 对于IE-dynaTrace。一个IE扩展。它提供了扩展的分析数据。一个很好的特性是，它可以在JavaScript代码被执行前显示对应代码，因此很容易找出瓶颈代码。

• l For Firefox - the well known Firebug extension. It contains only network information and JavaScript profiler - no internal browser operations data. Mozilla are going to add integrated developer tools support in their next Firefox release. Perhaps it will contain such data.

• l Firefox的Firebug扩展-众所周知。它只包含网络信息和JavaScript profiler -没有浏览器内部操作的数据。Mozilla打算在他们的下一个Firefox版本中添加集成开发工具支持。也许它将包含这些数据。

2. 高性能的web站点 High Performance Web Sites

2.1.加快web站点的14个规则 14 Rules for Faster-Loading Web Sites

These rules are the key to speeding up your web pages. They've been tested on some of the most popular sites on the Internet and have successfully reduced the response times of those pages by 25-50%.

这些规则是加速web页面的关键，并且已经被Internet上多数流行的站点使用，减少了25-30%的页面响应时间。

The key insight behind these best practices is the realization that only 10-20% of the total end-user response time is spent getting the HTML document to the browser. You need to focus on the other 80-90% if you want to make your pages noticeably faster. These rules are the best practices for optimizing the way servers and browsers handle that 80-90% of the user experience.

在这些最佳实践的背后的揭示了：只有10-20%的终端用户的反应时间是花获取HTML文件。如果想使页面明显加快，就需要把重点放在其他80-90%上。这些规则是用于优化服务器的使用方法以及浏览器的处理的80-90%的用户体验的最佳实践。

These pages are the companion web site for the book High Performance Web Sites. The examples referenced in the book are hosted here. Navigate through the rules listed below to find the associated examples. Each rule page also contains a link to the Yahoo! Developer Network Performance Blog. There you will find a brief summary of the rule along with comments.

这些页面是《高性能网站指南》对应网站。书中引用的实例都在这里。在寻找相关的例子之前浏览下面列出的规则。每一个规则的页面还包含一个链接到雅虎！网络性能开发者的博客。在那里你会找到一个简短的总结规律与评论。

• Rule 1 - 更少的HTTP请求Make Fewer HTTP Requests

• Rule 2 - 使用内容分发网络Use a Content Delivery Network

• Rule 3 - 添加Expires头 Add an Expires Header

• Rule 4 - Gzip组件 Gzip Components

• Rule 5 - 将样式表将在顶部Put Stylesheets at the Top

• Rule 6 - 将脚本放在底部 Put Scripts at the Bottom

• Rule 7 - 避免css表达式 Avoid CSS Expressions

• Rule 8 - 外链JavaScript和CSS Make JavaScript and CSS External

• Rule 9 - 减少DNS查询 Reduce DNS Lookups

• Rule 10 - Minify JavaScript

• Rule 11 - 避免重定向Avoid Redirects

• Rule 12 - 去除重复脚本Remove Duplicate Scripts

• Rule 13 - 配置ETags Configure ETags

• Rule 14 - 启用AJAX缓存 Make AJAX Cacheable

进一步阅读Read more:

• 规则的来源how these rules came about

• YSlow, 雅虎的性能分析工具Yahoo's performance analysis tool

• blog posts from YDN

• links from the book

• sleep.cgi source code

个人觉得伯乐在线中那篇文章没有原来的英文的目录和参考源，看起来很乱，复制下来处理了一下，整理了一下文档目录，添加了一些这里提供一个pdf格式的文档，地址如下：http://pan.baidu.com/s/15Z5p0。

小结

   从WPS for Linux中编辑的过来的文档的标题格式可以得到保留，这对我来说确实是不错的发现，CSDN后台的这个简陋的编辑器，连Tab键都不支持，有种坑爹的感觉。

   关于翻译，我其实是这么做得，先使用机器翻译，然后对照原文，修改语序和错误，这种方式很想带监督的机器学习，我看英文paper并翻译的时候就是使用的这种方法，虽然看的有点慢，但英语阅读水平提升的比较快，当然也许是我的错觉。

    起初直接在wps中编辑的，直接复制到网页编辑器中，在发表文章时发现部分格式异常，不知为何，将异常的格式的文本复制到记事本中清除格式才使得文章现实正常了，发现编辑模式和显示的效果相差不是一点点，觉得这个编辑器如果有个可以预览的按钮使用就好了。