神飞 - 前端观察

HTTPS, SPDY和 HTTP/2性能的简单对比

中文原文：HTTPS, SPDY和 HTTP/2性能的简单对比整理自：A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 请尊重版权，转载请注明来源，谢谢！这几天手机不断被联通劫持，用知乎日报都会被插入联通的垃圾广告，更别说在微信中访问第三方网站了。于是关注了一下防止网站被运营商劫持的技术，这里推荐Fenng之前发的文章，在流氓无下限的运营商的手段下面，我们能做的其实并不多。而HTTPS和SPDY其实是更好的技术，不仅能保证不被运营商劫持，更能保护用户的数据安全。正好看到这篇关于HTTPS、SPDY和即将变为现实的HTTP/2的文章，觉得比较有价值，就顺手翻译了过来。以下为翻译： Firefox 35这周发布了，成为第一个默认开启支持HTTP/2协议的浏览器。Chrome也支持了，只是以SPDY 4的名义，并且要自己在about://flags里面手动开启。不过HTTP/2规范还没有最终完成，所以Firefox实际上支持的是HTTP/2第14版草案，这个版本的草案离最终发布可能不会有大改动了。Google现在在其服务器上同时支持了HTTP/

android

用Ionic开发hybrid APP

转载自：用Ionic开发hybrid APP 原作者：xiaodao 请尊重版权，转载请注明来源，谢谢~~ 使用phonegap开发APP的优劣在此不必细说，快速，简单，跨平台，以及随着iOS，Android本身对webview优化所带来的不错的性能，便是其独有的优势。而且私以为在目前激烈而又变化快速的移动APP市场环境下，用phonegap来开发APP未尝不是一种低成本mvp的方案，快速发布，成王败寇^-^ 为什么选用ionic 其中ionicframework便是phonegap开发hybrid APP技术中的一员新秀，甚至可以说是一员虎将，而且免费且开源。 Ionic的优势非常显著：性能优异基于红的发紫AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃，相关配套非常齐全： - 相对充足的学习资料，Learn Iconic,The Iconic book ngcordova，将主流的Cordova API或者Cordova插件封装为AngularJS扩展，使用非常方便。开源免费的webfont icon库ionicons,基本满足你icon需求。甚至最近开发出的可视化开发工具Ionic Creator 最后便是至关重要的，

前端

前端观察又改版

最近学会了sketch，然后就试着给博客改下版面。然后等我画完设计稿后，发现竟然和早期的前端观察模板非常像！对比一下：现在过去这说明了我还是从前的样子么？简单说一下中间的一些想法：我是字体控，所以这次对字体比较讲究，英文字体使用了Helvetica Neue，中文使用了兰亭黑，字重都是100，嗯，超细体，在Mac下表现很赞，字重使用了400，100太细更适合有设计感的原生，而不适合内容。但这些都不影响windows，windows默认字体会是Tahoma和微软雅黑，字重400。然后logo却用了华文仿宋和宋体，我觉得像宋体/明体这种字体在字号比较大的时候很漂亮，低调优雅。主题使用了Flatly的配色考虑比较多的易用性和易读性，所以依然采用了两栏的布局没有考虑IE浏览器，无论哪个版本，Windows实在是令人不解诶，这么多年了连基本的字体渲染都做不好，你看不管哪个中文字体小于14号时看起来都那么粗糙。所以windows用户也没法体验100字重的超细效果——手机倒是可以的。基于Wordpress官方的Twenty Thirteen二次开发，所以也开源了，感兴趣的去下载吧：https://github.com/qianduan/east-blue

HTML

meta标签常用属性整理

在segmentfault看到这篇文章，觉得整理的很详细，所以转载过来和大家分享一下。原文地址：http://segmentfault.com/blog/ciaocc/1190000002407912 作者：ciaocc 版权贵ciaocc所有，转载请注明版权。概要标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School 必要属性属性值描述contentsome text定义与http-equiv或name属性相关的元信息**可选属性** 属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。contentsome text定义用于翻译 content 属性值的格式。### SEO优化参考文档页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。

滚动视差

国外30个炫酷的滚动视差网站设计

