何俊谈阿里巴巴前端性能优化最佳实践-笔记

网站页面前端优化对网站核心页面基于Wise
load的原则做定点性能优化,减少HTTP请求,减少DNS请求时间,减少页面DOM的数量,做一些图片、JS压缩等。减少HTTP请求方案:阿里开发了自动合并CSS和JS静态文件的框架,对于减少页面DNS数方面采用前端延迟加载框架,主要负责页面加载时只加载首屏,用户滚动页面时才加载二屏或三屏,这样对网站的性能包括流量都是很大的提升和节约。

Web
I/O(高并发)方面的优化,使用高性能Web服务器,另外在冬天页面处理上,尽可能地减少冬天页面所占比例,采用一些动态页面静态化技术,例如反向代理技术,页面片段的局部缓存像ESI(Edge
Side Include)这样的技术,加快Web请求。

小知识:ESI是一种数据缓冲/缓存服务器,它提供将Web网页的部分(这里指页面的片段)进行缓冲/缓存的技术及服务。由Oracle公司和Akamai
Technologies公司制定规格,Akamai公司提供对应的信息传送的服务。

特点:

以往的数据缓冲服务器和信息传送服务以页为单位制作,复制到数据缓冲服务器中,由于其对应要求而进行传送,所以向网络软件等根据用户的输入,内容会动态地转变的网页传送信息的时候,就很难得到高效率。

由于在ESI中是部分地缓冲网页,使用基于XML的标记语言,指示想要缓冲的页面部分。由此,页面内分为动态地变更的部分和静态的不变更的部分(网站内的共通菜单等),只将静态的部分有效地发送到服务器中。

应用调优,大部分大部分Web应用的性能瓶颈都来自我们程序员实际编码中一些不好的写法。这点我们可以通过一些profile工具定位性能瓶颈,例如应用堵塞XML解析,我们能够拿到性能瓶颈列表,然后再针对这些性能瓶颈做一些性能调优。在阿里巴巴,我们线上应用已经部署了一些基于字节码增强进行网站实时监控的脚本,它可以实时抓取应用堆栈以及一些运行情况,这样我们第一时间就能掌握到应用的瓶颈,从而做一些有针对性的调优。

目前在数据库方面我们遇到的问题是海量数据的爆炸性增长,在这方面大家的思路基本是一致的,无外乎是数据水平切分和垂直切分。

在性能调优方面的一些最佳实践,包括特别需要注意的地方?

第一是我们在做性能优化之前要制定非常详细的目标量化产出,首先要对性能现状做深入分析,然后根据量化指标制定一些Roadmap,例如目前应用吞吐率、页面响应时间,我们希望通过性能优化在Q2、Q3、Q4分别达到一个什么样的性能指标,通过量化的性能指标做一些特定性能优化设计,有计划的性能调优效果会好一些。
    
第二要防止过度性能优化设计,因为性能优化成本比较高,基本上优化到一定程度要考虑到投入产出比问题,过度的性能优化不仅会带来浪费,甚至会导致架构更加负责,带来一些可维护性的问题。
     
第三要注意性能优化是为用户服务的,性能优化有两个方向,一个方向是增加应用吞吐量,减少网络和应用服务器的投入,另外一个方向是做一些用户体验方面的提升,例如前端优化,这两个方向我更倾向于后者,因为有数据表明,用户访问受到页面响应时间制约,页面每慢10%就会有等比例用户流失,所以前端优化不利导致商业上的损失远比后端优化节约的成本要多。

第四是性能优化会受到商业需求制约,不同商业需求对性能优化要求不一样,我举个例子,我们在做前端优化时会做一些图片自动压缩,就这点来说,不同行业对图片质量要求不一样,比如服装行业比机械行业图片质量要求高很多,所以我们需要针对不同行业设定不同的压缩比,这也是我们需要考虑的。
    
此外还要考虑性能优化成果如何保持的问题,就是如何做持续发展的性能优化,我们主要通过两个方面,一个方面是制定一些性能优化的最佳实践,向应用开发人员灌输性能的理念,让性能的理念深入到他们日常工作中,另外一个方面是实时监控系统运行情况,第一时间把出现的性能瓶颈解决掉,这样才能保持性能优化可持续发展。

