优化网站设计（十七）：延迟或按需加载内容

news/2024/5/20 11:32:11/文章来源:https://blog.csdn.net/weixin_30821731/article/details/99533223

前言

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

作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考  Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html，同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。 接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。

准备工作

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

  1. Google Chrome 或者firefox ，并且安装 Yslow这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
    1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
    2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
    3. 你应该对这些浏览器的开发人员工具有所了解，你可以通过按下F12键调出这个工具。
  2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
    1. http://www.microsoft.com/visualstudio/eng/downloads
  3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解，本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第十六条原则：Postload Components （延迟或按需加载内容）

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

  1. 脚本
  2. 样式表
  3. 图片

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

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

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

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

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

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

  6. 优化网站设计（十二）：删除重复脚本

这一条原则的核心是：延迟或按需加载。首先来针对我们比较最经常用到的脚本为例进行讲解。

针对脚本的按需加载

我们可以想象一下，一个真正的网站项目中，会有各种各样的脚本文件，其中还包含很多基础的框架（例如jquery,knockoutjs 等），这些脚本文件可能都或多或少需要在页面中引用。问题在于，如果页面一多起来，或者复杂起来，我们可能不太能准确地知道某个页面是否真的需要某个脚本。（难道不是这样吗？），一个蹩脚的解决方案是，那么就在母版页中，一次性将所有可能用到的框架脚本都引用进来吧。你是这样做的吗？

如果你真的这样做，那么，可能可以一时地解决问题。但实际上存在一个问题，在某些页面上，可能只用到一个脚本库，但为了你的方便，以后都需要全部加载所有的脚本库了。

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

在当年雅虎的团队写下这条原则的时候，他们提到了一个他们自己开发的组件来实现按需加载脚本，这个组件叫做GET，是包含在YUI这套工具包中的。http://yuilibrary.com/yui/docs/get/  ，它的意思就是可以动态地，按需加载脚本和样式表。

我对YUI的研究并不太多，而实际上这几年，Javascript这方面的技术突飞猛进，涌现了更多的创新性的设计。例如我今天要讲的requirejs。

我通过一个简单的例子给大家来讲解吧

image

这里有一个简单的网站，首页叫Default.aspx。根据我们的设计，这个页面需要加载jquery，以及可能的其他一些库，然后执行自己的一些逻辑。所以，我们会有如下的脚本引用

    <!--传统的做法中，我们需要在页面中添加所有的脚本引用，有时候可能会加载一些不必要的脚本--><script src="Scripts/jquery-2.0.0.min.js"></script><script src="Scripts/knockout-2.2.1.js"></script><script src="Scripts/default.js"></script>

这样做有什么问题吗？当然不是。只不过如我们之前所谈到的那样，这种预先加载所有脚本的方式，可能造成资源的浪费，而且这么多脚本引用在页面中，很容易引起混淆。为了更好地说明这一点，我给大家演示一个真实的场景：

  1. 我们希望页面在加载的时候，只下载jquery这个库
  2. 只有当用户点击了页面上面的那个按钮，我们才去下载knockout这个库

瞧！这就是所谓的按需加载。那么来看看我们将如何使用requirejs实现这个需求吧？

首先，你可以通过Nuget Package Manager 获取requirejs这个库。

image

然后，在页面中，你只需要像下面这样定义脚本引用。（以后，你的页面中也只需要有这样一个引用）

    <script src="Scripts/require.js" data-main="scripts/default"></script>

这里的data-main指的是主脚本。require.js会首先下载的一个脚本。你确实可以写成下面这样

    <script src="Scripts/require.js" data-main="scripts/default.js"></script>

但是，正如你所见，.js是可以省略掉的。

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

/// <reference path="require.js" />
/// <reference path="jquery-2.0.0.js" />
/// <reference path="knockout-2.2.1.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这个库的。

将页面运行起来之后，在浏览器中我们可以监控得到脚本下载的行为如下

image

如我们设想的那样，先加载了require.js，然后加载了default.js， 然后才是加载了jquery.js

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

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

/// <reference path="require.js" />
/// <reference path="jquery-2.0.0.js" />
/// <reference path="knockout-2.2.1.js" />//对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);});});});
});
 