滚动视差网站是在前两年兴起的一个趋势，然而随着浏览器的升级，HTML5和CSS3被越来越多的浏览器支持，而且性能也越来越好——主要是Chrome市场占有率的提升以及IE市场份额的大量减少——滚动视差网站的效果也越来越炫越来越流畅了。那么今天我们来分享国外的30个炫酷的滚动视差网站设计，希望能给你带来一些灵感，然后如果大家有好的国产的滚动视差网站设计，也欢迎推荐给我们，当然我知道其实也不乏这样的设计，之前神飞有见过但并没有收集。 Rimmel London Pressels Poppy Spend HotDot TEDxGUC Costa Flat vs Realism Teapot Creation NASA Prospect Boy Coy The Beast 13 Reasons Inforgraphic Lost World’s Fairs Puma Mobium Living World Olszanska Lexus Asia Madwell Tinke Jacksonville Artwork These

mac

Yosemite Safari工具栏特效

如果你使用Mac机器并且已经升级到了最新的Yosemite系统版本的话，用safari浏览网页会发现头部工具栏已经有了类似iOS中Safari工具栏的半透明毛玻璃效果了。Safari会自动根据页面的颜色来显示工具栏的毛玻璃特效，但我们也可以定制一下。 Safari默认会显示当前页面最顶部的颜色，比如，前端观察的： @lymXX制作了一个自定义工具栏效果的demo，很赞（只是该项目名称为RainbowSafari，彩虹。。。怪怪的），你可以自定义Safari的工具栏显示的颜色为纯色或者渐变色，亦可以是图片等。代码也很简单： <div id="rainbowsafari"></div> #rainbowsafari { background-color: #FFFFFF; /* Edit This */ right: 0; top: 0; height: 100px; z-index: 99999999999; position: fixed; content: ""; display: block; -webkit-transform: translateY(-99.99px); } 原理就不说了，

event

touch/pointer事件测试结果

一直非常佩服PPK，是因为他的各种浏览器兼容性测试，非常全面详细而且能保持更新，比如这个touch事件的兼容性测试。Patrick H. Lauke也出了一份类似的测试用例和结果，和PPK的可以互相补充。测试用例地址：http://patrickhlauke.github.io/touch/ 测试结果地址：http://patrickhlauke.github.io/touch/tests/results/ 最近神飞一直抽不出大块儿时间来翻译，所以大家就将就着看英文吧，如果有人愿意翻译，请告知我~~ //是否这是前端观察最短的一篇文章？ UPDATE：Kalasoo翻译了一下，传送门：http://blog.ming.today/2014/09/25/translate-touch-table-compatibility/

bower

常用前端命令速查表(node+yeoman+grunt+bower)

有人整理了一份常用的前端工具的命令速查表，包括node.js、yeoman、grunt和bower，入门级的，方便了解。 github地址：https://github.com/markusfalk/front-end-cheatsheet

IE11

IE开始支持部分webkit私有属性

IE团队博客上个月发文称，新发布的windows Phone 8.1 update开始解析部分webkit私有属性了。这。。。真的有些令人震惊呢！！！不过，微软说的很对，他们这样做主要是因为要为用户提供一致的体验，而现在的问题是，很多网站在WP上表现很烂：错误的浏览器检测方法没有能识别出来IE Mobile从而返回一个桌面版的网站使用过时的webkit私有特性，而这些特性其实已经被W3C标准化了使用未被标准化的webkit私有属性使用一些IE不支持的特性而且没有提供优雅降级产生互通性bug但IE实现的不一样例如，百度网站在iOS Safari、IE 11 Mobile、Firefox OS中的表现分别是：所以这也是一件很无奈的事情——Windows Phone的市场份额太小了，根本不能引起开发者的重视，而这些网站又严重影响WP用户的体验，微软不得不妥协了吧？——个人猜测未必正确，微软的同学或者忠实粉丝不要打我。。。对Web开发者的启示：使用标准方法来检测浏览器版本样式不要只写-webkit-，使用跨浏览器的兼容方案，比如带上-moz-、-ms-等前缀以及标准的写法提供完善的降级方案做好多平台兼容测试因为不爽的不只是WP手机用户，也是你自己的用户那么，IE 11到底支持哪些webkit属性呢？根据MSDN的文档，

HTML5

30个使用循环视频做背景的网站设计欣赏

