Copysnoopy

对于那些没有很好规划站内用户头像尺寸的产品，会让你很头痛，虽然可以用clip属性来处理，但是这只是一个临时解决方法，如果这个尺寸常被站内UI使用，那么还是跑一边数据，让每个用户都有一个标准的头像尺寸为好。

处理方法：clip剪切了一幅图像

对于一个刚刚从产品部门独立出来的FED(Front End Develop and Design)部门，本次会议重大。为了控制产品质量和线上bug的产生，我们提出了一个已经是业内规范的规范，以便于前端和产品的沟通效率和质量，对于一个产品人员和前端人员协作中遇到的问题，我们针对这些问题给出了具体的意见和建议，这些解决方法可能不全对，但是我们会在日后的工作中不断去完善这个业务流程和条件。

●项目中前端需要的产品业务流程：
1.产品需求讨论会之前，需要至少提前半天发需求文档给FED部门。
2.第一次会议，聆听产品解析需求文档，前端与产品、后台技术沟通产品原型、功能实现的修改意见。（前端首先要充分去理解产品）
3.第二次会议，产品需求修改完毕、设计图(psd、png)完成，进一步沟通需求或可能存在的微调，同时确定本次产品上线业务(或分期上线部分业务)，并制定前端开发时间。
4.开发中需求的修改，需要前端开发自己来衡量：第一，部分需求的修改规划到下一版本中；第二，部分需求的修改可以在此次制定的开发时间内完成。

●前端对产品文档的需求：
1.必须给文档，拒绝口头描述包括：添加新功能的需求、修改功能的需求、业务逻辑的修改，并将这些修改整理到产品需求文档中，以便于日后的调整与维护。
2.需求文档中，需要尽可能多的交互场景（包括说明文字、图片描述），并且提供完整的交互细节。
3.需求文档中，应提供线框图（带交互的）、带文字描述的流程图。
4.不是重大产品设计漏洞的需求,应该形成一个版本后再修改，不要在开发中不断修改产品需求，影响开发效率和进度。

个人对此次会议内容的理解，前端部门需要有部门职责，也需要有部门规范，更需要有部门原则。
前端对自己要求高，是为了专业、靠谱、提高业务能力。
前端对产品要求高，是为了控制产品质量，提高整个业务开发效率，从而使产品和前端更专业，更靠谱、更好的提高业务能力。
所以，规范和原则必须要有，而且要不断去完善它，但是在具体操作上就需要大家审时度势，多沟通寻找具体解决问题的方法，合理解决问题是一种艺术。

工作职责：

1.负责网站整体前端框架的设计、搭建；

2.负责前端开发标准、规范的制定；

3.能够深入了解后端架构，为项目提供最优化的技术解决方案；

4.关注性能，能够为全站性能提升、技术运用合理性给出专业指导意见， 勤于技术创新；

5.勤于布道；

职位要求：

1.3年以上web开发和前端开发经验，有大型网站的前端架构实践经验；

2.精通各种前端框架，深入了解其开发思想以及应用范围，有独立开发框 架经验；

3.至少精通一门web前端脚本语言，有项目经验，熟悉Linux；

4.了解设计模式；

5.善于沟通，乐于分享；

如果你有以上没有提到的任 何技能，都是你的优势。

如果你觉得你够强大，够靠 谱，够热情，你可以忽略以上描述，直接来和我们面谈。我们注重技术，但更注重人。

这里就不再浪费资源重新介绍过程了，点击 使用GAppProxy建立自己的代理服务器 这里已经讲解的非常详细了，我来补充说一下自己架设遇到的其他问题：

1.按照Henry给的具体架设流程成功之后，能访问但无法登陆facebook、twitter……，需要下载补丁：fetch.py然后上传上去即可登录。

2.浏览器上twitter的工具：firefox 用echofon、chrome 用chromed bird、其他用http://twitter.cn.com

