前端优化-- CDN的使用网站目录结构的设计优化原则

CDN的使用

background:url(//img.mdcdn.cn/h5/img/common/global_sprite.png)

上面的代码如果你能完全看懂，那么这一小部分就可以不用看了。

首先我先介绍一下什么是CDN。
CDN(content delivery network)中文全称是内容分发网络，是一种智能虚拟网络，在网络各个节点放置节点服务器，根据流量情况，用时情况，节点的连接情况，用户的距离情况及相应情况综合考虑，将就近节点导向给用户，加快页面的响应速度。cdn有四个要求分别是负载均衡，内容管理，网络请求重定向，分布式存储。其中负载均衡和内容管理是cdn的核心。cdn其实代表的是一种网络应用服务模式。

举个例子：美的用的cdn是mdcdn,这个cdn一般用于大型企业，你可以在openhub网站里找到。美的它的网站上有大量的图片，如果和网页都一起放在一台服务器上的话，那得有多卡，所以它们就会选择把一些资源放在cdn上。再简单提一下BootCDN,它是前端开源项目CDN加速服务，很多前端项目都选择这个。

combo是压缩的意思，那么combofile其实就是压缩文件的意思。淘宝的cdn支持combo handler,用逗号分隔js/css，用两个??来触发combo特性，用一个问号来添加时间戳。那么是否可以理解成美的用的mdcdn服务支持combo,这句标签就是根据mdcdn的语法来写的,它把global.html和global.css合并为一个请求，并且这个global.css是放在mdcdn上的。

我发现七牛cdn并不支持combo,不过它是免费的。
推荐一个开放的支持combo的cdn的地址：https://www.jsdelivr.com/
怎么具体操作cdn,,还是看官方操作文档吧

网站目录结构的设计

建立一个复杂的网站，往往有成百上千个页面，如何建立网站主目录。网站有主页面，子页面，组合页面。组合页面是用frameset标签来写的，现在也已经过时了。主要就是主页面和子页面了。子页面会有很多个，难道都把他们放在一个目录下吗?css文件也会有很多，怎么命名，怎么组织结构？

如果上述问题，你都有很清晰的思路，那么这一部分你也可以不用看了
清晰的网站目录结构对SEO意义非凡，你得确保主目录的权重高于子目录，不然可能会出现在引擎的搜索结果中子目录网站在主目录网站，前提是你也将子目录公开了。小型网站的目录往往会采取扁平式结构，一次访问即可便利所有网页文件。大型网站的目录往往会选取树形结构，需要层级子目录去存储文件。

下面是设计网站目录结构的注意事项（来源于：https://www.zhihu.com/question/23711882/answer/30751154）：
1.不要将所有的文件都存放在根目录下。将所有的文件都存放在根目录下会造成文件管理混乱，后期搞不清楚哪些文件需要编辑和更新，哪些需要删除，哪些是相互关联的文件，让你的工作效率变得低下。还有一点就是上传速度会变慢，我们知道服务器一般都会为根目录建立一个文件索引，如果将所有的文件都放在一个根目录下，那么你每上传一个文件服务器都会将所有的文件索引一遍，文件越多越耽误时间。所以要尽量减少根目录的文件存放数。
2.按主菜单栏目内容加你子目录。按主菜单栏目建立子目录，不仅便于文件查找，而且不会影响网站运行速度，比如企业站点可以按公司简介、产品介绍、在线订单、反馈等建立相应的子目录。根据更新要求建立和管理次要栏目。如关于本站、关于站长、网站经历等不需要经常更新的栏目独立建立子目录，方便管理并且不混乱。在每个目录下都建立独立的image目录。在网站的后期维护中，图片的管理是非常麻烦的，最好的办法就是为他们建立物理或者逻辑目录下的独立的image目录，比如不要在男装下建立所有的图片Image目录，而是在男装下的衬衫目录中建立一个独立的只容纳衬衫的image目录，这样方便添加、删除和更新。
3.目录的层次不要太深。这个很简单，就是为了方便管理和维护，同事也是为了搜索引擎爬虫易于索引到网站内容，便于网站的推广和优化，目录越深的网站，搜素引擎越不容易获取内容。
4.不要使用中文目录。使用中文目录极易出现各种错误。

主页面最好取名为index.html,主css文件一般定义为base.css.
在建立css文件结构的时候，要考虑打印，手持设备，屏幕等多种类型，必须不断地了解级联，是对选择器编组还是分离。你还需要了解异性和继承（我暂时还不懂）。是否善用他们，决定的是你建造的是系统还是垃圾。
css结构设计参考文献：http://www.cnblogs.com/radom/archive/2012/06/23/2559109

我第一次尝试着设计了一个目录结构，大家伙随便看看就行，千万别当真。

反正建站之前得设计网站目录结构。
拿了这个目录结构给了好几个有经验的人看。首先胖子说建三个protal,css,upload目录，然后再在这三个目录下再分模块建目录，HTML放protal，css就放css下面的目录，upload是上传文件的，怎么分目录就是你自己考虑。其次鸭子说我的secdir根本就不需要。胖子和鸭子都是负责后台的，写php的。我还专门问了一个前端前辈，他让我建一个static文件，专门放img,css,js这样的资源，再建一个view,放html,最后建一个models,专门放数据模型，这就是典型的MVC模式。06级的老学长和我说大公司都是用的js管理，然后打包，我想他们建网站的时候也有工具吧，实际上还真有，就是前端集成解决方案。

优化原则

大网站一般是团队开发，所以要保证成员的耦合度低，也就是常说的高内聚低耦合，所以要有统一的标准和规范。

前端工程的最佳代码部署的思考问题，一个简单的css文件怎样引用达到最优，还有静态资源怎么样管理？

在页面里引用css，你要避免用户每一次加载页面都要加载css,为了避免这个问题，你可以采用缓存机制，利用304本地缓存也叫协商缓存，可是304还是要和服务器通一次信。
好，你强制使用本地缓存不和服务器通信，那么万一文件有修改，你怎么更新？
你想到了吗。。。通过更新页面的引用路径，让浏览器主动放弃缓存，加载更新。不过也有很多的资源并没有修改，更新浪费了,那怎么办呢？这里有个算法叫做数据摘要算法，可以使url和内容相关，只有当内容修改了，才会更新。这样就实现了文件的精准控制。
静态资源如何管理：发布新版本产品事是先上线静态资源还是上线页面。先上线谁都会有页面错乱的问题，因为这是覆盖式发布会存在的问题。解决方法就是更新资源发布路径实现非覆盖式发布。
如果想看前端工程化的例子，可以看前端工程化鼻祖facebook的官网。。。

参考链接：

https://www.zhihu.com/question/20790576
前端工程最佳代码部署

http://www.oschina.net/question/587367_156426
《前端工程与性能优化》：讲解了一些性能优化原则，还有一些实用的东西，例如压缩js,css。

https://github.com/doyoe/html-css-guide
《HTML/CSS开发规范指南》：除了规范，还有写代码要注意的一些细节，例如CSS Sprite是一种将数个图片合成为一张大图的技术（既可以是背景图也可以是前景图），然后通过偏移来进行图像位置选取和内容图片建议使用JPG，可以拥有更好地显示效果

https://www.w3cschool.cn/webpo/webpo-jqueryfaster.html
<<jQuery最佳实践>>

https://www.w3cschool.cn/webpo/webpo-nodom.html
FlipBoard的解决方案

前端优化-- CDN的使用网站目录结构的设计优化原则相关推荐

关于网站目录结构需要注意的地方
网站目录就相当于一栋大楼一样,但这里的大楼并不是越高就越好.很多站长们在建设网站的初期并没有太注意这个细节,都是任由CMS自动生成,这样做其实是不对的.接下来半夜为大家讲一下关于网站的目录结构有哪些地 ...
使用 NetCoreBeauty 优化 .NET CORE 独立部署目录结构
在将一个 .NET CORE \ .NET 5.0 \ .NET 6.0 程序进行独立部署发布时,会在发布目录产生很多系统类库,导致目录非常不简洁.这给寻找入口程序造成了困难,特别是路遥工具箱这种绿色 ...
Apache下禁止显示网站目录结构的方法
中午开发小哥跑来找我,给我一个网站地址,我点开后显示的是目录格式,把网站的目录结构全部显示出来了.开发小哥说这个显示结果不正确,不应该让用户看到我们的目录结构,问我怎么解决. 我第一反应是目录权限的问 ...
首页php网站目录结构,PHPWEB成品网站超市系统目录文件结构说明
[文件系统结构特点] 软件采用模块化的结构,除了基础功能目录外,每个模块占一个主目录:每个模块下属的插件.插件模版均位于该模块目录内:每个模块的后台管理程序.会员区程序均位于模块目录内,通过菜单进行关 ...
独立站卖家如何优化落地页！20个落地页设计优化技巧与提高转化率方法！
在竞争激烈的环境中发展业务很难.在争取领导和成功的斗争中,有必要使用有效的营销工具.如果您的目标是增加销售,进行产品促销或仅仅是为了吸引新客户,请通过这些简单的目标网页设计技巧来关注目标网页的机会. ...
网站如何进行整站优化？
如果要做优化或者选择性优化,一定要区分关键词优化和全站优化,米贸搜整理如下,希望可以帮助到你: 一.全站优化的概念: 1.一般认为,全站点优化是指通过SEO技术,使其网站成为搜索引擎中的权威站点.当达 ...
网站刷关键词_中小企业网站排名如何做SEO优化 - 刷百度关键词排名
原出处:超级排名系统原文链接:中小企业网站排名如何做SEO优化? - 超级排名系统现在很多企业都有招网络负责人做优化,SEO优化是需要长期坚持的推广工作,需要把网站运营推广的该行业相关关键词理出来 ...
python优化网站_5个Python脚本优化你的网站搜索引擎优化
寻找改善你的Python网站的搜索引擎优化?然后,您需要查看这五个脚本,这些脚本可以帮助您的网站在网络上可见! Python不仅是一种惊人的编程语言,它在开发搜索引擎优化工具时也非常有用.在本文中,我 ...
DDD领域驱动设计实战-分层架构及代码目录结构
代码结构 DDD并没有给出标准的代码模型,不同的人可能会有不同理解. 按DDD分层架构的分层职责定义,在代码模型里分别为用户接口层.应用层.领域层和基础层,建立了 interfaces.applica ...

前端优化-- CDN的使用网站目录结构的设计优化原则

前端优化-- CDN的使用网站目录结构的设计优化原则相关推荐

最新文章

热门文章