上海地铁站图路线图_性能路线图

上海地铁站图路线图

2010 update: Lo, the Web Performance Advent Calendar hath moved

2010年更新： Lo， Web Performance Advent Calendar已移动

Dec 1 This is the first in the series of performance articles as part of my 2009 performance advent calendar experiment. Stay tuned for the next articles.

12月1日，这是我2009年性能出现日历实验的一部分性能文章系列的第一篇。 请继续关注下一篇文章。

As you've probably heard (and maybe all too often), we live in Web 2.0. This may mean different things to differently inclined folks but for us developers it means more rich Ajaxy pages, communicating more frequently with the server, one-page type of apps (think Gmail). Where "the web as she was meant to be" used to be a document-serving system, things are different now and web pages are increasingly more like applications, and much less document-y.

正如您可能听说过(也许经常听到)那样，我们生活在Web 2.0中。 对于不同倾向的人来说，这可能意味着不同的事情，但是对我们开发人员而言，这意味着更丰富的Ajaxy页面，与服务器进行更频繁的通信，单页类型的应用程序(例如Gmail)。 在“原本应该的网络”曾经是一个文档服务系统的情况下，现在情况有所不同，网页越来越像应用程序，而文档则少得多。

Let's take a look at what I once called (obviously still under the effect of that dental anesthetic) "The Life of Page 2.0" - a parallel between the human life and the modern day web app.

让我们看一下我曾经所说的(显然仍在这种牙科麻醉剂的作用下)“ The Life of Page 2.0”-人类生活和现代网络应用程序之间的相似之处。

Page 2.0的生活 (The life of Page 2.0)

On this timeline above you can see the key moments of the life of a page and how they correspond to the human life.

在上面的时间线上，您可以查看页面生命中的关键时刻以及它们与人类生活的对应关系。

1. It all starts with the page request. Someone types in a URL or clicks a link. This is the moment of page's conception

   这一切都始于页面请求。 有人输入URL或单击链接。 这是页面构想的时刻

2. What follows next is the server is "pregnant" with that page. Your server side code will fetch data from somewhere - a database, web services - and crunch that data stitching a string of HTML code output
   接下来是服务器“怀有”该页面。 您的服务器端代码将从某个地方(数据库，Web服务)获取数据，并对数据进行缝合以处理一串HTML代码输出

3. Luckily if there's no complications, abortions, 404s and such, the pregnancy is over, HTML is sent to the browser and the page is officially born. Look, it even has a <title>, which is hopefully something different than "500 Internal Server Error"

   幸运的是，如果没有任何并发​​症，堕胎，404错误等，那么怀孕就结束了， HTML发送到浏览器，页面正式诞生了。 看，它甚至还有一个<title> ，希望它与“ 500 Internal Server Error”有所不同。

4. Then comes the waterfall - downloading all the extra page components required by the page - images, scripts, styles... This phase ends with the onload event. This phase roughly corresponds to the childhood and teen years of our little human, which eventually graduates and becomes a full blown Mr.Page.

   然后是瀑布-下载页面所需的所有额外页面组件-图像，脚本，样式...此阶段以onload事件结束。 这个阶段大致对应于我们这个小人类的童年和青少年时代，这个小人类最终毕业并成长为完全成熟的佩奇先生。

5. Right after onload comes a settling process (the young fella finding his/her identity) - attaching even handlers to DOM elements, some initialization work, maybe fetching a few more components, or getting some data via an Ajax call. The page then settles. Status bar stops showing stuff that's being downloaded, indicators stop spinning, cursor is not busy. All is good, the young adult is back from backpacking across Western Europe and Tibet and ready to get married, take over that sales position in dad's company and own a barbeque grill

   紧接onload之后是一个稳定过程(年轻的家伙发现了他/她的身份)-将处理程序甚至附加到DOM元素上，进行一些初始化工作，也许会获取更多组件，或者通过Ajax调用获取一些数据。 然后页面安定下来。 状态栏停止显示正在下载的内容，指示器停止旋转，光标不忙。 一切都很好，这个年轻人从背包徒步旅行回来，准备穿越西欧和西藏，准备结婚，接任父亲在公司的销售职位并拥有烧烤架

6. Then life goes on, user interacts with the page. Some pages are quite uneventful, others are full of ups and downs (uploads/downloads), always getting more data, updating and self-improving, always on the move
   然后生活继续，用户与页面进行交互。 有些页面非常平稳，另一些页面则起伏不定(上传/下载)，总是获取更多数据，进行更新和自我完善，并且总是在移动中

7. Sooner or later along comes the Grim Reaper to end it all. The user clicks away from the page, making a new request and our Page is laid to rest after a brief onunload moment.

   死神迟早要结束这一切。 用户单击离开页面，发出新的请求，在短暂的onunload片刻之后，我们的Page进入休息状态。

