整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
我对于Web网站开发开有很多年的实践经验，提供网站相应速度一直是网站开发人员孜孜不倦的追求，无论后端程序的优化，数据库的优化，还是前端的优化，最终目的只有一个，让网站更快的打开，给用户提供更好的浏览体验，这里只介绍从前端人员的角度来，在网站建设中要注意的一些原则。
1、减少网站的HTTP请求数
构造请求、等待响应需要时间，因此请求数量越少越好，减少请求的总体思路就是合并资源，减少显示一个页面需要的文件数，常规的方法有：
1.1ImageMap
通过设置<img>标签的usemap属性与使用<map>标签可以在一幅图片上切分出多个区域，指向不同的链接。比起使用多幅图片分别构造链接减少了请求数。更多网站建设和SEO案例【www.tpsem.com】
1.2.CSSSprite（CSS贴图整合/贴图拼合/贴图定位）
通过设置元素的background-position样式做到。一般用于界面图标。典型的可以参考TinyMCE编辑器上方的那些小按钮。多个小图实质是从一个统一的大图通过不同的偏移量裁剪而来，这样加载界面上的众多按钮实际上只要请求一次（请求大图一次），从而减少HTTP请求数。
2、将css样式表文件置于页面前部
先加载样式表，这样页面渲染得以较早开始，给用户页面加载较快的感觉，所以css最好放在<head></head>之间。
3、使用Gzip压缩
使用Gzip压缩HTTP报文，减小体积，减少传输时间。
4、将Js脚本放在页面底部
原因同3，先处理页面显示，页面渲染较早完成，而脚本逻辑稍后执行，这样给用户页面加载较快的感觉。
5、将JavaScript与CSS作为外联资源
这似乎与原则1中的合并思想相悖，但其实不然：考虑每个页面都引入了一个公共的JavaScript资源（例如jQuery或是ExtJS这样的JavaScript库），单就一个页面的表现来看，内联（即将JavaScript嵌入HTML）页面将比外联（使用<script>标签引入）页面加载更快（因为其较少的HTTP请求数）。但如果有很多页面都引入了这个公共JavaScript资源，那么内联方案会造成重复传输（因为这个资源内嵌在每个页面中了，所以每次打开一个页面都要将这部分资源传输一遍，从而造成网络传输资源的浪费）。而将这种资源独立出来外联引用可以解决这个问题。
6、避免使用CSS表达式
过于复杂的JavaScript脚本逻辑、DOM查找、选择操作将会降低页面处理效率。
7、压缩你的JavaScript
使用JS压缩工具压缩你的JavaScript吧，很有效哦。看看jQuery的两个不同的发行版本就知道区别了：
8、减少域名
每次请求新域名都需要进行通过DNS查找不同的域名，且DNS缓存无法发挥作用。因此应该尽量将站点组织在一个统一域名下，避免使用过多子域名，网站保留一个主域名即可。
9、尽量http避免重定向
一次重定向意味着在你真正访问到想要看到的页面前加入了一轮额外的HTTP请求（客户端发起HTTP请求→HTTP服务器返回重定向响应→客户端对新URL发起请求→HTTP服务器返回内容，下划线部分为额外的请求），因此消耗更多的时间（也就给人反应更慢的感觉）。因此除非必要，不要随意使用重定向，如果有下面的需求，可以采用重定向。
9.1.避免URL失效
旧站点迁移后，为了避免旧的URL失效，通常将对旧URL的请求重定向至新系统的对应地址。
9.2.URL美化/伪静态
在可读性好的URL与实际资源URL之间转换
10、移除重复的脚本
不要在一个页面中重复引入相同的脚本。例如脚本B和C都依赖于A，那么在使用了B和C的页面中就有可能存在对A的重复引用。解决方法，对于简单的站点手动检查依赖性，消去重复引入；对于复杂的站点则需要构建自己的依赖管理/版本控制机制。
总结：在网站制作时候把握上面9个原则，可以让我们前端页面速度和响应速度更快，网站建设中是一门比较精细的技术，希望从事前端开发的网页设计师可以知道更多的基础知识。
里妹导读：今年的双11已经是阿里资深前端技术专家舒文来阿里的第11年，从应届生到双11前端PM，他一路升级打怪，实现了岗位上从P4到P9的晋升。这第11届双11顺利结束之际，他把在阿里这些年的成长经历做一个总结和分享，希望你能在他的故事中得到些许启发。
作者简介：舒文，来自淘系技术部前端团队。目前负责淘系(淘宝+天猫)的营销活动、互动的业务，也在阿里巴巴前端委员会主导搭建体系的技术方向。
2008年10月，入职阿里巴巴日文站，以前端岗加入UED团队。日文站的业务源于阿里巴巴国际站 - 提供在线的平台化服务，专注撮合中日贸易。
在那个前端的鸿蒙年代，页面重构工程师和Javascript程序员还是两个细分职位： 在阿里，前端、交互、视觉共同划属用户体验部门。
而在部份公司，有专门的重构工程师。
在日文站亦如是：现实情况是杭州和东京的团队，具备写JS能力的工程师均不多。不少同事专注在HTML/CSS领域，且专研极深。举个例子：在日文站，所有的HTML/CSS代码必须通过两个Lint工具：HTML文書の文法をチェックし、採点します、[The W3C Markup Validation - 这让代码的规范性更好外，也能获得更好的搜索引擎分析&索引权重。
随着业务发展，需求场景多且复杂起来，对Javascript开发能力要求就越高。同时，也激发了我的技术热情。除了看书，我迫切想参与其他事业部的前端交流会。感谢时任主管的支持，我开始主动跨部门沟通，将他山之玉和学习所得有了更多结合。慢慢地，在团队内部提出一些技术方案并逐渐应用到杭州/东京两个团队 (特别感谢最早时代的D2)。
在那个阶段，我几乎参与了所有较为复杂的项目。结合当年的热门大作《高性能网站建设指南》、Yahoo网站性能优化黄金法则，负责了主站的性能优化，取得了一些不错结果。
2009年10月获得了日文站优秀员工，年底顺利晋升到新的层级(P5)。
2010年开始，业务略微调整，参与“日本买家获得”(Buyer Growth)。这个业务本质是通过平台技术优化(SEO、SEM等)获得更高的搜索引擎权重、提高Landing到转化。
在这期间，随着被认可度提升、持续的项目历练，我的自信心也得到了锻炼。除了参与更复杂的项目外，我开始主动对业务和技术体系做出一些提案(Proposal) - 包括参考Google Webmaster Guidelines进行技术优化、参与了各种SEO项目，提出了现在回想起来各种或靠谱或不靠谱的提案。非常感谢历任主管的支持和包容，让一个楞头青能够没有后顾之忧地敢想敢做。
日文站初版克隆自Alibaba.com，加之外包参与、跨东京和杭州多团队开发等原因，全站前端框架混杂，包括不限于YUI/Mootools/PrototypeJS/ExtJS/TBra等前端框架&类库混杂在同一业务甚至页面。新人上手、多人协作、性能优化的成本很高，但历史原因积重难返，大家苦不堪言。
结束一个大项目后，时值“愤青”的我对全站的代码做了个调研和分析，说服了主管们，决定启动一个重构项目——旨在将全站混杂的代码统一到 jQuery。并大体确定了执行方案：随业务迭代上线、项目成员1人，我兼任PM、开发/自测。
在之后，一个如同打了鸡血般的前端程序员，白天黑夜的翻历史PRD、熟悉代码逻辑、阅读各种类库的手册，陆续将各业务线的脚本重写了一遍，边做业务项目边重构，整个项目持续了半年多，直到11年Q1完成。
现在回想起来，有些事情真需要一股冲动，正如买房、结婚。如果主管让我再多考虑半天，我兴许就怂了。当然，人生也可能走入另外一条主线。
2011年日文站业务合入B2B，我也参加并通过新事业部的年中晋升(至P6 ) 。
2011年阿里巴巴日文站誓师大会
两段非常宝贵又特别的经历。
2011年下半年主动选择加入阿里内部的创业项目：打造一款面向个人消费者的云产品。 团队不大，20多人，各路专家云集，各负责人级别都很高。很享受这段工作旅程，我第一次参与桌面Hybrid端项目，第一次开发SPA Web应用，第一次参与跨桌面软件/PC Web/H5的项目，第一次领略敏捷管理的魅力。在来自美国的技术Leader带领下，我接触到很多新领域，极大地开阔了技术视野。
“创业失败是要承担风险的，没有加薪，没有晋升，而且还是996，直到项目成功”。第一次面试这个项目前，业务负责人，阿里工号16的虚竹告诉我。
不算幸运的是，最终这个项目没有取得如预期的成功，业务有了变化和调整。
但幸运的是：这段经历让我亲身体验了一把“创业”，也感受了技术以外的方方面面艰难。这个过程中形成的产品和业务思维，对我日后带来了深刻影响。当然，也在我之后几百次想离职创业时，这段经历让我能够静下心来思考创业的内核 - “为什么要创业？我有什么资源、能做什么事情、创造什么价值？”
忘了说，这段经历之所有特别，还因为办公地点在湖畔花园——马老师家。
湖畔花园办公场地
2012年7月，加入到天猫的前端团队。 主管给予了充分的信任，让我负责天猫H5首页的研发，开始接触淘宝前端—— 一个更成熟完整的技术体系。
2012年底，@三七 加入天猫带领前端团队，作为国内前端领域最早的拓荒者之一，他在随后的两年时间给天猫的前端技术带来体系化的变革——从模块化到工程化再到生产环境的NodeJS，并引入了Mobile First理念。在他的支持下，我带领了一支前端小组陆续参与多条业务线的开发工作。我自己也加入集团级技术建设，主导跨端Web的项目，推进了前端体系的移动化建设。
除专业技术外，花了比原来更多的功夫在团队工作上，包括不限于团队氛围、风格和文化的打造，学会在内网分享中学习借鉴前辈大拿的的管理方法论。在阿里的文化中，非常强调传承。一个人牛不算什么，让一群人厉害才算厉害，最好是让下属比自己还强。
时间花在哪儿，结果就会在哪儿。团队内一些业务尖兵逐渐冒出头来，在后来几年成为天猫甚至大淘系的中坚力量。
这个过程既痛苦又快乐。痛苦在于要做越来越多的超过自己能力层级、远离舒适区的工作，快乐的则是能明显感知到自己在这个过程中的快速成长。
很幸运，在14年年中，顺利通过晋升(P7)。
2014年注定是难忘的一年。在这一年，我开始负责营销活动的业务，并担任2014年双十一前端技术PM工作。
营销活动是一个顶有趣、富有故事的业务：
从技术上：它可以极致简洁到切一个页面上线就行，也可以复杂到如双11一般 ——它是阿里技术的年度大考。
从业务上：它既可以简单到直接把现实生活的促销活动进行虚拟世界的进行流程投射，也能如互联网史上的春运般整合零售生态和供应链。
我和多个团队在天猫制定了各个维度的技术规范，如内控标准、外包规范，有惊无险地渡过了14年双十一。
在PC时代，营销活动的研发模式，对于前端来说，实在过于“简朴”：“5到6位正式前端常年带着数十个外包，根据运营需求开发成百数千的页面，通过一个叫做TMS的运营系统预留坑位给运营同学填数据，交由后端应用推上线（CDN）。” 这类业务活动频次高、页面量大、协同成本高。某种意义上讲，对前端技术挑战并不高，为了更高效的研发，我们能做的是不断提高组件和模块复用率。
感谢TMS，它帮助前端们快速迭代出一个又一个页面，支持了集团的业务，即使在今天，它的设计思路都能称得上精巧犀利。
发生变化来自2014年双十一前，线上发生了一次令我终生难忘的离奇故障（涉及敏感信息，略过细节）：当时因临时未排查出原因，VP现场观摩面，我和CDN运维团队的同学们能做的只是不断重启集群应用缓解问题。
我作为时任前端PM，也因技术方案选择失误受到批评责罚。（时隔多年，大家也偶尔调侃，责罚不冤，幸而那天的问题提前暴露而未发生在11.11号当天，否则后果难料 ）。
那年双11最终还是完美谢幕，GMV 571亿，移动端成交42.6% ，很多人敏锐的感觉到：移动化时代到来了。
之后技术复盘，我们针对问题做了多轮讨论和推演，决定启动一个代号“斑马”的产品项目：基于我们对营销的理解，运营的实际需求、过往的技术痛点，设计一个高效的页面系统来支持运营快速发布活动上线，更重要的是它是完全的基于Mobile First设计的系统。
正所谓 “一饮一啄，莫非前定” ，因为过去一年的打磨锤炼、痛过后的反思，我们很快把方案框架敲定，并和多个业务搭档共同推进项目实施。
项目于15年初立项，我代表团队“激进”的将阶段目标定为“支撑2015年3月的春季大促” 。这种既要支撑日常高频的大促业务，又要同时从0到1做平台研发，不啻于“飞行中升级引擎”，困难很大。但我背后的思考是：“这就如同创业，没有一往无前的决心和一鼓作气的气势，等想多了细了，多半就怂了怕了”。
我负责整个系统及PM工作，团队培养出来的中坚力量们承担各个功能模块研发。为实现我们心中所定计划，整个项目组如同创业般激情，为了一个共同的目标奋进。春节假期不少同学还在主动提交代码，节后迅速返回公司继续项目。
很幸运，克服了重重困难，“斑马”项目顺利上线，并成功支持了2015年第一个S级大促。基于新的系统，我们共同把营销活动送上新的轨道：因模块化带来的效率提升让我们完全解除了外包依赖、因具备跨端能力运营们可以单次同时进行PC和无线活动、我们设计并推动了CDN构架，单在15年双11就节省了数千万预算。
随着技术迭代，“斑马”这个技术产品，在后面几年成为阿里的基础运营平台之一。
2015年5月，我参与了P8的晋升提名，结果未通过。Leader和我沟通：“成长很快，能力和规划出色，业务成果需要时间验证”。我很坦然接收了建议，晋升答辩中的技术评委的建议中肯不失公正，让我受益很大。
“但行好事，莫问前程”——在随后的时间，“斑马”的能力更为完备。我再次担任了2015年双11的前端PM工作，业务也顺利上线。那一年，双11当天GMV 912亿，移动端成交68%。
16年1月，新主管告诉我，绿色通道通过，晋升至P8。
双十一令牌/虎符
一次偶然的机会，看到一张图：如遵循民意苹果手机会变成什么样？给我带来一些对业务和技术的思考：“页面发布系统本质上是一个通用的工具平台：前端/运营/设计师都是它的用户，每个角色都有对它的功能需求。但每个新增功能在解决一类用户需求的同时又增加了平台复杂度，降低的客户的易用性，丢失掉另一类用户的民心。”
“这兴许是一个产品的轮回宿命”，我内心有些敬畏地想。带着这个敬畏，时间到了2017年，随着斑马的功能日趋复杂，我决定将运营操作平台和底层技术能力进行剥离：
随着时间推移，“天马”的开放能力不断完善，越来越多的事业部基于它构建面向业务的平台系统，带来的技术回报是：技术复用减少从0到1的研发&硬件成本、标准统一使跨业务协同变为可行。
而在技术的另外一边，业务发生着悄无声息的变化：16年双11GMV 1207亿、17年双11则是1682亿。每年双十一在如此巨大的基数下还能持续业务高增长，个性化算法、推荐技术的大规模应用起到了非常重要的作用。在全局效率上，大数据优于人工干预逐渐得到了共识。在我看来，这些变化意味着时下大家认可的大促会场模式，也将带来新的变化。
2018年2月，我在内部做了个分享，描述了对营销活动未来的预判：
基于以上预判，我和团队的小伙伴，计划联同业务、上下游技术团队共同构建一个面向营销活动的平台产品（项目代号：方舟）。
很感谢历任主管实仙/四虎的信任，愿意帮我顶住重重压力，经过多轮沟通，我们达成了一致共识。
和过去几年稍有不同的是，我逐渐把包括不限于方舟的一些重要产品放手给团队中的骨干/TL，让他们去规划、去驱动、去变革。我更多做了辅导性、资源性、业务判断的全局性工作。
随着时间的推移，越来越多的结果开始凸现：
在2018年中，提名参加晋升面试，结果未通过，技术委员会的评委们建议更多参与“集团级的技术建设、更高格局的视野”。
我很快走出了沮丧，毕竟在阿里，常胜不常有失败倒常伴。更重要是，主管 @四虎 的开导让我开始思考更全局的未来。
随后的时间，我继续投入了2018的双11前端整体工作，推进了多个端技术方案落地天猫。感谢阿里前端技术委员会主席圆心的举荐，我加入前端委员会，担任搭建技术方向的Sponsor - 旨在站在集团视角，定制标准、融合并打通搭建技术体系，在更大范围内赋能业务。
在集团内各个前端Leader的支持下，我们很快跨多个事业群达成了共识，制定完善了技术标准，基于一体化方案启动了多个层面的项目。
2019年5月，参加了年度晋升，顺利通过P9晋升。感恩。
现在，仍然有太多的事情值得去深入：
除以上，我也深度参与阿里前端技术委员会的工作：
在阿里的前端体系，除了搭建方向以外，有相当数量的跨事业群共同建设的技术方向&项目，包括不限于Serverless、IDE、智能化、中后台、数据可视化、工程化、Node技术等。这些技术方向或者始于前端，但又不止于前端，共同为打造行业领先的技术生态服务。
有期待有更多的优秀的同学加入阿里，让我们的智力和努力触碰到数以十亿计的用户。欢迎加入联系我：wenliang.shuwl [at]alibaba-inc.com
最后分享一些过往些年的的心得：
关于工作：
1.想做好一件事情前，获得上级的认可非常非常重要，这是把一件事情做成、做好的催化剂。
2.很多时候，源自“事”的困难都可以用态度解决，来自“人”的困难可以用换位思考解决。
3.对于刚参加工作的同学，如果家中无矿，啥也别说，努力就对了！毕业五年内的表现，可以决定人生很多事情。
4.如果你和领导发生分歧：拿出你的数据/理由/态度尽最大的努力去说服他，如果充分沟通还形不成共识，那就先听他的 。这不是媚上，而是“在必须达成一致的前提下，相信更有概率做出正确决定的人。”
5.在工作中，如果某个时间突然发现和往常不一样，陡然压力变大/身心疲惫，别害怕 ，因为，这有可能是你在成长、突破瓶颈前的黑暗期。
6.专业技能是立身之本。从长期来看，它是性价比最高的投资标的之一。
7.结合资源，尽最大的努力、用最好的态度，做好手上的工作，也是一种创业。
8.不要因为背靠大树久了，就误认为自己是颗大树。对客户&用户的尊重和价值创造是我们很大的护城河。
关于生活：
1.技术人读书工作挣钱养家，一步步成长同时也会一岁岁变老。相比不少行业，互联网行业自身有赛道上的优势，但如果单纯以同比其他行业略高的溢价按年/月出售自己的时间和技能，这不应该是我们做的。坚持不断的思考、通过技术优势带来叠加价值，在过程中不断成长 ， 这兴许会更好。
2.学会奖励自己。如果经受了辛劳、痛苦和压力走了过来，再不好好的、肉痛地奖励自己一把，哪对得起过去和未来的自己。
3.除了在工作中，人生处处皆可学习：学理财、学打球、学拍照、学游泳、学健身、学拍短视频、学习怎么把生活过得更好。
4.最后，咱们技术人可能很忙，有可能没法“work-life balance”，这是一种取舍。但健康的身体一定是最宝贵的一笔财富，没有之一，不能舍。谢谢大家。
作者：舒文
本文为云栖社区原创内容，未经允许不得转载。
人整理来之不易请珍惜，如有错误请谅解，谢谢。。。
资源教程:
- [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html)
- [前端知识结构](https://github.com/JacksonTian/fks)
- [Web前端开发大系概览](https://github.com/unruledboy/WebFrontEndStack)
- [Web前端开发大系概览-中文版](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html)
- [Web Front-end Stack v2.2](https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png)
- [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
- [前端书籍](https://github.com/dypsilon/frontend-dev-bookmarks)
- [前端免费书籍大全](https://github.com/vhf/free-programming-books)
- [前端知识体系](http://www.cnblogs.com/sb19871023/p/3894452.html)
- [免费的编程中文书籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
- [智能社 - 精通JavaScript开发](http://study.163.com/course/introduction/224014.htm)
- [重新介绍 JavaScript（JS 教程）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
- [麻省理工学院公开课：计算机科学及编程导论](http://v.163.com/special/opencourse/bianchengdaolun.html)
- [JavaScript中的this陷阱的最全收集--没有之一](http://segmentfault.com/a/1190000002640298)
- [JS函数式编程指南](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html)
- [JavaScript Promise迷你书（中文版）](http://liubin.github.io/promises-book/)
- [腾讯移动Web前端知识库](https://github.com/AlloyTeam/Mars)
- [Front-End-Develop-Guide 前端开发指南](https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide)
- [前端开发笔记本](https://li-xinyang.gitbooks.io/frontend-notebook/content/)
- [大前端工具集 - 聂微东](https://github.com/nieweidong/fetool)
- [前端开发者手册](https://dwqs.gitbooks.io/frontenddevhandbook/content/)
- [前端入门教程](http://www.cnblogs.com/jikey/p/3613082.html) - [瘳雪峰的Javascript教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000) - [jQuery基础教程](http://www.imooc.com/view/11) - [前端工程师必备的PS技能——切图篇](http://www.imooc.com/view/506) - [结合个人经历总结的前端入门方法](https://github.com/qiu-deqing/FE-learning)
六. API:
1. 总目录
- [mozilla js参考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) - [chrome开发中心（chrome的内核已转向blink）](https://developer.chrome.com/extensions/api_index.html) - [safari开发中心](https://developer.apple.com/library/safari/navigation) - [microsoft js参考](https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx) - [js秘密花园](http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html) - [js秘密花园](http://bonsaiden.github.io/JavaScript-Garden/zh/) - [w3help](http://www.w3help.org/) 综合Bug集合网站
2. jQuery
3. Ecmascript
4. Js template
5. 弹出层
6. CSS
7. Angularjs
8. React
9. 移动端API
10. avalon
11. Requriejs
12. Seajs
13. Less,sass
14. Markdown
15. D3
16. 兼容性
17. UI相关
18. HTTP
19. 其它API
20. 图表类
21. vue
21. 正则
22. ionic
23. 其它
七. 开发规范
八. 其它收集
1. 各大公司开源项目
2. Javascript
3. Html5
4. CSS
5. jQuery
6. Ext, EasyUI, J-UI 及其它各种UI方案
7. 页面 社会化 分享功能
8. 富文本编辑器
9. 日历
10. 综合效果搜索平台
11. 前端工程化
12. 轮播图
- [无缝切换](http://www.swipejs.com/) - [滑屏效果](http://www.idangero.us/swiper/) - [全屏fullpage](https://github.com/peunzhang/fullpage) - [单个图片切换](https://github.com/qiqiboy/touchslider) - [单个全屏切换](https://github.com/peunzhang/slip.js) - [百度的切换库](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group) - [单个全屏切换](https://github.com/peunzhang/iSlider) - [滑屏效果](https://github.com/saw/touch-interfaces) - [旋转拖动设置](http://baijs.com/tinycircleslider/) - [类似于swipe切换](http://touchslider.com/) - [支持多种形式的触摸滑动](http://www.swiper.com.cn/demo/index.html) - [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html) - [大话主席pc移动图片轮换](http://www.superslide2.com/) - [滑屏效果](https://github.com/hahnzhu/parallax.js) - [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage) - [ - 定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html][WebApp) - [判断微信客户端的那些坑](http://loo2k.com/blog/detecting-wechat-client/) - [可以通过javascript直接调用原生分享的工具](https://github.com/JefferyWang/nativeShare.js) - [JiaThis 分享到微信代码](http://www.jiathis.com/help/html/weixin-share-code) - [聊聊移动端跨平台开发的各种技术](http://fex.baidu.com/blog/2015/05/cross-mobile/) - [前端自动化测试](http://www.zhihu.com/question/29922082) - [多种轮换图片](http://ajccom.github.io/niceslider/) - [滑动侧边栏](https://mango.github.io/slideout/)
13. 文件上传
14. 模拟select
15. 取色插件
16. 城市联动
17. 剪贴板
18. 简繁转换
19. 表格 Grid
20. 在线演示
21. 播放器
22. 粒子动画
九. Nodejs
十. 性能优化
- [Javascript高性能动画与页面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering) - [移动H5前端性能优化指南](http://isux.tencent.com/h5-performance.html) - [5173首页前端性能优化实践](http://ued.5173.com/?p=1731) - [给网页设计师和前端开发者看的前端性能优化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers) - [复杂应用的 CSS 性能分析和优化建议](http://www.orzpoint.com/profiling-css-and-optimization-notes/) - [张鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/) - [前端性能监控总结](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html) - [ 网站性能优化之CSS无图片技术](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/) - [web前端性能优化进阶路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html) - [前端技术：网站性能优化之CSS无图片技术](http://my.eoe.cn/tuwandou/archive/4544.html) - [浏览器的加载与页面性能优化](http://www.baiduux.com/blog/2011/02/15/browser-loading/) - [页面加载中的图片性能优化](http://www.w3ctech.com/p/1503) - [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD) - [html优化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/) - [99css——性能](http://www.99css.com/tag/%e6%80%a7%e8%83%bd) - [Yslow——性能优化](http://www.yslow.net/category.php?cid=20) - [YSLOW中文介绍](http://www.cnblogs.com/yslow/) - [转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化](http://www.360ito.com/article/40.html) - [Yahoo!团队实践分享：网站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml) - [网站性能优化指南：什么使我们的网站变慢？](http://blog.jiasule.com/i/153) - [网站性能优化实践，减少加载时间，提高用户体验](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html) - [浅谈网站性能优化 前端篇](http://www.umtry.com/archives/747.html) - [前端重构实践之如何对网站性能优化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html) - [前端性能优化：使用媒体查询加载指定大小的背景图片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/) - [网站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html) - [加载，不只是少一点点](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml) - [前端性能的测试与优化](http://mzhou.me/article/95310/) - [分享网页加载速度优化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/) - [页面加载中的图片性能优化](http://www.f2es.com/images-bytes-opt/) - [web前端优化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html) - [网站性能优化工具大全](https://www.qianduan.net/website-performance-optimization-tool.html) - [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/) - [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/) - [由12306谈谈网站前端性能和后端性能优化](http://coolshell.cn/articles/6470.html) - [AlloyTeam——前端优化](http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/) - [毫秒必争，前端网页性能最佳实践](http://www.cnblogs.com/developersupport/p/3248695.html) - [网站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html) - [前端工程与性能优化（上）：静态资源版本更新与缓存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1) - [前端工程与性能优化（下）：静态资源管理与模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2) - [HTTPS连接的前几毫秒发生了什么](http://blog.jobbole.com/48369/) - [Yslow](http://uicss.cn/yslow/#more-12319) - [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/) - [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/) - [YUISlide,针对移动设备的动画性能优化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html) - [Improving Site Performance](http://joelglovier.com/improving-site-performance/) - [让网站提速的最佳前端实践](http://segmentfault.com/a/1190000000367899) - [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/) - [Need for Speed – How to Improve your Website Performance](https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/) - [阿里无线前端性能优化指南 (Pt.1 加载期优化)](https://github.com/amfe/article/issues/1)
十一. 前端架构
十二. 个人作品
1. 推荐作品
2. 群员作品
3. 国外大牛精品
十三. 简历模板
十四. 面试题
十五. iconfont
十六. 开发工具类
十七. 前端导航网站
十八. 常用CDN
十九. Git,SVN,Github
需要资源私信回复前端，希望大家多多关注，多多评论
*请认真填写需求信息，我们会在24小时内与您取得联系。
