zoukankan      html  css  js  c++  java
  • YSlow 1/13 Minimize HTTP Requests

    以下是第一条的原文:

    Minimize HTTP Requests

    tag: content

    80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

    One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

    Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

    CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

    Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it's not recommended.

    Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

    Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors. As described in Tenni Theurer's blog post Browser Cache Usage - Exposed!, 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.

    简而言之,就是要减少HTTP请求。

    而方法就是:合并。合并CSS 、合并JS、合并图片。最理想的情况就是一个CSS文件,一个JS文件和一张背景图片。

    关于图片的处理方法:

    1、CSS Sprites。把图片做成一张背景图片,最后控制背景图片的摆放位置。

    2、Image maps。由于不好控制,最好别用。

    3、data:URL scheme。由于IE不支持,还是别用了。我还是挺支持微软的,虽然我英文名叫Catalina。

    4、Browser Cache Usage - Exposed!  (这个还没搞懂……)关于这个的介绍:http://www.mnot.net/cache_docs/

  • 相关阅读:
    Xcode 统计代码行数
    AWS 根用户MFA丢失后如何处理
    istio 基础入门
    AWS 如何挑选合适EC2实例类型
    word去除页眉首页横线
    word 题注 图注 表注 交叉引用 自动编号
    (转)Python基础热图-参数超级详解
    VScode 运行代码显示:Code is already running!
    pyside2安装避坑
    vscode import numpy error:DLL load failed: The specific module could not be found
  • 原文地址:https://www.cnblogs.com/catalina/p/1388012.html
Copyright © 2011-2022 走看看