65.9K
CodeProject 正在变化。 阅读更多。
Home

提高网站加载速度和缓存时间

NewAmbition
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.89/5 (8投票s)

2013年7月5日

CPOL

6分钟阅读

viewsIcon

22749

一篇关于如何使用常用技术来提高网站整体速度的教程。

引言

使用的技术

页面上的图片和“绘制”元素

网站上的大量图片需要调整大小或无损压缩以减小尺寸并优化其渲染。不幸的是，很多开发者因为以下原因不会手动处理大部分图片：

  • 图片数量庞大，会占用过多的开发时间；或者
  • 一张图片需要在不同页面上以不同尺寸重复使用。

因此，开发者会使用远大于实际所需尺寸的图片来弥补。这会导致 Web 浏览器不得不下载和缓存大图片，手动调整其大小，然后将其绘制到页面上。如果开发者没有在 <img> 标签上设置尺寸，页面将不得不两次绘制。所有这些都会导致每个图片、每个页面的加载时间远超必要。

[.css / .js] 脚本加载

许多网站依赖并使用样式表和 JavaScript 来为页面添加功能和自定义外观。然而，许多开发者并没有寻找它们的“精简版”版本来帮助页面更快地加载。脚本的精简版是指移除了所有注释和空白字符、大部分换行符，并将长变量名缩短为一到两个字符的版本。精简过程完成后，脚本文件的大小会减小 20%-80%。这使得它们能够以更快的速度下载和运行。

其他不足之处包括在页面上使用不必要的样式和脚本，以及需要下载许多独立的脚本文件。

对抗“权威”

为了应对这些情况并帮助缓解页面加载和绘制时间，技术娴熟的开发者创建了一套工具，并免费提供给广大开发者使用。所有荣誉归功于各自的项目，以及那些花费数月时间开发和完善产品的开发者。

以下教程将只展示如何使用这些产品来加速您的网站。作者不对其工作原理负责。

注释

本教程将不展示如何使用 LessCss，只展示如何在此包中实现它。有关用法，请参阅 http://www.dotlesscss.org。

所有 web.config 和其他引用都应由 NuGet 包管理。 

这些技术在本文档编译时即可正常使用。实现方式由用户自行决定。作者不对本教程可能对网站产生的任何影响（正面或负面）负责。以下内容旨在用于 Microsoft MVC 和 RAZOR 的生产环境。

优化图片

要继续本教程，请从 NuGet 包管理器中安装以下内容：

  • ImageResizer
  • ImageResizer.Mvc
  • ImageResizer.MvcWebConfig
  • Simple.ImageResizer
  • Simple.ImageResizer.MvcExtensions

目标

动态渲染所需图片的优化版本，减少带宽，节省浏览器绘制时间。

实现

遵循教程： https://github.com/terjetyl/Simple.ImageResizer#readme

创建一个新的控制器并命名为 ImagesController。图片将被服务器缓存到其所需的尺寸。

粘贴到 ImagesController

using System.IO;
using System.Web.Mvc;
using Simple.ImageResizer.MvcExtensions;

namespace Demo.Controllers
{
    public class ImagesController : Controller
    {
        [OutputCache(VaryByParam = "*", Duration = 60 * 60 * 24 * 365)]
        public ImageResult Index(string filename, int w = 0, int h = 0)
        {
            //Path to cached images (NOT your original image path)
            string filepath = Path.Combine(Server.MapPath("~/images2"), filename); 
            return new ImageResult(filepath, w, h);
        }
    }
}

将以下代码添加到 'App_Start/RouteConfig.cs' 文件中的 RegisterRoutes(RouteCollection routes) 方法中。

routes.MapRoute(
    "Image", "images/{filename}",
    new { controller = "Images", action = "Index", filename = "" }
);

这将自动捕获页面上的任何图片并将其传递给 ImageResizer 进行处理。

现在，您只需使用标准的 <img> 标签调用图片即可 – 在任何页面上 – 将所需的转换添加到查询字符串中，包就会处理一切！

页面示例

<img src="/Content/images/image.png?w=105&h=90" width="105" height="90" />

而不是

<img src="/Content/images/image.png" width="105" height="90" />