阿里巴巴前端团队目前主要采用哪些JavaScript框架做应用开发,为什么选择这些框架?

据我了解,目前我们采用了YUI和jQuery这两个JS框架。采用这两个框架主要考虑到以下几点:第一,我们希望JS框架是一个比较轻量的,比较小的框架,它的库文件比较小;第二,我们希望JS框架的浏览器兼容性比较好;第三,我们希望JS框架有比较好的可扩展性,这样就可以快速定制一些UI组件;第四点是很关键的一点,性能要比较好。目前我们使用的JS框架遇到版本升级的问题,当我们决定对使用的JS框架做升级或替换时,我们发现由于API变动,前端有大量页面需要修改,所以现在正在做的事,是在JS框架之上做一层封装,做统一代理层,提供一些稳定的API给前端页面,然后我们会在这层做一些性能优化,包括安全方面的代理工作,有了代理层,甚至可以透明替换JS框架,这是第一点。第二点,目前正在开发一些具有深层次用户体验的UI组件,比如刚才提到图片上传的自动压缩组件,另外还有一些很炫像相册这样的组件,这对于丰富用户体验是非常有意义的。

目前前端开发团队面临的主要挑战是什么?他们有哪些解决方案?

他们目前面临的挑战,除了刚才说的性能问题以外,更多的是开发效率的问题,包括一些代码质量问题。可以分三个阶段来讲,第一个阶段是开发期,开发期面临的主要问题是编码和调试如何更加有效,我们目前正在开发一套基于插件的IDE框架,支持前端代码快速开发和调试。第二阶段是测试期,怎么减少测试投入的人力成本,因为我们知道前端测试对于人力成本投入是非常大的,例如比较复杂具备多种表单验证条件的一个表单设计,这方面我们正考虑一些自动化测试技术,这种前端测试自动化能够自动去测试JS编码,通过录入脚本实现关键页面的反复测试。第三阶段是运行期,如何对线上页面性能包括代码质量进行快速监控,我们在全国各地各个网段都部署了脚本模拟访问前端页面的实际情况,会监控一些性能指标,包括代码异常等,然后生成一些报告通过邮件发给我们,我们会在第一时间处理这些问题。

下面我们谈一下目前比较热的一个技术话题HTML5.我们知道最近W3C宣布将在2014年正式推出HTML5规范。阿里巴巴前端团队如何看待和应用HTML5?

据我了解,目前有些应用已经采用HTML5了。例如我们网站有一个基于web的即时通讯软件,它就用到了HTML5的Web
Sockets技术。像HTML5里客户端存储,其实我们也用到了,网站有很多应用场景,例如您最近一个浏览记录,如果不是很重要的数据就非常适合存放在HTML5的客户端缓存里。另外我们目前正尝试用一些HTML5新标签,例如布局方面像<nav>、<header>、<footer>这样一些标签,好处就是标签更加语义化,以往我们实现布局要基于盒子模型,通过<DIV>设计页面布局,现在有了语义化标签,对于SEO是很有好处的。我们也在尝试使用表单相关标签,HTML5新提供了表单验证语法支持,以往要写一大堆JS代码,现在采用HTML5技术很容易快速实现。此外,还有画布<canvas>标签,我们网站现在目前有很多柱状图、饼图这样的统计图表,我们现在用Flash来实现,以后也会考虑通过<canvas>标签实现。

如何处理多种浏览器对HTML5的支持问题?

浏览器兼容性问题确实是一个比较大的问题。因为我们知道目前IE系列的浏览器对HTML5基本不支持。我们通过几个方面来解决:第一,采用一些第三方特性来支持,例如<canvas>标签在IE下是不支持的,我们可以采用google-excanvas这个组件让IE支持;第二,在一些不兼容的浏览器里做一些低级效果替代方案,例如CSS3的圆角效果,在IE里就直接显示直角;第三是一些文本提示,有意识地引导用户使用兼容的浏览器,我们会在页面关键位置通过一些指导性信息提示用户如果采用特定浏览器会获得更好的用户体验。目前为止,我们更多地在网站主要是面对我们网站运营的后台系统尝试使用一些HTML5技术,因为内部人员的浏览器兼容不是一个很大的问题,我们可以提示用什么样的浏览器来访问这些网站后台运营系统。

