梦想的港湾

今天一连两次被问到简历中提到的高性能Web开发方面的事，看来这种大标题很有诱惑力。

据我所知，国内关于高性能网站的书籍就3本，两本动物园出品，主要针对前端优化，内容也是根据雅虎军规展开来讨论。另一本是国内一作者写的，前后兼顾。

这里特地从淘宝前端技术系列课程中的PPT中截取一张图片，用来大概划分一下前后端的概念。

前端后端其实都是相对应的，不过也可以大概把看得见的部分列入前端，看不见的部分列入后端。

为什么动物园对于前端优化的就有两本，而后端优化的只有国内一本呢？

这个主要是从优化的投入产出来考虑。

有统计表明，对现有网站进行优化，后端方面只能提高20%的性能，而前端方面能提高80%的性能。

其实我认为，更深层次的原因是后端开发相对于前端开发而言，难度更大。同时整个后端的体系已经相对完善，整个发展处于一个平缓期（这里我是以这些书出版的时候算，现在各种新技术应用在分布式集群上，大大拓展单机运算能力，后端性能有了一个新的提升）。而前端方面，由于历史原因，旧的那套开发方式几乎推倒重做，所有页面都需要重新设计制作，这为前端领域带来一个前所未有的发展机会，各种对应的优化手段不断推出，一浪接一浪。

高性能实践军规

要烹饪一份美食，选材很重要，Web开发同样如此。

后端方面，使用Apache/Nginx等轻量级引擎处理替换IIS，使用Memcached对热数据进行缓存，同时使用MongoDB等NoSQL技术对传统关系型数据库做辅助横向拓展。对Apache等引擎层集群、MySQL等数据库层集群、文件集群等进行请求均衡处理、或者按权重进行负载均衡。

当然，上面的这种多层横向多站的形式，仅适用于集群，单机这么做只会白白增加各层次通讯响应延迟以及单机公共件的负担。

单机优化，同样使用轻量级程序，但是要减少整个架构的复杂性，减少层次规模。

前端方面，优化手段就多了去了。

雅虎XXX条军规（为啥XXX，因为这玩意不断在增加）。

• 减少、合并请求（典型应用：雪碧。使用雪碧需适量，过度容易消化不良）
• 使用CDN，对请求进行就近响应（典型应用：有备案的直接上国内CDN或者用SAE等、没备案的对静态文件使用又拍云CDN，效果同样不错。面对国外用户的话，选择多了去了）
• 进行浏览器缓存，对缓存文件添加Expires头部（比CDN更加强悍，直接把静态文件放到用户的浏览器上，直接加载。对于SNS等粘度较高网站效果显著，对于偶尔上上的网站，效果一般，毕竟第一次请求仍需全部文件加载，所以前端开发中，对文件体积的控制必须时刻保持）
• 开启Gzip等压缩功能（在服务器开启后，会对请求文件进行压缩后再发送，是拿CPU时间换网络流量的做法，对于现阶段CPU，无论服务器还是客户端，处理Gzip问题都不大）
• CSS放头部、JS放尾部（CSS小于JS，CSS放头部能快速加载、防止JS阻塞请求，同时先处理样式，再处理交互方面的动作）
• 避免CSS表达式（逻辑上的事情，还是交给服务器来做吧，不过这事未来也难说，谁知道哪天改成富客户端、廋服务器呢）
• 外部JS和CSS（额，这个不用说吧。请求数换页面提交）
• 减少DNS查询（解析DNS是要费时间的）
• 使用Ajax异步加载技术（图片延迟加载，把宝贵的带宽留给第一眼看到的东西）

上面我是参考书上写的，前端优化技巧繁多，但其要点有以下几个：

从制作上面控制文件体积：通过各种压缩手段，对图片和代码进行体积压缩。

多用缓存技术：CDN、浏览器缓存等。

再怎么压缩，再怎么缓存，需要请求的东西依旧这么多，总的流量依旧那么大，好吧，还有异步加载：把最最最重要的东西先进行响应，其他的慢慢来，好商量。

手机上网增加，相对服务器而言，手机还是相对很瘦的，所以别让手机处理那么多逻辑上的事。复杂的JS/CSS3等特效，在手机上能省则省吧。

结语：优化不是银弹，不可滥用。但明显不适合的处理手段，则必须要改

文中多次提到“相对”一次，要知道，优化是有前提的，没有那服药能治百病，乱开处方更会病入膏肓。

这里我还想啰嗦一下，为什么前端优化比后端优化要热闹呢？因为前端优化容易实践，实践出真理。一个WordPress，有优化和没优化立竿见影。而后端呢？谁有这样的财力物力组建自己的集群？

我经常在纠结，我的VPS是月付5刀左右，那如果我改成买5台月付1刀的组集群，把服务都分开，会怎样？？o(∩_∩)o 哈哈

再送一句话“过早优化是万恶之源”。

有时候也别想那么多，东西能做出来就是好事，有很多人用更是好事，至于多到跑不动了，到时自然有解决的方法，是不过会很痛苦。辩证的思考问题就是这么麻烦~~

昨晚同学草草地找了一份需求分析，然后整理一下，然后我们就开始做这份~

题目是库存管理系统。

目标：

• 实现库存管理的动态化。
• 强大的统计分析功能。
• 方便的查询功能。

功能要求：

• 系统初始化。
• 物料出入库管理。
• 库存物料定期盘点。
• 数据查询。
• 预警报告。
• 月底结存。
• 系统安全管理。

环境，PHP+SQL Server（数据库老师不允许使用MySQL，狂晕~~）

对题目里面的统计分析功能、定期盘点以及月底结存的概念好抽象，一时不知道是什么东西~

好吧，开始部署环境，今天开工。

SQL Server部署，只要不是在干净的系统，总是有可能遇到各种麻烦事，还是虚拟机解决较好，要是能用MySQL就没这么多麻烦事了。

效果如下：

我的新浪微博

当然，下次做主题的时候，把这个功能集成到里面去更好~

PS:这个插件还带一些rel的处理，好像对SEO有帮助吧，没研究过这玩意

题目

第一题的答案（完全自己做出来了，但是超时了）

第二题的答案（不知道为什么加个括号就能用）

第三题的答案（我的答案有点问题，等弄好了再上传 要想完美，先出主体，通过负margin+双容器）

update:

3、我之前就纳闷了，怎么上面的链接，我用Chrome可以打开，其他浏览器就打不开。刚想起，Dropbox要翻墙，我的Chrome长期是自动列表走SSH隧道的。So，想看的，要挂一下VPN或者SSH咯~~

2、三栏布局问题，假如顺序如下，貌似就没有完美的方案了。

这里有三种三栏布局的方案：

第一种绝对定位的方式，不适合这里，因为这里的section上面还有其他东西，出了文档流，后面的布局都麻烦。绝对定位适用于在最外圈的布局，内部的东西不适合，除非真的是要这个东西离开文档流。

第二种负margin的方法，我感觉挺好的，但是按照这个的DOM的顺序，也无法实现。不过平时做东西，肯定是要主体部分在前，侧栏在后的，所以比较好。那些各种负数感觉bug bug地，这个算是一个技巧吧。

第三种自浮动的方式，把主体扔最后了，我个人是不喜欢，同样也不符合我这里给限制的顺序。

1、第三题的答案还是有点问题，第二个方法很作弊，B列两端的内容被挡住了。

PS:托管在Dropbox的速度一般般啊，大家将就一下吧，Github还不会弄~