网站内容添加(CDN优化网站设计的优化是一个很大的话题(一))

　　网站内容添加(CDN优化网站设计的优化是一个很大的话题(一))

　　前言

　　网站设计优化是一个很大的话题，对于不同的开发平台有一些通用的原则和一些建议。这方面的研究从未停止过，我也在不同的场合分享过这个话题。

　　作为一般原则，雅虎的工程团队给出了 35 个最佳实践。请参考 Best Practices for Speeding Your Web Site 获取此列表，他们还发布了相应的测试工具 Yslow

　　我强烈建议所有 网站 开发人员学习这些最佳实践并将其应用到他们的实际项目中。在接下来的一段时间里，我会结合开发平台ASP.NET，以一系列文章的形式对这些原理进行讲解和演绎，帮助大家更好的理解这些原理，更好的使用。

　　准备好工作了

　　为了能跟随我进行后续学习，需要准备以下开发环境和工具

　　Google Chrome 或 firefox，并安装 Yslow 扩展程序。请注意，此组件由 Yahoo 提供，但目前没有适用于 IE 的版本。您应该熟悉这些浏览器的开发人员工具，您可以通过按 F12 键来调出这些工具。Visaul Studio 2010 SP1 或更高版本，建议使用 Visual Studio 2012。需要对ASP.NET开发的基本流程和核心技术有很好的了解。本系列文章基础知识很难普及。本文要讨论的话题

　　我和你讨论的这篇文章是第十六条原则：（延迟或按需加载内容）

　　在页面加载过程中，除了页面本身的内容之外，可能还需要加载很多额外的资源，比如我们常说的：

　　脚本样式表图像

　　在之前的文章中，我对脚本和样式表做了一些优化建议，请参考

　　优化网站设计（二）：使用CDN

　　优化网站设计（五）：将样式定义放在顶部

　　优化网站设计（六）：将脚本定义或引用放在文档底部

　　优化网站设计（八）：引用脚本文件和样式表作为外部文件

　　优化 网站 设计（十）：最小化 JAVASCRIPT 和 CSS

　　优化网站设计（十个二）：去除重复脚本

　　该原则的核心是：延迟加载或按需加载。首先，让我们以我们最常使用的脚本为例。

　　脚本的按需加载

　　我们可以想象，在一个真正的网站项目中，会有各种各样的脚本文件，其中也收录了很多基础框架（如jquery、knockoutjs等），这些脚本文件可能或多或少都需要页面中引用。问题是，如果页面成倍增加或复杂，我们可能无法确切知道页面是否真的需要脚本。（不是这样吗？），一个糟糕的解决方案是在母版页中一次收录所有可能的框架脚本。你做了这个了吗？

　　如果你这样做了，那么，也许可以暂时解决这个问题。但实际上有一个问题。在某些页面上，可能只使用一个脚本库，但为了您的方便，以后需要加载所有脚本库。

　　随着项目的进一步发展，脚本之间的依赖关系会越来越复杂，维护这些脚本确实是个大问题。

　　雅虎团队在编写此原理时，提到了他们开发的用于实现按需加载脚本的组件。该组件称为 GET，收录在 YUI 工具包中。，这意味着脚本和样式表可以按需动态加载。

　　我对 YUI 没有做太多的研究，但实际上在过去的几年里，Javascript 技术突飞猛进，涌现出更多的创新设计。比如我今天要讲的requirejs。

　　让我用一个简单的例子给你解释一下

　　

　　这里是一个简单的网站，主页叫做Default.aspx。根据我们的设计，这个页面需要加载jquery，可能还有一些其他的库，然后执行一些自己的逻辑。因此，我们将有以下脚本参考

　　这样做有什么问题吗？当然不是。只是，我们之前讲过，这种预加载所有脚本的方式可能会造成资源的浪费，而且页面中引用了这么多脚本很容易造成混乱。为了更好地说明这一点，让我向您展示一个真实的场景：

　　我们希望页面加载时，只下载jquery库。只有当用户点击页面上的按钮时，我们才会下载淘汰库。

　　瞧！这称为按需加载。那么让我们看看我们将如何使用 requirejs 来实现这个需求？

　　首先，您可以通过 Nuget 包管理器获取 requirejs 库。

　　

　　然后，在页面中，您只需要定义脚本引用，如下所示。（以后只需要在你的页面中有这样的引用即可）

　　这里的 data-main 指的是主脚本。require.js 是一个将首先下载的脚本。您确实可以编写以下内容

　　但是，如您所见，.js 可以省略。

　　接下来，在default.js中，脚本应该怎么写呢？这是一个简单的例子

　　///

///

///

//对requirejs进行一些基本配置

requirejs.config({

paths: {

jquery: "jquery-2.0.0.min" //指定一个路径别名

, knockout: "knockout-2.2.1"

}

});