用循环视频做网站背景是最近开始流行的一种趋势，嗯，主要还是在HTML5开始被各大浏览器支持之后才大量涌现的。其实有些类似N年前的Flash的Intro动画吧，不同的是用法和设计风格差别很大，相比当年的Flash就太Low了——呃，是不是无意间暴露了年龄了。。。总之，用H5+视频直接做首页的动画背景，也是一键酷的事情，无论是技术还是表现上。另外，国内带宽蛮贵的，所以用视频也要考虑下服务器成本。之前知乎的登录页有个3MB的视频循环播放并且每次播放都会从服务器请求下载一次，真替他们心疼钱啊。。。 Purple, Rock, Scissors Project Skin DUNCKELFELD Digital Telepathy Kalexiko Geckoboard Cobble Hill MELANIE F. Pushreel Build Films St. Joseph’s Preparatory School Fresh Design Studio P’unk Avenue Believe.in Strijp-S Final

android

微信不支持webview内文件上传了？NO

最近蛮多朋友问我，为什么android版微信里面打开web页面无法上传文件了？其实很多技术上的问题都可以问谷哥的。。。简单解释一下，其实微信并没有对android的UIWebView做什么限制和改动，不能上传文件，点击input[type=file]无反应是因为你的android版本太新了——android 4.4+移除了webview的文件上传功能。但是如果自己的app要支持的话也可以，但web这边暂时不行，只有等下个版本的微信或者下个版本的android(但也没有消息说下个版本会加回来)。 https://code.google.com/p/android/issues/detail?id=62220具体的讨论及实现方法可以参考这里。所以，android 4.4以下微信中webview是支持文件上传的，4.4以下中其它应用也是支持文件上传的 :P

招聘

跪求网页重构、前端开发、PHP 开发，坐标深圳腾讯 CDC

招聘哦～那些什么精通、熟悉的大家都懂，我就不写了～直接跳过前戏了～需求：重构工程师2名，有强迫症，注重设计还原，有动画设计能力、处女座优先。前端开发2名，JQ能会，带点交互体验天赋的，算法思维上天赋异禀，骨骼精奇。 PHP开发1名，偏数据挖掘技能多一点。外包前端开发2名，达到基础要求的初学者，非正式编制岗位；学成表现突出可转正。项目： [PHP]用户研究类产品，数据量级绝对能对得起观众了。 [重构]web，webapp，clientweb；各种形式的web。 [前端]内部系统，工作难度不太大，就是要学会自己主动挖掘体验以及性能优化点。团队： CDC的设计研发中心，负责部门所有项目的设计理念还原的工作。腾讯CDC，我想就不用介绍了。是行业内的人都晓得。中心的总监是TwinsenLiang，也不介绍了。Leader是偷米饭，就是那个经常叫平衡优化课程的tommyfan。是行业内的人也晓得。待遇：有竞争力吧……平均水平吧……最后还是要看能力的，

css3

css@supports

