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

<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

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

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