同样的，我们可以通过浏览器监控工具了解脚本下载的流程：
页面加载的时候，仍然只有三个脚本下载了
但是，如果点击了按钮，则会有第四个脚本下载
同时，从下面的对话框来看，也可以断定确实是执行了相应的脚本的。因为我们当前使用的knockout脚本的版本确实是2.2.1。
 
这的确是一个很不错的机制。如果大家有兴趣，还可以继续深入研究，现在jquery为了更好地满足动态加载和按需加载的需要，甚至都提供了模块化的版本。请参考 http://projects.jga.me/jquery-builder/

 

针对样式表文件的按需加载

我相信按需加载脚本文件这样的设计，足够引起你的兴趣了。很自然地，你可能会有这样一个问题，能不能实现对样式表的按需加载呢？

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

requirejs的官方有一个解释，有兴趣可以参考一下  http://requirejs.org/docs/faq-advanced.html#css

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

function loadCss(url) {var link = document.createElement("link");link.type = "text/css";link.rel = "stylesheet";link.href = url;document.getElementsByTagName("head")[0].appendChild(link);
}

你可以将这个脚本访问任何的地方，进行调用。例如我是下面这样做的

/// <reference path="require.js" />
/// <reference path="jquery-2.0.0.js" />
/// <reference path="knockout-2.2.1.js" />//对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);});});});
});function loadCss(url) {var link = document.createElement("link");link.type = "text/css";link.rel = "stylesheet";link.href = url;document.getElementsByTagName("head")[0].appendChild(link);
}

 

针对图片的按需加载

本文的最后一部分我们来谈谈图片的按需加载的问题。如果你的页面包含了大量的图片，掌握这个原则将非常有助于提高网页的加载速度。

大家可以设想一下图片搜索引擎的结果页面，例如 https://www.google.com/search?newwindow=1&site=&tbm=isch&source=hp&biw=1468&bih=773&q=microsoft&oq=microsoft&gs_l=img.3...1779.4076.0.4399.9.7.0.0.0.0.0.0..0.0...0.0...1ac.1j4.12.img.aajYF7y8xW8

我在images.google.com中搜索microsoft，毫无疑问，这会返回成千上万张图片。

imageimage

那么，这些图片是不是要一次性全部加载进来呢？显然不可能，你可能会说，应该做分页会不会好一些？分页通常是一个好技术，但在搜索引擎的页面中，分页不是一个很好的选择（作为用户并不见得愿意去点击页面导航按钮），目前主流的是图片搜索引擎的做法都是不采用分页，而是随着用户的滚动条滑动来按需获取图片。

这是一个相当重要的设计，但稍微思考一下，应该不是很简单的一个工作。幸运的是，雅虎的团队提供了一个很好的组件(ImageLoader)可以直接使用：http://yuilibrary.com/yui/docs/imageloader/ 

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

  • Basic Features of the ImageLoader Utility
  • Loading Images Below the Fold
  • Using ImageLoader with CSS Class Names

如果你习惯用jquery,那么可以参考一下下面这个说明

http://www.appelsiini.net/projects/lazyload

 

 

转载于:https://www.cnblogs.com/chenxizhang/archive/2013/05/16/3081941.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_747405.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

企业建站程序哪个好？

企业建站程序哪个好？

企业建站程序推荐使用的Eyoucms企业网站管理系统&#xff0c;同其它同行的企业建站系统来说&#xff0c;Eyoucms企业网站管理系统有些什么优势呢&#xff1f;1、网络的安全性是网民一直担心的问题&#xff0c;可能随时不小心就被黑掉或者被恶意挂上使得网站无法正常运营&#x…
阅读更多...
ASP.NET本质论第一章网站应用程序学习笔记1

ASP.NET本质论第一章网站应用程序学习笔记1

1.统一资源标示符 1) 格式&#xff1a;协议://主机[.端口号][绝对路径[?参数]]&#xff0c;在Http://www.kencery.com/hyl/index/login中&#xff0c;http表示协议的名称&#xff0c;www.kencery.com表示主机的地址&#xff0c;可选的端口号没有出现&#xff0c;那么&#xff…
阅读更多...
一个学习数据科学的可视化网站