基于浏览器的特性检测大家应该已经很熟悉了，特别是modernizr.js推出来之后。其实w3c也出了规范，可以基于css来做一些特性检测，也就是@supports，这个特性已经有两年多了，之前浏览器支持度不够，现在webkit nightly也开始支持了，也就是说safari 9会支持到，这样的话，Blink+webKit+gecko都支持了，只剩下IE浏览器不支持了，嗯，这样更方便对IE差异化处理了。但是@supports并不能完全替代JS的特性检测方法，它只支持对CSS属性的检测，其它HTML5 api以及webP等技术的检测还是需要JS来完成。用法： @supports就像media query一样简单： @supports(prop:value) { /* more styles */ } @supports也允许你用各种复杂的组合来进行特性检测。基本用法： @supports (display: flex) { div { display: flex; } } 你可以用这种方法来检测各种基本的CSS属性。 not关键词就像这样： @supports not (display: flex) { div { float:

性能

网页速度是如何影响转化率的

我们一直很重视网站性能优化，在人才培养和招聘的时候也都非常重视，但性能优化到底为什么这么重要？对电商网站来说，性能优化对转化率的影响是实实在在的，也是非常有说服力的，这是国外同行webperformancetoday的研究成果，简单翻译一下分享给大家。当然，网站性能优化带来的好处不止转化率这一点，对基础用户体验、运营成本控制等都有很重要的影响，这些我们后面再说。直接看图表吧：译自：How Does Web Page Speed Affect Conversions? 原作者：TAMMY EVERTS 翻译：神飞中文原文：网页速度是如何影响转化率的请尊重版权，转载请注明来源！谢谢~~

Chrome

srcset属性获chrome 34支持，大赞！

Chrome 34终于正式发布，最引人的特性是开始支持srcset属性了。其实在此之前，Safari已经开始支持了，而目前来看，这个属性就是为rMBP服务的，因为桌面电脑上只有rMBP需要更高分辨率的图片。但是其实这个属性的用途并不仅限于此。最常用的用法： <img src="normal.jpg" srcset="normal.jpg 1x, high-res.jpg 2x, highest-res.jpg 4x" /> 但是W3C规范的描述其实更详细： To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or

招聘

QQ空间招聘web前端开发

工作地点在腾讯深圳总部，负责QQ空间相关业务，js方向。两年以上相关工作经验；熟练掌握web前端相关技能；熟悉业界常用Javascript框架，具备写原生脚本的能力。对网站性能优化有研究并有相关实践经验；加分项：妹纸优先具备项目驱动力者优先简历直投：viktorli#vip.qq.com

招聘

腾讯ISUX招募前端开发

又来发招聘了，我都不好意思了！不过这次是我自己组，急招前端开发一枚。工作地点在腾讯深圳总部，负责Qzone相关业务。话说，最近深圳天气不错，冬去春来，万象更新。在北方人民都在服雾的时候，我不得不说深圳的空气一直是北上广深最好的，绝大部分时间空气质量排行全国前十，比如今天最新的PM2.5是 28！所以，为了你的健康，请来空气和妹纸都很优秀的深圳来！言归正传，要求方面，前端通用技能就不说了，只说加分项：妹纸优先，并视情况加分30%-100%；有移动端web app开发经验优先；熟悉node.js相关技术并有开发经验优先；熟悉native app（iOS、Android不限）开发并有成功作品者优先；不要怀疑，您没有看错，我们招的确实是前端开发，只是移动互联网的大潮中，我们也要与时俱进啊 :P 有意向的请相信自己，果断投简历过来吧！（机会难得，可以和我一起工作哦~~~羞）简历请发送至mienflying#gmail.com 。同时也欢迎推荐优秀前端开发给我。

招聘

腾讯无线招聘网页重构

计算机或相关专业本科以上学历，2年以上相关工作经验；精通html(5)、css(3)，对web标准化有深入见解，有成功的多终端网站项目经验；熟悉至少一种面向对象的前端框架，有写原生代码功底；关注能提升用户体验和网页性能的技术，并能应用于实际项目；有较强的沟通协作和学习能力；有前端开发经验优先。有意者，简历发至：minminma@tencent.com

Webrebuild

蜕变·WebRebuild 2013 前端年度交流会邀请

互联网web前端设计行业通过一段时期的茧封或焰炼，web技术使行业、企业及自身发生质的改变。痛苦的蜕变是成长的契机，在彼此互相冲击、交流、融合的对话下，将以尊重包容互助合作同步发展的心态，对行业蜕变、自我提升的过程分享自己的观点进行探讨。 2013，本届主题为“蜕变”的前端技术年度交流会已是第七届，依然如往年在深圳、广州、上海、北京、成都五地举行，腾讯ecd联合WebRebuild.ORG、深圳大学文化产业研究院、迅雷CUED主办了第七届前端年度交流会“蜕变”首站－深圳站，将于10月26日上午9点在深圳大学拉开帷幕。交流会形式 web前端设计主题分享、现场来宾主题交流对话探讨。会议进行时间 2013年10月26日（周六）上午 9:00 会议地点深圳市南山区深圳大学科技楼一号报告厅。邀请参会对象互联网web前端/设计从业者及相关专业、兴趣的学生。报名渠道 WebRebuild.ORG官方网站，或添加微信公众帐号(webrebuildorg)进行相关操作。交流会背景 WebRebuild.

招聘

【招聘】电商前端开发工程师

我们需要您干什么？负责腾讯电商旗下易迅网的前端开发工作，通过技术提升产品的用户体验。您需要具备什么样的能力？深刻理解Web标准；精通图像处理及代码编辑工具；精通Web前端跨平台开发技术（XHTML/XML/CSS/Javascript等）；及时了解业界前瞻信息及应用，并有浓厚的兴趣和深入的见解；对HTML5/CSS3方面有实际的理解和实践经验；对网站性能优化有研究并有相关实践经验；熟悉业界常用Javascript脚本库(如jQuery、YUI、mootools等)；有团队协作精神，较强的逻辑分析能力、沟通表达能力，善于学习；勇于探索新领域了解多终端平台(手机，打印机，视障阅读器)研发，对可用性等有实际的理解和实践经验；有Web Apps开发经验优先；具备项目驱动力，对此有独特见解并有成功案例优先；工作地点：深圳宝安联系邮箱：289694837[at]qq.com

DNSPod

DNSPod招募前后端开发工程师

我们关注最前沿的技术，关注用户体验，鼓励员工时时创新~ 我们是腾讯全资子公司（意味着有Q币）~ 我们是国内最大的域名解析服务商、最大的域名托管商~ 不可思议吧~ 我们是DNSPod，DNSPod就在烟台~！如果你：精通Python开发，gevent、web.py、mongodb, redis什么的不在话下。–【 Python工程师】能手写 HTML/JavaScript/CSS，熟悉 jQuery 有丰富的关于 Web 标准、易用性、浏览器端原理的经验有一定的英文基础。–【WEB 前端工程师】对MySQL有基本的了解，懂得PHP编码规范、并有实际开发经验。–【PHP后端开发工程师】熟练使用linux，unix，windows操作系统，具备一定的开发能力（了解shell、perl等脚本语言）。–【运维工程师】对交互设计过程有深入的了解，具备独立完成整个设计的能力。–【产品经理】如果你：喜欢骑行、喜欢摄影、喜欢萌物~

CDN

【推荐】开放静态文件 CDN服务staticfile.org

虽然国内外有很多类似的服务器，比如最初的google ajax api，还有后来的sae，百度等都有提供，但是也都有不同的弊端，比如国内访问速度慢、提供的静态文件不全等。。。staticfile有望解决这个问题。访问 http://staticfile.org/ 简单介绍：此仓库由 Sofish、hfcorriez 和 ikbear 更新和维护，由七牛云存储提供存储和加速，国外源同步于 CDNJS。特色：开放该项目托管在github上，每个人都可以去提交补充需要的js或者css库文件。简介&帮助：http://staticfile.org/about.html 总之这种提供免费的开源前端库文件是造福人类的事情，而且目测速度很不错。推荐之～～

css3

高性能 CSS3 动画

注：本文出自腾讯AlloyTeam的元彦，文章也可以在github上浏览。请尊重版权，转载请注明来源，多谢～～高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点：流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。目前对提升移动端CSS3动画体验的主要方法有几点：尽可能多的利用硬件能力，如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0,

datauri

手机端DataURI比外链资源慢6倍

一直在找这方面的数据，只是之前在鬼哥那边看到，网页中使用DataURI会**多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍。猜测手机端也会有类似的情况，但一直没有合适的方法来测试实际数据。** mobify最近做了一系列的测试，测试结果表明平均下来，DataURI要比简单的外链资源要慢6倍。 DataURI的方法最初被设计用于在email中嵌入资源，但是后来被介绍可以用于减少HTTP请求，从而提升网站性能。但是其实事实上却有些鸡肋：图片等资源转换为DataURI所用的Base64编码之后，文件大小增加了好多（通常50%-300%），如果服务器端启用Gzip压缩，图片实际大小则基本可以达到转码之前的大小；浏览器需要将Base 64解码以后才能渲染，而解码过程需要消耗不少的内存和CPU；无论你是否将使用了这些Base64的文件（HTML，CSS等）缓存到本地，浏览器在渲染相关页面的时候，都要重新解码，消耗CPU和内存。从上图可以看出，Android低端手机的性能差的惊人，iOS 6和Android 4.2的高端机看起来还可以但是DataURI也要慢好几倍。所以其实总体来说，DataURI的方法要慎用，对于Webapp，更推荐更有效的利用各种缓存技术。文中数据来自于Mobify，更多测试细节也可以前往访问了解

后台

50个高端大气上档次的管理后台界面模板

译自：[50 Incredible Admin Page Templates](http://www.instantshift.com/2013/07/11/admin-page-templates/) 译自：[50个高端大气上档次的管理后台界面模板](http://www.qianduan.net/50-amazing-admin-management-templates.html) 请尊重版权，转载请注明来源，多谢～～ - - - - - - 大部分网站都有一个管理面板或者管理界面用于查看和管理网站信息。但是通常大家并不是很重视这个后台管理界面的设计，一般能用就行了。但是其实漂亮的管理界面也能大大的提升工作人员的工作效率啊。通过使用漂亮的管理面板你可以省掉很多的时间，同事，设计良好的界面也适合在移动终端上使用，从而减少对PC的依赖和提供管理的灵活性。这里收集了50个高端大气上档次，简洁时尚国际化的后台管理界面模板，希望你能喜欢并获取灵感。 1. Katniss Premium Admin Template 2. Esthetics Admin-Clean