优化网站设计(二):使用CDN

news/2024/5/9 22:05:44/文章来源:https://blog.csdn.net/weixin_30783629/article/details/96326328

前言

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

作为通用的原则,雅虎的工程师团队曾经给出过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的开发基本流程和核心技术有相当的了解,本系列文章很难对基础知识做普及。

本文要谈讨论的话题

这篇文章,我将来和大家探讨CDN的问题,这是第二条原则,相关概念可以参考这里 http://developer.yahoo.com/performance/rules.html#cdn

我将从几个方面来介绍这个话题:

1.什么是CDN?

CDN的全称是Content Delivery Network,中文直译过来是:内容交付网络。它的主要意思是,将某些内容进行交付的网络。对于网站开发而言,我们所讲的内容通常指的是内容文件(例如javascript,css,图片等等),也就是说,这里所说的CDN的意思是指,建立(或者使用)一个更加有利于交付这些内容交付的网络。

2.为什么需要CDN?

我们必须承认,在很早的时候,是没有CDN的概念和需求的。那时候我们网站所需要的javascript等文件,就是放在我们的网站目录中,其实这也是一种内容交付的方式,而且往往还是比较高效的。但直到有一天,我们做了各种各样的网站,我们就会发现另外一个问题:就是针对同一个javascript文件,浏览器可能会缓存多个版本,例如下面这个截图所示

image

之所以会这样做,是因为浏览器是根据域(Domain)来缓存内容资源的,只要域不一样,那么它就需要重复下载这些资源,而且使用同样的方式将它们缓存起来。

但是,这会带来一些小的问题:重复地下载,缓存这些同样的脚本文件是需要占用带宽和本地缓存文件空间的

于是,人们想出来一个解决方法:既然浏览器是根据域来区分这些内容资源的,那么是否可以将这些内容都放在统一的一个域里面呢?这样就算是我们有很多网站,我们都可以使用同样的地址引用这些内容资源,那么就不会产生重复下载和缓存的问题了。

 

3.如何使用CDN

很多问题,关键在于想到了,只要想到了,接下去怎么做其实不难。就好比我们现在讨论的这个CDN的问题。

我们可以继续以博客园的主页为例来进行分析

image

发展到今天,我们知道博客园是有很多站点的,例如www.cnblogs.com, news.cnblogs.com , q.cnblogs.com 等等。他们应该或多或少都会用到jquery这个通用库。那么博客园是怎么做到底呢?

从上图中我发现,他们做了一个所谓的公用的子站点:common.cnblogs.com ,里面存放了他们使用的jquery最终的版本。

实际上这就是一个最直接也是最简单的使用CDN的做法:如果你有很多站点,他们之间可以共享某些内容(例如javascript,css,image等),那么与其每个站点放一份,就不如将他们统一地存在在一个地方,这样就可以减少下载的次数和缓存的体积了。

