ios rac接近重复点击
update:Lo, the Web Performance Advent Calendar hath moved
更新：Lo， Web Performance Advent Calendar已移动
Dec 9 This post is part of the performance advent calendar experiment. Stay tuned for the next articles.
12月9日这篇文章是性能出现日历实验的一部分。 请继续关注下一篇文章。
One of Yahoo!'s first batch of performance best practices has always been "Avoid duplicate scripts" (check Steve Souders' post). Later we added "... and styles". This is a pretty obvious, kind of a "Duh!" type of recommendation, it's like saying "Avoid sleep() in your server-side scripts". But it didn't come up out of thin air, duplicates were noticed on some quite high-profile sites.
雅虎首批性能最佳实践之一就是“避免重复脚本”(请参阅Steve Souders的文章)。 后来我们添加了“ ...和样式”。 这很明显，有点像““！” 推荐类型，就像说“避免在服务器端脚本中使用sleep() ”。 但这并不是凭空产生的，在一些非常引人注目的站点上发现了重复项。
Duplicates are easy to spot (and YSlow will warn you), but let's talk a bit about another concept - let's call itnear-duplicates- when two components are similar, almost the same, but not quite.
重复项很容易发现( YSlow会警告您)，但是让我们谈谈另一个概念-我们称其为近似重复项-当两个组件相似，几乎相同但不完全相同时。
重复的脚本和样式 (Duplicate scripts and styles)
As a refresher and a quick illustration of the effects of duplicate scripts and styles, fire off your HTTP sniffer and hit this test page.
为了让您快速了解重复的脚本和样式的效果，请启动HTTP嗅探器并点击此测试页。
(btw, this is a simple page I put up to test different YSlow scenarios, you can actually use it as a web service of sorts to create any type of components with different options)
(顺便说一句，这是我用来测试不同YSlow场景的简单页面，您实际上可以将其用作各种Web服务来创建具有不同选项的任何类型的组件)
Firefox 2 downloading both duplicate styles and scripts:
Firefox 2下载重复的样式和脚本：
IE6 and duplicate scripts:
IE6和重复脚本：
Exact details of when/which browsers chose to download duplicates are not that interesting, it's obviously bad to waste time downloading the same resource. Even if no repeating download happens, the browser still has to parse through and execute the script/style for a second time.
什么时候/哪个浏览器选择下载重复项的确切细节并不是那么有趣，浪费时间下载相同的资源显然很不好。 即使没有重复下载发生，浏览器仍然必须解析并再次执行脚本/样式。
Even if you have iframes you don't need to repeat the same JS/CSS in each frame, you can "borrow" them from the parent page, here's an example.
即使您拥有iframe，也不需要在每个框架中重复相同的JS / CSS，也可以从父页面“借用”它们，这是一个示例。
近重复 (Near-duplicates)
Near duplicates can be:
几乎重复的可以是：
components with the exact same response bodies but different URLs causing the browser to do double work响应主体完全相同但URL不同的组件导致浏览器执行双重工作 components (images) that are too close to each other - in terms of looks or purpose. Only one component should be selected in this case.彼此之间距离太近的组件(图像)-在外观或用途上。 在这种情况下，只能选择一个组件。
相同的组件，不同的URL (Same component, different URLs)
This could happen especially when you have user-generated content such as image uploads for profile photos and avatars in social sites, forums, images people put in comments on MySpace and so on.
特别是当您拥有用户生成的内容(例如，个人资料照片的图像上传和社交网站，论坛中的头像，人们在MySpace上发表评论的图像等)时，这种情况尤其可能发生。
Also images of stuff for sale (Craigslist, eBay). Often different sellers offering the same item would take the same photo from the manufacturer's site and upload it over and over again.
还包括待售物品的图像(Craigslist，eBay)。 通常，提供相同商品的不同卖家会从制造商的网站上拍摄相同的照片，然后一遍又一遍地上传。
Luckily, PageSpeed warns about components with identical content, so those can be identified:
幸运的是，PageSpeed会警告具有相同内容的组件，因此可以识别这些组件：
In the screenshot above, you see one image (2.3K) repeated 3 times, another (the iPhone, 1.7K) is repeated 4 times, and yet another one (2.8K) repeated 2 times.
在上面的屏幕截图中，您看到一个图像(2.3K)重复了3次，另一幅图像(iPhone，1.7K)重复了4次，而另一幅图像(2.8K)重复了2次。
It's not exactly trivial to avoid this type of duplications with user-generated content (for example, the first poster may delete the photo, in which case the second poster's photo will need to "shine through"). But it's not impossible, using for example a hash of the component's content as an identifier.
避免与用户生成的内容进行这种类型的复制并非完全简单(例如，第一个发布者可以删除照片，在这种情况下，第二个发布者的照片将需要“照亮”)。 但这并非不可能，例如，使用组件内容的哈希作为标识符。
载入中... (Loading...)
Ajax loading indicators are a great idea to give feedback to the user that something is happening. They come in all shapes and sizes... sometimes on the same page, unfortunately. And again, sometimes it's the same stock image but used at different stages of gradual "ajaxification" of the page and with different URLs.
Ajax加载指示器是向用户提供正在发生的事情的反馈的好主意。 不幸的是，它们有各种形状和大小……有时在同一页面上。 再说一次，有时它是相同的库存图像，但是在页面的逐步“ ajaxification”的不同阶段使用了不同的URL。
As we're moving more and more towards modular pages and client-side logic, often different modules on the same page are coded by different teams at different times, independently, without being aware of each other's assets. This way of building pages has it's challenges and one is that common components, such as Ajax loading indicators, should be shared.
随着我们越来越多地转向模块化页面和客户端逻辑，同一页面上的不同模块通常由不同的团队在不同的时间独立地进行编码，而不会意识到彼此的资产。 这种构建页面的方式面临挑战，其中之一就是应该共享通用组件，例如Ajax加载指示器。
太相似的模块 (Too similar modules)
Along the same lines - different modules are sometimes created by different designers at different times. The result - one rounded corner box with 1px shadow and one with 2px shadow, both on the same page. Or two different shades of the same gray color, which no one can tell apart. That's just a waste. (See Nicole Sullivan's presentation for illustration, e.g. slides 44, 45)
同样，不同的设计师有时会在不同的时间创建不同的模块。 结果-一个带有1px阴影的圆角框和一个带有2px阴影的圆角框，都在同一页面上。 或两种相同灰色的不同阴影，没人能分辨。 那只是浪费。 (请参见妮可·沙利文的演示文稿，例如幻灯片44、45)
Below is an example, can you tell that these 5 rounded corner boxes are all different - slightly different shadow, color or radius? How many different boxes does this page need?
下面是一个示例，您能否说出这5个圆角框全部不同-阴影，颜色或半径略有不同？ 该页面需要多少个不同的框？
同一张图片的大小不同 (Different sizes of the same image)
It's highly recommended to not scale images in HTML (or CSS). If you need a 100x100 image you don't use a 400x400 one with<img width="100" height="100" ... />. That's a good rule of thumb... to break sometimes 😉
强烈建议不要缩放HTML(或CSS)中的图像。 如果您需要100x100的图像，则不要使用<img width="100" height="100" ... />的400x400图像。 这是一个很好的经验法则...有时会break
In cases where the same image is used with different sizes and likely even on the same page, it may be beneficial to reuse the same bigger image and scale it down, because this could be saving extra HTTP requests of downloading the same (but slightly smaller) image.
如果使用的图像大小不同甚至可能在同一页面上使用，则重用相同的较大图像并将其缩小可能是有益的，因为这可以节省下载相同图像的额外HTTP请求(但稍小一些) ) 图片。
Facebook is an example, the same hairy guy on the screenshot has two images with different sizes. It's actually the same image but resized in CSS.
Facebook是一个示例，屏幕截图上的同一个毛茸茸的家伙有两个大小不同的图像。 它实际上是相同的图像，但是在CSS中已调整大小。
The relevant CSS which shows the profile image in LARGE and SMALL (and looks like there's even a TINY view, although I couldn't find an example on this page)
相关CSS，以大和小显示配置文件图像(看起来甚至还有TINY视图，尽管我在此页面上找不到示例)
.UIProfileImage_LARGE{width:50px;height:50px}.UIProfileImage_SMALL{width:32px;height:32px}.UIProfileImage_TINY{width:25px;height:25px}
谢谢！ (Thank you!)
Thanks for reading! Reducing HTTP requests is critical for page performance. You've merged your scripts and styles as much as reasonable, you've crafted CSS sprites and inlined images with data URIs. Now it's time to look at what's left - are there components that are way too similar, are there any near-duplicates or even exact duplicates? Same image on different backgrounds? Ever-so-subtle gradients and shadows? Time to pick up the old axe and cut.
谢谢阅读！ 减少HTTP请求对于页面性能至关重要。 您已尽可能合理地合并了脚本和样式，并使用数据URI制作了CSS精灵和内联图像。 现在该看一下剩下的内容了—是否存在过于相似的组件，是否存在几乎重复项甚至精确重复项？ 同一张图片在不同的背景上？ 如此微妙的渐变和阴影？ 是时候拿起旧斧头砍了。
Tell your friends about this post on Facebook and Twitter
在Facebook和Twitter上告诉您的朋友有关此帖子的信息
翻译自: /duplicates-and-near-duplicates/
ios rac接近重复点击