请注意，要在 <img> 标签中使用宽度和高度标签，以防止页面重复绘制。

优化 CSS 和 JS 脚本

要继续本教程，请从 NuGet 包管理器中安装以下内容：

  • Cassette.Aspnet
  • Cassette.Less

目标

用于压缩、打包和渲染紧凑版本的必需 CSS 和 JS。

实现 (CSS)

在 Content 文件夹中创建一个名为 LessCss 的文件夹。

在 LessCss 中，为所需的 CSS 类别创建子文件夹（可选）。您也可以使用标准的 .css 文件（如果您不想将其转换为 .less）。

本教程将假定以下结构：

(对于 .less 文件)

Content

  • LessCss
  • jQueryCore
  • MainTheme

(对于 .css 文件)

Content

  • CSS

转换 .css 文件：将其放在 LessCss 中的所需类别下，将扩展名从 '.css'更改为 '.less'，打开 '.less' 文件，然后单击“保存”。这将使您的编译器自动生成必要的文件。您可以继续编辑该文件，或将其关闭。

在 Infrastructure 文件夹中（如果不存在，请在根目录中创建一个），创建一个名为 'CassetteConfiguration.cs' 的类。将以下内容粘贴到其中：

/// <summary>
/// Configures the Cassette asset bundles for the web application.
/// </summary>
public class CassetteConfiguration : IConfiguration<BundleCollection>
{
    public void Configure(BundleCollection bundles)
    {
        bundles.Add<StylesheetBundle>(
          "Content/lesscss",bundle => bundle.EmbedImages().EmbedFonts());
        bundles.Add<StylesheetBundle>(
          "Content/css", bundle => bundle.EmbedImages().EmbedFonts());
    }
}

这将告诉您的网站使用指定目录中的所有样式表，将它们全部打包，并进行压缩。

页面示例

在所需的页面（最好是 _Layout 页面）中，您需要告诉您的网站引用您创建的包。在 <!DOCTYPE html> 标签之前添加以下代码：

@{
    Bundles.Reference("content/lesscss");
    Bundles.Reference("content/css");
}

之后，您只需在 <head> 标签中添加 @Bundles.RenderStylesheets() 即可渲染结果。

注释

样式表通常需要一定的顺序才能正确显示内容。要正确排序样式表的加载方式，请在 Content/LessCss 和 Content/css 中都创建一个名为 'bundle.txt' 的文件。在 bundle.txt 文件中，列出加载 CSS 文件的顺序。*请勿加载 .less 文件（因为它会编译为 .css）。

MainTheme/global.css
MainTheme/header.css
MainTheme/body.css
MainTheme/footer.css
jQueryCore/example1.css
jQuertCore/example2.css
etc.

实现 (js)

本教程假定您所有的脚本都放在根目录的 Script 文件夹中。在 CassetteConfiguration 中，将以下内容粘贴到样式表包下方：

bundles.AddPerSubDirectory<ScriptBundle>("Scripts");

这将告诉您的网站使用指定目录中的所有脚本，将它们全部打包，并进行压缩。

页面示例

在所需的页面（最好是 _Layout 页面）中，您需要告诉您的网站引用您创建的包。在之前引用的包下方添加以下代码：

Bundles.Reference("scripts");

之后，您只需在 <body> 标签中的所有内容底部附近添加  @Bundles.RenderScripts() [最好] 即可渲染结果。

注释

要排序脚本的加载，您需要创建一个名为 '_reference.js' 的文件夹（如果不存在），并列出加载 js 文件的顺序。此文件必须与您的 js 文件位于同一目录中。

/// <reference path="jquery-2.0.2.js" />
/// <reference path="jquery-2.0.2.intellisense.js"/>
/// <reference path="jQuery.Placeholder.min.js"/>
/// <reference path="modernizr-2.6.2.js" />
/// <reference path="jquery-ui-1.10.3.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="jquery.unobtrusive-ajax.js"/>
/// <reference path="jquery.bpopup.min.js"/>

参考文献

  • Darren Whitfield 饰“作者” - 2013 年 7 月 4 日 – 资料来源：各项目、常识和各种研究。 
© . All rights reserved.