这样做还有一个好处就是:由于主流浏览器对于同一个域所允许保持的连接数都是有限制的(可参考 http://www.impng.com/web-dev/browser-max-parallel-connections.html 的介绍),HTTP 1.1协议甚至明确地建议将这个连接数限制为2(Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion)。那么,我们采用CDN的做法来将某些内容放在不同的域里面,从一定意义上可以增加下载的并行度。关于这个原则,也可以参考 http://developer.yahoo.com/performance/rules.html#split 

 

除了上述的做法(自己单独建一个站点来保存这些内容资源),如果你是做一个互联网应用,那么还可以享受到一些业界知名的厂商所提供的CDN服务,他们将很多最常用的javascript库,放在了统一的位置(通常他们的服务器是很快的),可以供全世界的网站开发人员免费使用,这样做的好处是扩大了共享的范围,例如如果你要访问cnblogs.com ,它使用jquery的库,也许你在访问microsoft.com的时候就下载过了,所以连第一次都无需下载。

这些提供CDN服务的厂商有:

微软的CDN服务

http://www.asp.net/ajaxlibrary/cdn.ashx

image

Google的CDN服务

https://developers.google.com/speed/libraries/devguide

image

选择谁的服务,完全取决你自己的喜好。事实上,他们的用法也很接近,例如

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js" type="text/javascript"></script>

 

另外,我在上一篇文章中提到了为了减少请求数,我们可以采用Bundle的形式将多个文件进行打包合并,如果遇到我们希望对某个文件使用CDN的情况,应该如何改进呢?请参考下面的代码

            config.UseCdn = true;config.Add(new ScriptBundle("~/jquery", "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js").Include("~/scripts/jquery-2.0.0.min.js"));

需要注意的是,只有当web.config文件中,将compilation的debug设置为false,才会使用CDN, 否则将使用本地的文件。这也是为什么我们需要定义两个路径的原因。

<compilation debug="false" targetFramework="4.5"/>

 

看起来不错,不是吗?但是CDN的使用,也有一些额外需要考虑到负面作用。

 

4.使用CDN的负面作用

使用CDN,尤其是使用第三方的CDN,需要考虑网络的可到达性。这些内容既然是Host在别人的服务器上面,那么从一定意义上说,并非很可控。例如,因为众所周知的原因,我上面没有使用Google提供的CDN地址。

另外,使用CDN因为会涉及到多个域,那么将违背下面两条原则:

Minimize HTTP Requests (这个我在上一篇文章详细介绍过)

http://developer.yahoo.com/performance/rules.html#num_http 

Reduce DNS Lookups (后续再介绍)

http://developer.yahoo.com/performance/rules.html#dns_lookups

 

很惊奇吗?为什么这些原则(同时也号称为最佳实践)会自相矛盾呢?其实一点都不奇怪,世界本来就是辩证统一的。这些矛盾是客观存在的,我们要做的是,综合他们的利弊,进行权衡。你说呢

转载于:https://www.cnblogs.com/haiyabtx/p/3622692.html

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

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

相关文章

边玩边学,15个学习Python 的编程游戏网站

经常听到有朋友说&#xff0c;学习编程是一件非常枯燥无味的事情。其实&#xff0c;大家有没有认真想过&#xff0c;可能是我们的学习方法不对&#xff1f; 比方说&#xff0c;你有没有想过&#xff0c;可以通过打游戏来学编程&#xff1f; 今天我想跟大家分享几个网站&#…

实战CENTOS6.5安装docker并创建asp.net mvc 5 镜像,运行MVC 网站

Docker&#xff0c;容器&#xff0c;让研发、测试、生产同一环境&#xff0c;可在linux平台上混合使用JAVA与net 程序 Centos6.5安装docker 参考http://my.oschina.net/kcw/blog/355612 rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm …

一个小破网站,居然比 Python 官网还牛逼

前两天&#xff0c;我发现有个前同事写的 Shell 脚本经常在出问题&#xff0c;考虑这个脚本一直挺不稳定的&#xff0c;维护起来也挺头疼&#xff0c;原因是 Shell 脚本写稍微复杂一点的逻辑&#xff0c;代码就变得十分臃肿&#xff0c;对比 Python 真的太差劲了。 这个 Shell…

程序员接单网站哪个好?

国内远程工作平台&#xff0c;接单平台 1、CODING 码市 官方网站&#xff1a;https://mart.coding.net 著名的Coding旗下的互联网软件外包服务平台&#xff0c;平台以外包为主。 2、 开源众包 官方网站&#xff1a;https://zb.oschina.net/projects/list.html 开源中国的…

如何从BBC网站学习英语

转载于:https://www.cnblogs.com/yymn/p/4614286.html

Win7用IIS发布网站系统 部署项目

1.首先确保系统上已经安装IIS 【控制面板】→【程序】→【程序和功能】→【打开或关闭Windows功能】 选中Internet 信息服务下面的所有选项&#xff0c;点击确定。 2. 获得发布好的程序文件 若没有发布&#xff0c;则在项目上右击&#xff0c;选择发布。注意发布方法选择文件系…

部署网站上线至服务器(华为云 Centos7.5+宝塔面板)

前言&#xff1a;此文档技术含量较低&#xff0c;适合初学者阅览&#xff0c;大佬们请移步。本人小菜鸡&#xff0c;大佬们轻点喷&#xff0c;公网IP给出&#xff0c;信息安全实验室的大佬们不要入侵俺&#xff01;&#xff01;&#xff01;&#xff08;写的代码应该有很多的漏…

ASP.net网站访问异常

解决方案 出现这个bug的原因是由于&#xff0c;net.framwork版本问题&#xff0c;以前PC上装的4.0版本&#xff0c;故会报错&#xff0c;安装net.framwork 4.5异常消失。 END&#xff01; 转载于:https://www.cnblogs.com/changbo/p/5336379.html

在IIS中浏览网站时出现:无法打开登录所请求的数据库 ***,登录失败

在IIS中发布Web应用程序后&#xff0c;浏览网站时出现无法打开登录所请求的数据库 "***"&#xff0c;登录失败错误&#xff0c;如下图所示&#xff1a; 解决办法&#xff1a;打开系统Web.Config配置文件&#xff0c;查看数据库连接串是否为Windows身份验证方式&#…

网站实现微信登录之回调函数中登录逻辑的处理--基于yii2开发的描述

上一篇文章网站实现微信登录之嵌入二维码中描述了如何在自己的登录页面内嵌入登录二维码&#xff0c;今天的这篇文章主要是描述下在扫码成功之后微信重定向回网站后登录逻辑的处理&#xff0c;其实也就是验证身份信息&#xff0c;授权用户登录的逻辑。这里说句题外话&#xff0…

据说这是最详细软件测试电商网站测试实战教程总结

目录&#xff1a;导读一、兼容性二、UI测试三、用户体验测试UE四、购物流程及购物规则测试五、支付流程六、订单流程测试七、性能&#xff0c;响应速度测试八、重点&#xff08;总结&#xff09;一、兼容性 &#xff08;1&#xff09;主要是在浏览器兼容 &#xff08;2&#x…

chrome无法从该网站添加应用、扩展程序和用户脚本的有效解决方法

解决方案 第一步&#xff1a; 新建一个标签页&#xff0c;在地址栏输入&#xff1a;chrome://flags/#extensions-on-chrome-urls并按回车键 将值改为enabled OK了&#xff0c;就可以完美解决了

OpenCMS模板的导出和OpenCMS网站的导出

1、OpenCMS模板的导出 &#xff08;1&#xff09;切换到Administration视图&#xff0c;单击Module Management&#xff0c;如图所示&#xff1a; &#xff08;2&#xff09;导出位置&#xff1a;tomcat根目录\webapps\opencms\WEB-INF\packages\modules\文件夹下cn.mysite.tem…

网站开发技巧参考大全

事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗…

DNS原因导致的不能访问网站问题一例

友情提示&#xff1a;大家可以了解下以下在这次问题解决中用到的一些技术名词&#xff1a;智能DNS和BGP了。双线及策略路由。公司的业务发展很快&#xff0c;在偶的老家郑州市和河南建业合作开了新的项目&#xff0c;而且二七塔附近的华联商厦亦在我们的管理之下。基于此&#…

2020年拟在山东招生普通高校专业(类)选考科目要求 网站数据爬虫实战

需要爬取 1622 个高校的数据 , 序号 ,地区 学校代码 , 学校名称 , 选课科目要求 , 学校网址 。 因为此网站禁用了右键, 所以直接用 python 代码分析 网站html 。 form 表格的 一行 html代码如上 。 都是在 td 标签下, 直接改中国大学排名定向爬虫实例 代码。 (1) 获取 ht…

高并发高流量网站架构

高并发高流量网站架构(转) Web2.0的兴起&#xff0c;掀起了互联网新一轮的网络创业大潮。以用户为导向的新网站建设概念&#xff0c;细分了网站功能和用户群&#xff0c;不仅成功的造就了一大批新生的网站&#xff0c;也极大的方便了上网的人们。但Web2.0以用户为导向的理念&a…

C# seo测试小工具1:同时更新多网站的博客(csdn,cnblogs,163,sina)

这几天我一个朋友在学seo&#xff0c;老师要求学生们同时发表一篇博客来测试百度的排名系统。所以就有了这个小程序&#xff0c;给同样有这方面需求的朋友们一个参考&#xff0c;下面介绍一下实现方法。 国内的这几个网站都实现了国际通用的博客api&#xff1a;MetaWeblog。通过…

建站手册-浏览器信息:Internet Explorer 浏览器

ylbtech-建站手册-浏览器信息&#xff1a;Internet Explorer 浏览器1.返回顶部 1、http://www.w3school.com.cn/browsers/browsers_internetexplorer.asp2、Internet Explorer 是目前使用最为广泛的因特网浏览器。 Internet Explorer 8 2009 年 3 月 19 日&#xff0c;微软发布…

做网站用UTF-8还是GB2312?

2019独角兽企业重金招聘Python工程师标准>>> 经常我们打开外国网站的时候出现乱码&#xff0c;又或者打开很多非英语的外国网站的时候&#xff0c;显示的都是口口口口口的字符&#xff0c; WordPress程序是用的UTF-8&#xff0c;很多cms用的是GB2312。 ● 为什么有这…