一个学习数据科学的可视化网站

https://setosa.io/ev/markov-chains/ 可以通过调节样本的参数&#xff0c;理解模型在干些什么
阅读更多...
如何查找网站漏洞文件任意查看漏洞详情与利用

如何查找网站漏洞文件任意查看漏洞详情与利用

2019独角兽企业重金招聘Python工程师标准>>> 在对网站程序代码的安全检测当中&#xff0c;网站文件任意查看漏洞在整个网站安全报告中属于比较高危的网站漏洞&#xff0c;一般网站里都会含有这种漏洞&#xff0c;尤其平台&#xff0c;商城&#xff0c;交互类的网站较…
阅读更多...
单位网站老是被劫持跳转到博彩网站怎么办

单位网站老是被劫持跳转到博彩网站怎么办

这几天我们Sine安全接到一个单位服务器里的三个网站都被劫持跳转问题的客户反映在百度搜索关键词后点击进入网站直接被跳转到菠菜网站,直接在浏览器里输入网址是正常打开的,由于客户单位网站的领导比较重视这个被恶意劫持跳转的问题特别要求加班要抓紧处理解决掉这个网站安全问…
阅读更多...
phantomjs 抓取、截图中文网站乱码的问题的解决

phantomjs 抓取、截图中文网站乱码的问题的解决

2019独角兽企业重金招聘Python工程师标准>>> 1、用phantomjs抓取html乱码的解决方案&#xff1a; phantomjs --output-encodinggbk test.js http://webscan.360.cn/index/checkwebsite?urlwww.coding123.net 这两个参数可以指定编码 ... --output-encodingencoding…
阅读更多...
《大型网站服务器容量规划》——3.4　通过回归方程规划容量

《大型网站服务器容量规划》——3.4　通过回归方程规划容量

本节书摘来自异步社区《大型网站服务器容量规划》一书中的第3章&#xff0c;第3.4节,作者&#xff1a; 郑钢 更多章节内容可以访问云栖社区“异步社区”公众号查看。 3.4　通过回归方程规划容量 回归方程是统计学里面的知识&#xff0c;是一种应用数学&#xff0c;通常属于数学…
阅读更多...
Chrome 不想让 HTTPS 网站通过 HTTP 下载文件

Chrome 不想让 HTTPS 网站通过 HTTP 下载文件

你是否经历过访问的明明是一个 HTTPS 网站&#xff0c;但是有时候站内下载东西使用的协议却是 HTTP&#xff0c;这其实存在安全隐患&#xff0c;现在 Chrome 不想让这样的事情发生。 ZDNet 报导&#xff0c;谷歌 Chrome 工程师正计划在 HTTPS 网站上默认禁止一些通过 HTTP 下载…
阅读更多...
windows 2003和server 2008 取消对网站的安全检查/去除添加信任网站

windows 2003和server 2008 取消对网站的安全检查/去除添加信任网站

2019独角兽企业重金招聘Python工程师标准>>> 服务器管理器->安全信息->配置IE ESC->管理员禁用->确定并重启浏览器 正常访问网站&#xff0c;提示如下&#xff1a; 转载于:https://my.oschina.net/guiguketang/blog/3037114
阅读更多...
PHP开发网站到瓶颈了，技术上不知如何突破

PHP开发网站到瓶颈了，技术上不知如何突破

2019独角兽企业重金招聘Python工程师标准>>> 推荐的一些牛逼的博客网站&#xff1a; 风雪之隅 看几个大公司的技术博客&#xff0c;学习一下一线的开发人员都在做什么&#xff0c;就差不多了腾讯大讲堂腾讯全端 AlloyTeam 团队点评美团技术团队蘑菇街技术博客 Nginx…
阅读更多...
SEO终极算法（二）

SEO终极算法（二）

上一篇我的文章《草根站长这一年用血的教训换来的SEO终极算法》受到了许多读者的争议。今天为了迎合读者迫切的需求&#xff0c;特意写了SEO终极算法(二)&#xff0c;希望给做SEO的朋友们能有一些启发。本篇文章比较基础常识性的SEO基础的问题我就不写了&#xff0c;只写比较有…
阅读更多...
TP5实现支付宝电脑网站支付学习笔记

