梦想的港湾

纸上谈兵之高性能Web开发

独自流浪 — Fri, 18 May 2012 11:48:23 +0000

今天一连两次被问到简历中提到的高性能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 哈哈

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

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

数据库课程设计第一天

独自流浪 — Mon, 14 May 2012 01:35:47 +0000

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

题目是库存管理系统。

目标：

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

功能要求：

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

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

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

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

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

WP External Links是个好插件

独自流浪 — Mon, 07 May 2012 05:31:02 +0000

效果如下：

我的新浪微博

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

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

知呼前端工程师面试题目

独自流浪 — Sat, 21 Apr 2012 06:47:31 +0000

题目

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

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

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

update:

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

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

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

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

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

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

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

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

关键时候又给重置连接了？

独自流浪 — Fri, 13 Apr 2012 02:14:02 +0000

今早打开博客，上不去，SSH也连接不上~

第一时间登录VPS后台，发现VPS运行一切正常，问题来自网络部分~

SSH改备用IP登录，备用IP没问题~

ping 域名，一切正常，和上次一样，ping得通但是无法访问~

不管那么多，先启用CDN再说，这样就饶开了基于IP的封锁~

抽风的网络~

我心中的页面重构

独自流浪 — Thu, 12 Apr 2012 14:19:03 +0000

前言：

今天第一次堵门口，霸面了一把，不是什么光荣的事。面试临走的时候，面试官要我今晚把作品以及简历发给他看看，并强调只要重构相关的。

直到今晚，我纠结半天，才发现我的很多作品，都是半吊子，都不能很好的展示我的重构技术。

正文：

页面重构是什么？

从字面上，页面重构就是要把曾经因为种种原因，开发出来的，但是对已经不适应现代社会发展的页面进行重写。7前年的表单布局，各种IE6的bug，再到后来的DIV泛滥。

而今，我认为页面重构被赋予了新的使命。

这里引用彪叔的一句话

“别在纠结IE6了，别在纠结各种hack”

IE6的各种bug已经都很完美的解决方案，最好的办法是直接给IE6上一套单独的样式，或者直接选择不兼容。

重构应该往前看，不再是传统的页面仔，不再是PSD -> HTML这么苦逼的活。

Html5、jQueryMobile等技术的出现，让我们可以快速地将现有产品转向移动互联网方面，占用手机平台。

响应式设计，让页面能够快速匹配多钟分辨率屏幕。

渐进增强的设计模式，抛弃了各浏览器必须表现一直的做法，取而代之的是充分发挥个浏览器的私有特性，为用户展示更加美妙的效果。

看完上面，有人可能会觉得我有点激进。产品的后续维护依然要有人进行，虽然有CMS，但是还是需要重构人员来完成部分特色页面的工作。苦逼工作总得有人做，我也很乐意做，只是我的思维不会止步于此。

今晚师姐、同学、以及面试官都有问到我，为什么我要报重构，而不是开发类的，我是真心想在重构上面做下去吗？

我是从页面重构，走进的互联网、走进外行人中的“专家”、走进Coding。

但对于真正的编程开发，我清楚自己有几斤几两，不是这方面的料。

我喜欢重构，喜欢重构中的思想。做开发是不得已，做开发也仅仅是我一个业余乐趣，像工匠般，自己动手，丰衣足食。

所以，我选择重构，希望重构这个岗位，是我步入互联网公司的敲门砖。

结语：

今天面试官问到，页面重构的核心思想是什么？我还是第一次听到这样的问法，就把我心里面的感觉说出来吧。

分离、复用、持续维护

分离是指行为、样式、结构分离，最简单的例子就是HTML文档、JS、CSS分开文件。

复用是在分离的层面上，把可以重复使用的东西，放在一起，一次定义，多次使用。比如CSS里面设置一个.fl专门用来放置浮动的，需要的时候只需要给该HTML标签添加class=”fl”即可。

持续维护，这里有两层含义：

重构对象通常是已经在提供服务的页面，任何重构的操作，都必须保证页面的可用性，防止因为重构的失误导致服务终止。
代码可读，罗马城不是一日建成的，页面也不是一个人月能够完成的，总是会有合作，总是会有迭代，必须保证代码的可读性。

平时我几乎不用的CSS相关内容

独自流浪 — Sat, 07 Apr 2012 14:45:09 +0000

布局 Layout

visibility

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间
如果希望对象为可视，其父对象也必须是可视的。

=*=*=*=*=

背景 Background

background-size

检索或设置对象的背景图像的尺寸大小。
该属性提供2个参数值(特性值cover和contain除外)。
如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。

=*=*=*=*=

字体 Font

font-variant

设置或检索对象中的文本是否为小型的大写字母。

=*=*=*=*=

选择器

兄弟选择器 (E~F)

属性选择器 Attribute Selectors 权重与Class一样，为10

=*=*=*=*=

属性Hack

_：选择IE6及以下。

老实说，这次的卷子，和上次的很不一样，虽然用的时间一样，但是感觉很不同~

平时几乎不怎么使用这样的东西，偶尔用到，也就是上网查一下就出来了，这次真被考惨咯~

jQuery Select菜单二级联动

独自流浪 — Sun, 11 Mar 2012 17:33:05 +0000

应用：

参考地址：

http://wlog.cn/javascript/jquery-select.html

但文中代码只是在UI上实现了要求，在功能上，还会遇到问题。

假如这是一个表单，那么，在提交的时候，POST里面，会有多组city所对应的值。

解决方法：

1、给city所在的select去掉name标签，使其无法提交到POST
2、给选中的city的select添加name标签，使其该选中的city的值可以通过POST等方法进行传递

代码重现：

通过该方法，POST中就会得到city的唯一值

Ubuntu10.04下安装MongoDB

独自流浪 — Tue, 21 Feb 2012 09:40:59 +0000

通过apt-get方式安装MongoDB到Ubuntu上面

因为需要使用第三方的源，所以除了在sources.list上添加对应的源外，还要有增加相应的公钥Key才能正确安装软件。

通过apt-key增加MongoDB的公钥Key到本地Key数据库

apt-key adv --keyserver keyserver.ubuntu.com --recv 7F0CEB10

编辑/etc/apt/sources.list,添加MongoDB软件源

deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen

老版本Ubuntu请改用下面这个源
deb http://downloads-distro.mongodb.org/repo/debian-sysvinit dist 10gen

添加好源之后，我们就可以直接通过apt-get安装MongoDB了

#更新本地软件包列表信息
apt-get update
#安装MongoDB
apt-get install mongodb-10gen

通过apt-get方式安装后，默认MongoDB是已经启动了的，可以通过下列方式查看

netstat -tlunp
tcp        0      0 0.0.0.0:27017           0.0.0.0:*               LISTEN      15048/mongod

有显示有端口被Mongodb监听了，就意味着MongoDB已经正常运行了

MongoDB的配置文件位于/etc/mongodb.conf

重启MongoDB

/etc/init.d/mongodb restart

梦想的港湾

纸上谈兵之高性能Web开发

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

高性能实践军规

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

数据库课程设计第一天

WP External Links是个好插件

知呼前端工程师面试题目

关键时候又给重置连接了？

我心中的页面重构

平时我几乎不用的CSS相关内容

最近做的几件事

成员管理系统

WordPress主题

结语

jQuery Select菜单二级联动

Ubuntu10.04下安装MongoDB