内容出自:InfoQ,Url:http://www.infoq.com/cn/interviews/hl-alibaba-front-end-performance-optimization

时间: 2024-10-13 14:43:58

何俊谈阿里巴巴前端性能优化最佳实践-笔记的相关文章

前端性能优化最佳实践

最佳实践1:使用DocumentFragments或innerHTML取代复杂的元素注入 DOM操作在浏览器上是要付税的.尽管性能提升是在浏览器,DOM很慢,如果你没有注意到,你可能会察觉浏览器运行非常的慢.这就是为什么减少创建集中的DOM节点以及快速注入是那么的重要了. 现在假设我们页面中有一个<ul>元素,调用AJAX获取JSON列表,然后使用JavaScript更新元素内容.通常,程序员会这么写: Javascript代码 var list = document.querySelecto

【读书笔记】《Android应用性能优化最佳实践》

<第一行代码>读书笔记 一.引言 二.读书内容 书名:<Android应用性能优化最佳实践> 作者:罗彧成 (腾讯音乐Android开发总监) 出版社:机械工业出版社 封面: 三.书籍评价 四.个人心得 五.参考文档

高性能网站建设进阶指南:Web开发者性能优化最佳实践 pdf扫描版

高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中,Souders与8位专家分享了提升网站性能的最佳实践和实用建议,主要包括:理解Ajax性能,编写高效的JavaScript,创建快速响应的应用程序.无阻塞加载脚本, 跨域共享资源,无损压缩图片大小,使用块编码加快网页渲染:避免或取代iframe的方法,简化CSS选择符,以及其他技术.性能是任何一个网站成功的关

C# 性能优化最佳实践

1.显式注册的EvenHandler要显式注销以避免内存泄漏 将一个成员方法注册到某个对象的事件会造成后者持有前者的引用.在事件注销之前,前者不会被垃圾回收. private void Form1_Load() { -- //注册事件 CommandRemotingContext.CmdChanged += new ReciverCmdStateChangedEventHandler(this.CommandRemotingContext_CmdChanged); -- } private vo

前端性能优化点(笔记)

1.减少HTTP请求(合并请求). 2.使用CDN数据加速(各地独立的内容分发机制). 3.合理使用Expires头来增加缓存效果. 4.使用动态或静态压缩技术,并且压缩JS或HTML等文本格式中的字符数,来减少网络消耗(使用单字母来定义JS变量.去除多余的空格和格式字符,或者使用JS压缩工具来减小JS长度). 5.将样式表CSS存放在页面顶部. 6.JS脚本存放在页面底部. 7.避免CSS表达式. 8.使用外部的JavaScript和CSS. 9.减少DNS查询. 10.对JavaScript

前端性能优化知识点汇总

面试必谈的--前端性能优化 为什么做优化 提供给用户最佳体验 #有哪些差的体验 - 白屏好久才显示内容 - h5浪费用户流量 优化方案大概分为以下几种: 1.降低请求数量 a.减少获取数据的接口数(初始数据尽量通过一个接口返回) b.减少js.css的数量(提取公共js.css利用缓存.减少后续加载访问.有些代码直接注入页面无需外链形式访问加载.) c.图片懒加载 2.降低文件大小 a.图片压缩以及使用webp b.压缩js.css c.gzip(设置content-encoding:gzip)

前端性能优化 —— 起步篇(一)

简要:用户的体验是非常重要的环节.快速的显示网页,流畅的用户操作,丰富实时的页面功能,顺畅的动画展示,这些都是决定用户舒适体验的关键因素.把用户伺候舒服了,才会产生长久的依赖.我认为前端性能优化的实践应当是自动化的,智能化的,从代码编写到生产打包一整套流程都应该有一系列关于优化的应对方案. 我个人认为nodejs相对于我们前端来说作为代码管理工具的意义要大于作为后台服务器的意义,接下来我会根据我对于nodejs,gulp的实践情况和对<高性能网站建设指南>这本书的理解来总结我个人对前端性能优化

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

阿里巴巴 web前端性能优化进阶路

Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化黄金法则,以及大名鼎鼎的优化大师Steve Souders.本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结.希望对正在从事这个领域研究的前端同学能有所帮助. 简单的说,我们的性能优化实践分为三个阶段:初探期.立规期.创新期, 每个阶段