文档章节

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

西安SEO
 西安SEO
发布于 2017/09/06 23:38
字数 1759
阅读 3
收藏 0
点赞 0
评论 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
西安
LiveVideoStackCon 2017 打造最专业的音视频技术大会

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

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

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

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

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

GavinHsueh
2017/12/28
335
1
5月19-20日WebRTCon 2018 梳理全球WebRTC技术实践与案例

4月17日,距离WebRTCon 2018举行还有一个多月的时间,这是由音视频技术社区LiveVideoStack发起的WebRTC生态大会。大会将聚焦WebRTC技术实践与应用案例两大主线,旨在为WebRTC的7年长跑做一次...

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

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

O'Reilly
04/17
0
0
OneAPM 技术公开课:北京,北京!

随着互联网行业的高速发展,数据库已经是绝大多数 IT 应用的核心因素,虽然数据库种类繁多,但是多层体系结构以及 SOA 的发展,使得应用逻辑的实现前移。数据库的性能与其功能相比较,变得越...

OneAPM蓝海讯通
2015/10/23
49
2
12月16日腾讯云网络技术沙龙即将在深圳开启!

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ [图片上传失败...(image-b2a63a-1512721497589)] 自上次北京站,被众多狂热技术开发者”围追堵截”交流网络技术,众多听众仍意犹未...

腾讯云社区
2017/12/08
0
0
TiDB 将出席 Percona Live Amsterdam 2016

TiDB 数据库的公司 PingCAP 将出席 Percona Live Amsterdam 2016 日前,专注新型分布式数据库研发的科技公司 PingCAP 确定将受邀参加 “Percona Live Amsterdam 2016”。作为亚洲唯一一家受邀...

TiDB
2016/09/28
973
12
OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名:前端性能大作战!

「 OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员。云集技术牛人、知名架构师、实践专家共同探讨技术热点。 11月28日,OneAPM 技术公开课第五期将走进...

OneAPM蓝海讯通
2015/11/16
60
0
Google 互联网开发技术交流会 (含官方邀请函)

尊敬的业界各位同仁: Google 公司将于 9 月 2 日 (周四) 在北京举办 “Google 互联网开发技术交流会 – 下一代 Web 标准和浏览器发展趋势”。这是一场面向 Web 前端开发工程师的技术大会。在...

红薯
2010/08/10
643
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

rabbitmq学习记录(六)交换机Exchange-direct

实现功能:一条消息发送给多个消费者 交换机模式:direct 相比于之前的fanout模式,可以进一步的筛选获取消息的消费者。 fanout模式下,只要消费者监听的队列,已经与接收生产者消息的交换机...

人觉非常君
15分钟前
0
0
Java 之 枚举

Java 中声明的枚举类,均是 java.lang.Enum 类的子类,Enun 类中的常用方法有: name() 返回枚举对象名称 ordinal() 返回枚举对象下标 valueOf(Class enumType, String name) 转换枚举对象 ...

绝世武神
24分钟前
0
0
使用爬虫实现代理IP池之放弃篇

啥叫代理IP以及代理IP池 概念上的东西网上搜索一下就好了,这里简单科普一下(大部分会读这篇文章的人,基本是不需要我来科普的),白话说就是能联网并提供代理访问互联网的服务器,它提供的...

一别丶经年
40分钟前
0
0
sqoop导入数据到Base并同步hive与impala

使用Sqoop从MySQL导入数据到Hive和HBase 及近期感悟 基础环境 Sqool和Hive、HBase简介 Sqoop Hive HBase 测试Sqoop 使用Sqoop从MySQL导入数据到Hive 使用复杂SQL 调整Hive数据类型 不断更新 ...

hblt-j
今天
0
0
Dart 服务端开发 文件上传

clent端使用angular组件 upload_component.html form id="myForm" method="POST" enctype="multipart/form-data"> <input type="file" name="fileData"> <!-- file field --></form>......

scooplol
今天
0
0
apache和tomcat同时开启,乱码问题

tomcat和apache同时开启,会走apache的转发,执行的是AJP/1.3协议。所以在tomcat的配置文件server中, <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" useBodyEncodingForU......

Kefy
今天
0
0
使用ssh-keygen和ssh-copy-id三步实现SSH无密码登录 和ssh常用命令

ssh-keygen 产生公钥与私钥对. ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./ssh , 和 ~/.ssh/authorized_keys的权利 第一步...

xtof
今天
0
0
orcale 查询表结构

SELECT t.table_name, t.colUMN_NAME, t.DATA_TYPE || '(' || t.DATA_LENGTH || ')', t1.COMMENTS FROM User_Tab_Cols t, User_Col_Comments t1WHERE t.table_name......

wertwang
今天
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
今天
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部