TP5实现支付宝电脑网站支付学习笔记

这两天在公司做一个小型WEB项目,需要有支付功能。第一次做支付宝的支付&#xff0c;踩了点小坑&#xff0c;还算顺利。激动的我赶紧记下实现的流程。第一步当然是在支付宝开放平台申请公钥私钥APPID等&#xff0c;支付宝关官方文档都有详细介绍&#xff0c;这里就省略。申请完了…
阅读更多...
chrome 如何删除对某一个网站的缓存

chrome 如何删除对某一个网站的缓存

点击F12即可
阅读更多...
云服务器 ECS 建站教程：快速搭建 phpwind 论坛系统

云服务器 ECS 建站教程：快速搭建 phpwind 论坛系统

快速搭建 phpwind 论坛系统phpwind 是采用 PHP MySQL 方式运行的开源社区程序。轻架构&#xff0c;高效率简易开发&#xff0c;帮助您快速搭建并轻松管理社区站点。phpwind 提供了 2 款完全不同的版本&#xff0c;分别是拥有成熟功能、海量插件支撑的 phpwind 稳定版&#xff…
阅读更多...
记一次JavaWeb网站技术架构总结

记一次JavaWeb网站技术架构总结

俗话说的好&#xff0c;冰冻三尺非一日之寒&#xff0c;滴水穿石非一日之功&#xff0c;罗马也不是一天就建成的&#xff0c;当然对于我们开发人员来说&#xff0c;一个好的架构也不是一蹴而就的。 初始搭建 开始的开始&#xff0c;就是各种框架一搭&#xff0c;然后扔到Tomcat…
阅读更多...
网站SSL安装配置

网站SSL安装配置

背景介绍&#xff1a;HTTPS&#xff0c;全称&#xff1a;Hyper Text Transfer Protocol over Secure Socket Layer,是通过SSL安全机制传输&#xff0c;保证网站数据不被窃听、冒充、篡改等安全风险&#xff0c;保证网站传输安全可靠&#xff0c;下面是通过nginx配置ssl模块记录…
阅读更多...
【提权过程】嘉缘网站--提权，代理，内网渗透（针对445端口）

【提权过程】嘉缘网站--提权，代理，内网渗透（针对445端口）

这篇是由上篇 【渗透过程】嘉缘网站--测试https://www.cnblogs.com/G-Shadow/articles/10964374.html之后的操作&#xff0c;文章包括了提权&#xff0c;HTTP代理及对内网的渗透 使用蚁剑连接上写入的一句话后&#xff0c;使用虚拟终端发现自己权限为最高权限可以执行任何操作 …
阅读更多...
大型网站技术架构（五）网站高可用架构

大型网站技术架构（五）网站高可用架构

2019独角兽企业重金招聘Python工程师标准>>> 网站的可用性&#xff08;Avaliability&#xff09;描述网站可有效访问的特性。 1、网站可用性的度量与考核 网站不可用时间&#xff08;故障时间&#xff09;故障修复时间点-故障发现&#xff08;报告&#xff09;时间点…
阅读更多...
大型网站技术架构（四）网站的高性能架构

大型网站技术架构（四）网站的高性能架构

2019独角兽企业重金招聘Python工程师标准>>> 网站性能是客观的指标&#xff0c;可以具体体现到响应时间、吞吐量、并发数、性能计数器等技术指标。 1、性能测试指标 1.1 响应时间 指应用执行一个操作需要的时间&#xff0c;指从发出请求到最后收到响应数据所需要的时…
阅读更多...
大型网站技术架构（八）网站的安全架构

大型网站技术架构（八）网站的安全架构

2019独角兽企业重金招聘Python工程师标准>>> 从互联网诞生起&#xff0c;安全威胁就一直伴随着网站的发展&#xff0c;各种Web攻击和信息泄露也从未停止。常见的攻击手段有XSS攻击、SQL注入、CSRF、Session劫持等。 1、XSS攻击 XSS攻击即跨站点脚本攻击&#xff08;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业