文档章节

Google专家分享网站优化最新技术

西安SEO
 西安SEO
发布于 2017/09/06 23:38
字数 1759
阅读 3
收藏 0
性能是任何一个网站成功的关键,然而,如今日益丰富的内容和大量使用Ajax的Web应用程序已迫使浏览器达到其处理能力的极限。在最近举行的O'Reilly Velocity会议上,来自Google的工程专家Colt McAnlis和Steve Soulders 分享了最新的前端优化技术,包括“减少对浏览器GC垃圾回收机制的依赖”和“页面预获取”等。 Colt McAnlis目前是Google公司的关注于原生客户端的开发工程师,在此之前他曾经作为一名系统和图形程序员就职于游戏行业的Blizzard、Ensemble和Petroglyph等公司。Colt讨论和解决了当前移动Web开发者们感到最棘手问题之一:JavaScript的性能。因为JavaScript解析引擎使用GC(垃圾回收机制)管理内存,所以基于Web的JavaScript应用程序可能会遭遇性能问题,尤其是在移动客户端上。McAnlis告诉Web开发者听众: “你们不应该依靠垃圾回收器。”
GC通过自动将程序不再需要的内存返回到操作系统来帮助程序员。不过用C和C++等低级别的语言编写代码来管理内存是一个艰苦的过程,并且不管怎样,这样的语言不被浏览器所原生支持。 许多JavaScript Web应用存在的问题是,JavaScript引擎会在看似随机的时间执行其垃圾回收的例行任务,这样会使得应用程序暂时变慢。例如,视频应用的帧频可能会降低,或者应用程序执行操作的时间可能会从标准的3至5毫秒跳跃到可引起人注意的20毫秒。
McAnlis引用了一个研究结论说,总体而言,若要让GC在不被用户察觉的情况下工作,系统内存至少需要六倍于现在的设备所使用的内存。而考虑到移动设备有限的内存与其运行的需要大量内存的应用程序的数量,这会是一个苛刻的要求。
闭包是一种扩大本地定义变量可用性的程序员友好型技术,其使用的增加加剧了这一问题。例如, jQuery是一种被广泛使用的依靠闭包的JavaScript库,其结果是在内存分配中造成大量的挥霍。
当提及闭包在其所消耗的内存的量方面是多么的不可预测时,McAnlis说:“闭包所引起的问题吓到我了。”他建议,为了提高性能并更好地管理内存,开发人员应该使用一种类似于中间件库 Emscripten所使用的方法,这种方法正被用于构建高性能的HTML5 Web游戏。
Emscripten把用C和C++编写的代码转换成JavaScript, 使其可以从应用程序自身内部管理内存。基于Emscripten的程序会预先从系统中分配出一块内存。程序员连同Emscripten一起决定何时不再需要内存,并把这部分未使用的内存归还到其内部的可用内存中。JavaScript引擎不对程序做任何垃圾回收工作,所以不会影响程序的性能。
McAnlis说,一般而言,利用这项技术编写的程序可比典型的JavaScript程序的运行速率高两至四倍,并免于遭受由于GC的操作而带来的偶尔性能滞后。 Steve Soulders负责Google公司的Web性能和开源组织。他是Firebug性能分析扩展工具——YSlow的创造者,也是O'ReillyWeb性能与运作会议Velocity的联合主席。他曾经在Yahoo!担任Chief Performance。Steve在另一个讲座中,提到了部分新兴浏览器技术,这些新兴技术的作用在于页面被用户请求之前的预获取。Soulders解释道,这个想法就是,浏览器应该能够在用户请求页面之前便预见到其可能想看的下一页。“你不知道用户的下一步会是什么,但是你能从他/她在刚刚请求的页面上的意图找到更多的线索”,Soulders说。然后他解释了开发利用这一知识的几种技术。 开发人员可以向一个页面的超链接添加HTML dns-pre-fetch, pre-fetch和pre-render标签。一旦一个页面被加载,此类标签可以在用户请求之前,命令浏览器去获取在这个原始页面中被链接的页面的部分内容。dns-pre-fetch标记告诉浏览器查找Web页面链接所指向的页面的域名,pre-fetch标签告诉浏览器抓取整个页面,pre-render告诉浏览器构建整个页面,就好像浏览器正在一个隐藏的选项卡上显示这个页面。当被部署时,所有这三个种标签可以缩短请求Web页面和显示那个页面的时间间隔。 Soulders警告开发者要明智地使用这些标签,因为它们会增加带宽和处理器的使用率。但在许多情况下,例如在一个登陆或者显示搜索结果的页面上,有相当高的可能性,用户将点击其于页面上发现并已经被交付的链接之一。不同的浏览器对于这些标签的支持各不相同,但大多数浏览器制造商似乎在向其即将到来的新版本添加对它们的支持。 浏览器本身也有一些加快网页交付速度的方法,如DNS预解析和TCP预连接。利用DNS预解析,通过观察用户在导航栏中开始键入的字母是什么,或者甚至通过例行获取用户最常访问的Web网站的IP地址等操作,浏览器可以预见到下一个将被访问的站点的域名。TCP预连接通过类似的手段预见用户的下一步行动。Soulders说,它通过打开端口并针对一个最终请求设置所有协议,来“预热”与站点的连接。 提起网站优化,许多前端开发者会立刻想到Yahoo的 网站优化准则,随着研究和技术的不断发展,规则也从最初的14条增长到了如今的34条,但是最核心的一些基本原则依然被网站开发者作为圣谕,包括:
  • 减少HTTP请求
  • 使用CDN技术
  • 设置HTTP文件头过期和缓存控制字段
  • 启用Gzip压缩
  • 尽量把样式表放在页面顶部
  • 尽量把Javascript代码放在页面底部
  • 避免CSS表达式
  • 将Javascript和CSS外链
  • 减少DNS查找
  • 避免重定向
  • 删除重复脚本
  • 配置Etags
  • 缓存Ajax
  • ……

