Tagged

性能

A collection of 8 posts

HTTP

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/

性能

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

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

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,

web app

缓存为王

前面我写了一篇快速web app的关键是使用Ajax、优化Javascript和更好的缓存。 使用Ajax可以减少网络流量到只有少量的JSON请求。 优化Javascript(异步下载脚本、分组DOM修改、对UI进程作出让步等)允许请求可以并行然后快速渲染。 更好的缓存意味着web app的大部分资源是存储在本地,然后并不会再有任何http请求了。 理解每种技术在哪里发挥作用很重要。使用Ajax,例如,不会让页面初始化加载更快(而且常常会不小心让它更慢),但是后面的“页面”(用户操作)会更爽。另一方面,优化Javascript,会让初始页面和后面的页面都更快,更好的缓存则位于中间:第一次访问不快,但后面的访问会更快。同时,即便在用户关掉浏览器之后再一次返回你的网站时初始化页面也会更快——这样性能优势要胜过浏览器会话(sessions)。 这些网站性能优化并不是互斥的——你应该都使用!但我(或者你也)想知道哪一个才有最大的效果呢?所以我进行了一次测试来测量这些不同的因素。我想要看看它们在实际网站中的效果,所以我使用了WebPagetest,这里我可以很方便的在Alexa排名前1000的网站中做一些测试。由于并没有办法让一个网站直接“Ajax化”,所以我决定专注与网络使用的时间。最后,我做了下面4项测试: 基准——用IE9和一个模拟的DSL连接速度(1.5Mbps下载、384Kbps上传,

web app

快速web app之道

我最近提到,一个快速的Web App的关键是Ajax架构、Javascript和缓存。虽然这样说是基于我的经验——我并没有每一项的贡献的实际数据或者量化的可能节省的性能。但请听我细说~~ Ajax架构——Web 1.0的基于用户每次操作来重新加载页面显然不是正确的选择。让用户拉下页面(移动终端拉下页面来刷新的方法)然后重新请求没有任何改变的资源会是一种很2B的用户体验。使用Web 2.0的App来维持稳定的UI就会更优雅,而且Ajax允许我们通过轻量的数据API请求和客户端Javascript来实现内容更新,这会显得平滑而快速。 Javascript——Javascript是网站性能的中流砥柱,但是几年前它更糟糕。还记得吗?过去通常会加载一个脚本,然后阻塞HTML解析和页面中其它资源的下载。脚本一次只下载一个!在2009年,IE8成为第一个支持并行脚本加载的浏览器。Firefox 3.5、Chrome 2、Safari4也很快跟进了,然后最近Opera 12也才跟上队伍。(在我看来对网站性能来说,并行脚本加载是唯一的、最重要的改进)除了加载脚本以外,Javascript引擎自身的速度也有了显著的提高。所以我们比几年前强太多了。但是当我深入研究主流网站的性能的时候发现Javascript依然是导致网站比较慢的最常见的因素,特别是减慢渲染。这主要源于几个原因。比如,Javascript请求已经增加到了约200kb了。浏览器仍然屏蔽Javascript的一些行为,比如,在有些浏览器中一个后面跟有内联脚本的样式会阻塞后面资源的下载。

优化

网站性能优化工具大全

网站性能优化(WPO)已经成为一个非常重要的话题了,越来越多的互联网公司开始有WPO的职位,而相关技能也是对前端开发工程师的重要技术要求之一。国外大牛Steve Souders在参加WebPerfDays London期间,收集了大量常用的网站性能优化工具,这里和大家分享下。 常用的网站性能优化工具: WebPagetest Cuzillion Chrome Dev Tools Speed Tracer Performance Analyzer (收费) SPOF-O-Matic, 3PO for YSlow Wireshark PageSpeed, YSlow HttpFox dynaTrace Ajax Edition 和 SpeedoftheWeb HTTP Archive 关键路径浏览—— PageSpeed Insights的一部分 PhantomJS 移动设备同步调试:Weinre, jsconsole.com, Opera Dragonfly, Chrome for Android Apache

IE

msfast——IE下的网站性能检测工具

MySpace 前不久分享了他们的一个名为MySpace’s Performance Tracker的开源项目,这是一个用来捕获和检查网页中可能出现的障碍Internet Explorer插件。 这个插件有以下几个特性: 测量你的页面的CPU占有率和内存占用; 回顾页面渲染时的屏幕截图; 回顾页面生命周期中每个关键点的HTML渲染; 查看页面在不同的连接速度中,渲染(页面显示)估计需要的时间; 根据已经经过证实的一些“最佳实践”规则(这些规则类似YSlow和PageSpeed)验证页面内容。 回顾页面加载是下载的资源(图片/js/css等),以及这些资源所花费的时间 浏览器支持:IE6+。 项目源码:http://code.google.com/p/msfast/ 注意:改工具目前尚处于pre-alpha 状态,只是刚刚可以用,还会有很大的改进,而从pre-alpha到alpha、到beta、到RC…会是一个很漫长的过程,但是神飞认为,这是目前对前端开发人员来说,是IE平台下最好的工具之一。所以,这个插件值得等待,希望MySpace的开发人员不会让我们失望。

css

高性能网站设计:不要使用@import

Translate From:stevesouders 原文:高性能网站设计:不要使用@import 本文版权归原作者和前端观察所有,不得转载。 在*高性能网站设计*的第五章,我简要的提到@import 对于网站的性能有某些负面的影响,然后我在Web 2.0 Expo的演讲上深入探讨了这个问题,并创建了一些测试页面和HTTP瀑布状图表,这些在下面将会用到。对于这个问题的底线是:如果你想样式表并行载入,以使页面更快,请使用LINK 替代@import。 LINK vs. @import 大家都知道,有两种方法可以在你的页面中导入样式文件。你可以使用LINK标签: <link href="a.css" rel="stylesheet"> 或者使用@import 方法: <style&