//声明下面的代码是需要jquery这个库的

require(['jquery'], function () {

$(function () {

alert("Hello,jquery!");

});

});

　　我们看到第一部分是requirejs的基本配置，我们定义了两个别名。然后在第二部分，我们声明下面的代码需要jquery库。

　　运行页面后，我们可以在浏览器中监控脚本下载行为如下

　　

　　和我们想象的一样，先加载require.js，再加载default.js，再加载jquery.js

　　有点意思，不是吗？虽然最终结果也加载了jquery，但是这种加载方式与直接在页面中定义引用，按需加载是有本质区别的。如果你对此不太认同，那么在阅读了下面的例子之后，相信你会认同的。

　　我们需要在default.js文件中为页面上的按钮订阅点击事件，我们希望只有当用户真正点击按钮时，才会下载另一个脚本（knockout），看看如何实现这个需求吧？

　　///

///

///

//对requirejs进行一些基本配置

requirejs.config({

paths: {

jquery: "jquery-2.0.0.min" //指定一个路径别名

, knockout: "knockout-2.2.1"

}

});

//声明下面的代码是需要jquery这个库的

require(['jquery'], function ($) {

$(function () {

//只有用户点击了某个按钮，才动态加载knockoutjs

$("#test").click(

function () {

require(['knockout'], function (ko) {

alert(ko.version);

});

}

);

});

});

　　 

　　同样的，我们可以通过浏览器监控工具了解脚本下载的流程：

　　页面加载的时候，仍然只有三个脚本下载了

　　//images0.cnblogs.com/blog/9072/201305/16152714-f49883010c834f2892a39ce316afb275.png

　　//images0.cnblogs.com/blog/9072/201305/16152715-6eb907b58cd*敏*感*词*b07b3ca6c7c2735d5e2.png

　　同时，从下面的对话框来看，也可以断定确实是执行了相应的脚本的。因为我们当前使用的knockout脚本的版本确实是2.2.1。

　　//images0.cnblogs.com/blog/9072/201305/16152715-c303e8f79b874bcb8ad8919ef6b6f186.png

　　 

　　这的确是一个很不错的机制。如果大家有兴趣，还可以继续深入研究，现在jquery为了更好地满足动态加载和按需加载的需要，甚至都提供了模块化的版本。请参考 http://projects.jga.me/jquery-builder/

　　样式表文件的按需加载

　　我相信按需加载脚本文件的设计足以引起您的兴趣。自然，你可能会有这样的疑问，能否实现样式表的按需加载？

　　听起来不错，应该不难，但是没有现成的实现。当然，可以使用 YUI 中的 GET。

　　官方requirejs有解释，有兴趣可以参考

　　他们还提供了一个建议的脚本来按需加载样式表

　　function loadCss(url) {

var link = document.createElement("link");

link.type = "text/css";

link.rel = "stylesheet";

link.href = url;

document.getElementsByTagName("head")[0].appendChild(link);

}

　　您可以在任何地方访问此脚本并调用它。例如，我执行以下操作

　　///

///

///

//对requirejs进行一些基本配置

requirejs.config({

paths: {

jquery: "jquery-2.0.0.min" //指定一个路径别名

, knockout: "knockout-2.2.1"

}

});

//声明下面的代码是需要jquery这个库的

require(['jquery'], function ($) {

$(function () {

//只有用户点击了某个按钮，才动态加载knockoutjs

$("#test").click(

function () {

loadCss('default.css');

require(['knockout'], function (ko) {

alert(ko.version);

});

}

);

});

});

function loadCss(url) {

var link = document.createElement("link");

link.type = "text/css";

link.rel = "stylesheet";

link.href = url;

document.getElementsByTagName("head")[0].appendChild(link);

}

　　按需加载图像

　　在本文的最后一部分，我们来谈谈图像的按需加载。如果你的页面收录很多图片，掌握这个原理对提高页面的加载速度有很大帮助。

　　你可以想象一个图片搜索引擎的结果页面，比如

　　我搜索了微软，毫无疑问这会返回数千张图片。

　　

　　

　　那么，这些图像是否必须一次全部加载？显然不可能，你可能会说，做分页会更好吗？分页通常是一种很好的技术，但是在搜索引擎页面中，分页并不是一个好的选择（因为用​​户不一定愿意点击页面导航按钮），目前图像搜索引擎的主流做法是不使用分页，而是在用户滑动滚动条时按需获取图像。

　　这是一个相当重要的设计，但稍加思考，这应该不是一件容易的事。幸运的是，Yahoo 的团队提供了一个很好的组件（ImageLoader），可以开箱即用：

　　有几个关于这个组件使用的在线演示页面：

　　如果你习惯使用jquery，那么你可以参考下面的说明