© 著作权归作者所有

共有 人打赏支持
西安SEO
粉丝 2
博文 128
码字总数 171046
作品 0
西安
私信 提问
【干货】程序员常访问的国外技术交流网站汇总

搞技术的,如果想更高提升自身技能水平,英语这关是逃不了的。 ——某位不愿透露姓名的四级loser 技术人员经常会在各种技术交流社区游逛,大家互相学习、交流、分享、帮助。互联网拉近了地球...

GavinHsueh
2017/12/26
0
0
LiveVideoStackCon 2017 打造最专业的音视频技术大会

  【IT168 评论】10个年头前――2007年1月,乔布斯在Macworld大会上公开了第一代iPhone,时至今日这台电子设备在全球各地已经售卖出超过12亿台。随处可用的WiFi、3G、4G网络,让iPhone成为...

it168网站
2017/08/29
0
0
【干货】程序员常访问的国外技术交流网站汇总

搞技术的,如果想更高提升自身技能水平,英语这关是逃不了的。 ——某位不愿透露姓名的四级loser 技术人员经常会在各种技术交流社区游逛,大家互相学习、交流、分享、帮助。互联网拉近了地球...

GavinHsueh
2017/12/28
1K
1
程序员常访问的国外技术交流网站汇总

搞技术的,如果想更高提升自身技能水平,英语这关是逃不了的。 ——某位不愿透露姓名的四级loser 技术人员经常会在各种技术交流社区游逛,大家互相学习、交流、分享、帮助。互联网拉近了地球...

mircle
2017/12/28
0
0
吹响“人工智能应用”的集结号 ——AI Conference 2018北京站大会圆满落幕

摘要:2018年4月10日至4月13日,由O'Reilly和Intel共同举办的AI Conference 2018北京站大会在北京国际饭店会议中心隆重举行。大会的主题是“探索在业务中应用人工智能的机会”,来自Google、...

O'Reilly
04/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
13分钟前
0
0
《配电网自动化技术》第一章

写了配电网的组成、历程、难点、存在问题、解决方案,还是蛮好的。尤其是各地建设的系统后续又无法实用化,以及多种终端反而增加了运维工作量等,都是目前切实存在的让大家不停吐槽的内容。

max佩恩
18分钟前
0
0

中国龙-扬科
36分钟前
2
0
使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.jsconst state =...

peakedness丶
40分钟前
2
0
NetCore MVC Demo

地址:http://114.116.9.72:5411

whltian
47分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部