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

时间:2024-05-21 10:37:52

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加速服务,很多前端项目都选择这个。


<link combofile="common/global.html" rel="stylesheet" href="//g.mdcdn.cn/??/pc/css/common/global.css?t=1490596298" />
上面的代码如果你能完全看懂,那么这一小部分就可以不用看了。


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

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


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

反正建站之前得设计网站目录结构。
拿了这个目录结构给了好几个有经验的人看。首先胖子说建三个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的解决方案