关于佩奇先生一生的一些评论 (Some comments on Mr. Page's life)

First - if that looks like a lot happening, it is. The good news for the performance folk is that since there's a lot going on, it means there's a lot to improve. Performance optimization is a fun and challenging activity which is all but boring.

首先-如果发生的事情很多，那就是。 对于表演人员来说，好消息是，既然有很多事情要做，那就意味着有很多需要改进的地方。 性能优化是一项有趣而富有挑战性的活动，几乎无聊。

Next - the onload. While technically onload is a concrete event which should signify when the page is ready, it's not always that simple. The "user onload" is an undefined point in time that could happen before the onload and way after. Depends on the page and on the user. An article type of page could be considered ready when the article title and content are ready. The user happily reads and hence interacts with the page, while images, ads and what not is still being downloaded. Other times the onload may happen relatively quickly, but the actual page content is still being retrieved (Google Reader on the iPhone comes to mind) and the page is far from usable. It's up to you to figure out the "user onload" for your type of page.

接下来-onload。 尽管从技术上讲onload是一个具体的事件，应该表明页面准备就绪的时间，但并不总是那么简单。 “用户加载”是未定义的时间点，可能在加载之前和之后发生。 取决于页面和用户。 当文章标题和内容准备就绪时，页面的文章类型可以视为已准备就绪。 用户可以愉快地阅读页面并因此与页面进行交互，而图像，广告和其他内容仍未下载。 在其他时候，加载可能会相对较快地发生，但是实际页面的内容仍在被检索(iPhone上的Google Reader浮现在脑海中)，并且该页面远不能使用。 由您自己确定页面类型的“用户加载”。

需要改进的地方 (Where to improve)

Probably the first and most important place for optimization for most pages is the waterfall stage. But you can optimize the page in any of the stages above, prioritizing on where the most time is spent.

对于大多数页面来说，最优化的第一个也是最重要的地方是瀑布阶段。 但是您可以在上述任何阶段中优化页面，优先考虑花费时间最多的位置。

Below is a summary of the main optimization activities in each stage, many of these will be discussed in follow-up articles.

以下是每个阶段的主要优化活动的摘要，其中许多将在后续文章中进行讨论。

1. at request time - for example send less cookies, no cookies for static requests

   在请求时-例如发送较少的cookie，对于静态请求不发送cookie

2. optimize the waterfall - this is pretty simple to understand. "Simple laws of physics", as my fellow Yahoo! and perf extraordinaire Venkat says. I would divide the waterfall optimizations into these categories:

   优化瀑布-这很容易理解。 “简单的物理定律”，就像我的雅虎一样！ 性能卓越的Venkat说。 我将瀑布优化分为以下几类：

   1. less stuff - your waterfall will be shorter when there's less things to fall. Have less HTTP requests, merge components, use sprites, data URIs/MHTML, remove what you don't need, lazy-load the rest. Use caching and "never expires" policy to improve repeat visits. Remove duplicates, near duplicates, and plain old 404 errors

      更少的东西-当下落的东西更少时，您的瀑布会更短。 减少HTTP请求，合并组件，使用Sprites，数据URI / MHTML，删除不需要的内容，其余部分进行延迟加载。 使用缓存和“永不过期”策略来改善重复访问。 删除重复项，重复项和简单的旧404错误

   2. smaller stuff - once you've removed or merged components, the ones that are left should be as small as they can be - that means use compression, minification, image optimization, zero body 204 components

      较小的内容-删除或合并组件后，剩下的组件应尽可能小-这意味着要使用压缩，缩小，图像优化，零体204组件

   3. move out of the way - some things in the waterfall harm more that others, not everything happens in parallel. Parallel is good, means that more stuff is downloaded at the same time and the waterfall will finish earlier. JavaScripts block downloads. Sometimes CSS does too. CSS blocks rendering. Redirects should be burned. DNS lookups cost too, so use less domains.

      迁出的方式-有些东西在瀑布伤害更多的人，而不是一切都发生在平行。 并行性很好，这意味着可以同时下载更多内容，并且瀑布将更早完成。 JavaScript阻止下载。 有时CSS也是如此。 CSS阻止渲染。 重定向应该被烧掉。 DNS查找也要花费成本，因此请使用更少的域。

   4. start early so you can finish early, kind of obvious, eh? This means use flushing and HTTP chinked encoding to start the waterfall even before the page is born. (You know it's going to be a baby girl, err on the pink color scheme)

      尽早开始，这样您就可以尽早完成，是吗？ 这意味着即使在页面诞生之前，也要使用刷新和HTTP压缩编码来启动瀑布。 (您知道这将是一名女婴，在粉红色配色上是错误的)

   optimize the waterfall - this is pretty simple to understand. "Simple laws of physics", as my fellow Yahoo! and perf extraordinaire Venkat says. I would divide the waterfall optimizations into these categories:

   优化瀑布-这很容易理解。 “简单的物理定律”，就像我的雅虎一样！ 性能卓越的Venkat说。 我将瀑布优化分为以下几类：

3. the settling after-onload phase - you can do stuff here too. For example, you can start some of the work at DOMContentLoaded, you don't always need to wait for onload

   加载后的稳定阶段-您也可以在此处进行操作。 例如，您可以从DOMContentLoaded开始一些工作，而不必总是等待onload

4. the interactive/life phase - this includes CSS and JavaScript optimizations to make your user interaction smoother and more pleasant and the UI more responsive. Touching the DOM lightly. Towards the end-of-life you can help too. What is a poor old page to do, but leave a good inheritance by preloading some of the components that the children and grandchildren pages may need

   互动/生活阶段-包括CSS和JavaScript优化，以使您的用户互动更流畅，更愉快，并且UI响应更快。 轻触DOM。 在使用寿命即将结束时，您也可以提供帮助。 什么是较差的旧页面，但是要通过预加载子页面和孙子页面可能需要的某些组件来保留良好的继承性

第一天结束(End of day 1)

Thanks for reading so far! This first article was more high level, an overview of some of the more technical parts to follow. It's good to have a view. It helps you prioritize and adopt a more holistic approach to the optimization effort. At the end of it, it's a marathon, not a sprint.

感谢您到目前为止的阅读！ 第一篇文章比较高级，概述了后续的一些技术性更高的部分。 有个好看法。 它可以帮助您确定优先级，并采用更全面的方法进行优化。 最后，这是一场马拉松，而不是短跑。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/the-performance-roadmap/

上海地铁站图路线图