3.我用firefox多一些，当安装echofon后登陆出现弹窗“安全连接失败”时，点取消用ff打开https://api.twitter，然后永久保存此例外。

哦了！现在就不用把墙头了，可以翻过去畅游了！

近一年的网站优化工作已经完成，“疼并快乐着”这就算是我对网站优化工作的一个总结吧，迟迟没有发这篇文章，是因为的确不太敢妄谈前端有话这个复杂的话题，只希望下面内容能在大家做优化工作时有一点帮助就好。

网站优化好比减肥一样，一旦你胖起来再想瘦下去是何等之难，如果那么容易瘦下来就不会有各式各样的减肥策略，遇到这种困难时，理想、坚持和信念都将成为你坚持下去的理由和动力。

言归正传，分享一下我工作中经验，下面我会用我们站内情况来说明，我这里简单阁要给大家说一下我的具体优化流程。

网站优化工作大致可分为两类：

种类1：前端内容包括(CSS、JS、Image、dom此类优化需要逐个页面分析）

1.css：减少css请求数；去掉css表中空白字符(空格、换行、tab缩进)压缩成1行；减少css的重定义提高浏览器的渲染速度，尽量使用继承方式；减少前缀的使用或不用(ul.list、ul.list li.edit)当量达到一定程度时会降低渲染速度；使部分全局样式尽可能长时间缓存到客户端。

2.JS：js文件发布时压缩成1行，然后Gzip；偶尔你会发现在某台服务器上的某个js文件没有Gzip，原因是部分需求单更时是拖到服务器上的，没有进行压缩这种情况要严格控制。(由于目前对JS知识还比较菜鸟，JS优化经验有待以后提高吧！)

3.Image：经过分析，我们将会对图片的引用、图片合并进行优化使其更合理化，减少cssimage的http请求(日后做详述)。

4.Dom：经过前几轮优化，我们已经压缩了HTML标签无用空格、空白等，减少了无用的下载量。但是由于首页内容多、结构复杂，导致html标签太多、页面文档下载K数大，DOM存取JavaScript变慢。

优化目的：减少服务器请求数压力，减少带宽流量，加快页面渲染速度。

种类2：服务器SERVER内容包括(内容发布CDN、DNS查找、Cookie、Etags，此类数据优化适用于全站。)

1.内容发布CDN：此评级项目前F，站内有部分静态内容没有在CDN内容发布网络上，经过一轮优化后内容发布CDN正常使用，源站被迁回北京但是部分用户还是抱怨访问慢，最后得知硬件性能问题(法拉利和奥拓无论性能还是速度差别还是很大的，感觉boss有点抠门)导致除了北京、天津、河北省、西安以外的用户访问都感觉慢。

2.DNS查找：此评级项目前F，目前站内DNS已达查找次数过多已经达到40多个，需要合并，减少DNS查找可以提高用户的响应时间。(之所以会有这么多还是初期规划时，只考虑到方便没有考虑到性能所致)

3.Cookie：站内Cookie已经超过1800字节属严重超标项，希望建立Cookie列表以便日后管理与维护，优化此数据可以减少访问的响应时间。(这个要在初期就严格规范，优化这东西时还真是费了不少力气，后台开发人员随意种cookie，还不做文本记录，这种事情以后抓到要枪毙。)

4.Etags：此评级项目前F，由于站内部分内容设置了Etag，这会造成重复请求内容，影响用户的页面响应时间。(优化此项比较头疼，如果要消除前3年的静态Etag，就需要把这些内容都回源站重新获取一遍，给源站带来的压力和风险性都很高，经过几次测试最后放弃了，只能等待这部分内容过期后陆续回源站重新获取。)

优化目的：减少服务器压力，加快页面响应速度。

当然，网站优化有两种情况：
第一种情况，如果要重新架构网站，那么可以了解网站前端优化个人心得(一)，使你的网站在建设初期就能保持一个相对稳定的性能；
第二种情况，网站已经拥有复杂的静态文件结构，经手的人又很多，而且不能随便重构，里面可能会有很多的css、js、图片已经无用或只有几行代码被使用……优化这样的网站一定不能操之过急，要一步一步来，保证一切都在你的掌控之中。

[b]一、合并网站静态文件css、js、image：这是你优化一个网站的准备工作，[/b]
1.css引用结构：
*你的站内可能会有一个全站通用的base.css的基础样式表;
*然后你需要整合各频道样式表，在每个频道页面下拥有一个频道基础样式例如(blog.css、photo.css、share.css…);
*再拥有一个频道下级页面的UI样式例如(blog-list.css、blog-edit.css、blog-minalPage.css);
*然后还需要一个备用样式，内容是(用户引导，临时推广，临时广告内容等等)，已应变产品周边需求的频繁修改，使其他样式能尽量被客户端缓存(前提是你的产品经理拥有足够的前端经验，使产品设计合理化);

css合并工作总结：对于别人开发的样式表做提炼和精简，我想是每一个前端开发人员都最头痛的问题。
首先，找产品、设计提炼公共控件元素，形成空间元素库，然后我们可以根据这个库来提炼已存在的公共控件样式。
其次，提炼公共控件后，各频道下的样式文件整合成1个css文件，然后做无用内容删减。
再次，制定前端组开发规范，构建全站和各频道下的基础框架，再把各频道下的内容模块css、js和html文件模块化(这时可再次删减整合部分内容，静态结构将更为简练)。
整个过程都伴随着开发任务进行着，我们在实践中总结经验，及时调整工作方案，历时12个月基本完成了这项工作，我们的目标只实现了一半，希望今年能完成另一半。

2.js合并标准：检查js的书写规范每行结尾使用“;”号以便于日后压缩代码，建立站内js基础库，使各个功能解偶合、模块化，便于各个频道的调用。

3.合并网站的icons，对与合图每个人有着自己的理解和方法，我来说说我的方法吧：
*图片使用a.gif的1px白底图，然后填入icon命名例如：<img src=”a.gif”/>，这样合并的icons使用更灵活更容易管理和维护。
*每个频道UI图片合成1-2个图(普通UI背景图，平铺UI背景图)

注释：以上工作都完成时，你已经对整站内容了如指掌，而且合并过程中减少了css、js、image的http请求，接下来就可以做更深入的优化了。前端优化是一项

IE6、IE7下a:hover时出现英文(其他字符)和汉字的组合会出现如图bug。

解决方法是给A标签加入此属性：vertical-align:baseline;zoom:1

建议可以把这个写入全局属性里。

发现开发中经常遇到许多小问题，而大家的blog中对这种小问题都不做记录和原理说明，觉得问题不论大小，最好记录一下，以便N久候在遇到时又开始抓瞎。

开发中遇到个小问题，做一下自我记录。
文本解析的一个原理：
1.当一行中最多显示6个汉字；
2.当文案中第7个字是全角标点符号时；
结果：第6个汉字会显示在第二行，第一行只能显示5个字(如图)。

原因：很多用户没有安装flash插件，所有使用以下方法来实现file效果还是不错的。

原理：使file透明，用背景图实现。

注意：file的最大宽度可以支持到65px（如果有误差希望能与大家分享一下）

结构：

<div class=”upload-bg”>

<input type=”file” size=”1″ name=”file” />

</div>

样式：

.upload-bg{

background:transparent url(/image.png) no-repeat 0 top;

display:block;

overflow:hidden;

width:65px;

}
.upload-bg input{

cursor:pointer;

width:65px;

height:30px;

margin:0 0 0 -20px;/*调试firefox可点击区域*/

*margin:-2px 0 0 0;/*调试ie6、ie7可点击区域*/

margin:0 0 0 0px\0;/*调试ie8可点击区域*/

opacity:0;/*设置firefox的file透明*/

filter: alpha(opacity=0);/*设置ie6、ie7、ie8的file透明*/

}