- 浏览: 213389 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
碧血剑:
互联网周刊给出答复,期待看看怎么样了
互联网周刊怎么了? -
wshxx998:
ibdata1,不能被复制,他正在被使用,我已经把Mysql给 ...
mysql导入.frm问题 -
chaoyue:
<marquee>谢谢啊.</marquee ...
关于Google map api教程 -
chaoyue:
我想实现在一个页面中51map与Google等主流地图的切换, ...
关于Google map api教程 -
luorongda:
我要你的文档,万分感激,可以吗?ruorongda@sina. ...
关于Google map api教程
转载自http://vipnews.csdn.net/newscontent.aspx?pointid=2008_12_18_11184746
上个月,Yahoo!优异性能(Yahoo!'s Exceptional Performance)开发团队成员 Stoyan Stefanov 出席了蒙特利尔的2008魁北克PHP会议演讲。他提供了他们团队最新的研究成果和提高网页性能规则20条。在早先的高性能网页开发14条军规已经让大家耳熟能详,此次新增的20条更加全面,覆盖了服务器端、cookies、页面内容、JavaScript、CSS、图片、移动手机应用这七大类别。以下内容就是根据这二十条结合个人在实际开发中的理解所做的全面解读。希望对大家开发有所助益。
阅读指导:
1. 每条规则后会指明是针对上述所说的七大类别中哪个类别的优化。
2. 文中提到的一些工具在文后附注中会提供简要说明。
3. 文中经常提到“组件”这个词,这个词不同于我们程序开发中常提到的组件概念。本文中提到的“组件”特指嵌在HTML页面中图片、JavaScript脚本、CSS等静态文件。
一、尽早清除缓冲区[服务器端]
假如用户请求一个页面,而这个页面在后端服务器需要花200至500毫秒乃至更长时间才能生成最终HTML页面,这时候用户浏览器处于较长时间的、等待页面数据返回的空闲状态,用户体验不会很好。此时可以根据页面内容长短做适当分隔,将先生成的页面局部HTML缓冲内容提前发送到客户端,不必让服务器消耗内存缓冲完整个庞大的页面内容后再行输出。这种方法有益于处理后端负荷大而前端负荷轻的页面。
在HTML页面的head标签位置后是清除缓冲的好位置,因为HTML的head标签可以包括 CSS 和 JavaScript 文件,对于浏览器而言获取页面显示与后端服务器处理并行的效果较好。在PHP中有一个函数 flush(),它可以发送请求页面的局部HTML代码给浏览器,以便浏览器能先取得页面已经生成的部分HTML,同时后端服务器继续忙于处理生成页面余下的HTML。以下以此函数做个示例:
... <!-- css, js -->
</head>
<!-- 注意此处flush()是放在了head标签位置后面 -->
<?php flush(); ?>
<body>
... <!-- content -->
其他语言也有类似语法,如ASP.NET和ASP中的 Response.Flush()。
注意:在实际Web开发中,尽量减少HTTP请求次数是优化的重要方面,这条基本原则是早先14条和新增20条中很多规则的制订基础,实际上它也是14条规则中第一条也是非常重要的一条规则,但是使用尽早清除缓冲语句会增加一个页面的HTTP请求次数,这无疑是一个矛盾,因此请注意本条规则的适用范围,不要滥用它。
二、使用GET方法的AJAX请求[服务器端]
这个容易理解一些。AJAX经常要用XMLHttpRequest,但是它的POST方法在浏览器中完成需要执行两步:首先发送信息头,然后才是发送数据;而GET方法只用一个TCP数据包传递(cookies信息例外)即可,减少了一个步骤,速度会快些。
另外根据HTTP规范,GET方法就是为获取信息而生的。因此仅在请求数据而不是发送数据给服务器端存储时,使用GET方法很有意义。
要注意的是,IE中URL允许最大允许长度是2K,用GET方法发送数据时注意2K的这个限制。
三、后加载组件[页面内容]
使用该方法的意义在于:如果某个页面内容丰富多彩的话,在浏览器加载显示它时速度就不会很快。使用后加载组件的方法可以通过延迟加载一些隐藏内容来保证浏览器优先显示初始页面。
要做到这一点必须仔细观察自己的页面并且问自己:“解释生成一个完整页面,什么部分内容是开始加载时绝对必须显示的?”清楚了这个问题,那么那些余下内容和组件就可以采用后加载方法延迟生成。这样会大大加快页面显示速度。
这个技巧通常是JavaScript通过处理页面加载时的onload事件完成。例如,使用JavaScript代码和库去执行拖放动态效果操作时,这些操作可以延迟,因为拖动页面上元素的操作只能等初始页面生成完后才能发生。页面中的隐藏内容也适合用后加载方式,因为只有页面加载完毕用户才能操作决定是否显示该内容。
Yahoo!网站的首页内容繁多,观察处于隐藏状态下的内容,这些内容通常在一些选项卡一样的标签页当中,只有点击后才会加载。
只要明白该规则的优化要点后相信大家可以通过JavaScript做出自己的具体实现。Yahoo!提供了两个用于实现后加载方法的工具:
◆ YUI Image Loader:可以延迟图片显示
◆ YUI Get utility:它可以在页面加载完成后把JavaScript和CSS资源绑定到DOM上去。
以上的工具是Yahoo!的YUI库提供。
四、预加载组件[页面内容]
从文字上看预加载组件与后加载组件似乎作用相反,但实际上二者目标是完全不同的。通过预先加载组件可以充分利用浏览器的空闲时间,并且可以请求未来页面需要的组件。在这种情况下,当用户访问下一个页面时,你已经提前让大多数组件保存在缓存中,用户加载这个页面就会非常快。
预加载类型有下列三种:
1. 无条件预加载
onload事件一触发,就要马上取回一些指定的组件。可以检查google.com首页中onload事件中请求Sprite图片的例子(注:什么是Sprite图片,请参看第十六条规则)。在这个例子可以看出这个sprite图片www.google.com/images/nav_logo3.png在google.com首页本身并不需要, 但它会在随后用户搜索生成的结果页面中需要。
2. 条件预加载
根据用户操作预测用户下一步操作的方向,并据此做预加载。例如,search.yahoo.com中,在输入框中刚键入几个字符后,就会看到页面对你键入的词做出合理推测,推出几个可能要搜索的实际关键词。此方法目前谷歌(google.cn)也在使用。
3. 提前预加载
在将重新设计的网站页面发布前用此法较好。页面重新设计后常会有这样的反馈:“新站点太酷了,就是比以前慢”。原因在于用户访问旧站点是全缓存的,但新站点还没有缓存过。这时可以在发布新设计前就预加载一些新站点组件,这可以减少没有缓存的副作用。可以利用用户访问旧站点时浏览器空闲的时间请求新站点要使用的图片、脚本等。
五、减少 DOM 元素数量[页面内容]
一个复杂的页面意味着要请求下载的字节数更多,也意味着用JavaScript访问DOM速度更慢。
如何尽量减少已有页面的 DOM 元素数量呢?一个重要的思路就是不要滥用表格table和div 。很多人习惯用一些网页编辑软件去设计页面,这样会导致大量嵌套的表格或在使用语义不合法的标记。使用div要仅当它在语义上有意义时才使用它,有些开发者使用它仅仅是因为它可以被浏览器解释生成一个新行。
Yahoo! 提供了一个避免这些问题的方法——使用YUI CSS工具。grids.css 有助于整体布局设计,fonts.css 和 reset.css 有且于清除浏览器的默认格式设置。这些工具可以在Yahoo!的YUI页面中去找。
DOM元素的数量可在Firebug的Console上键入 document.getElementsByTagName('*').length 得到。
DOM 元素不超过多少才适当呢?这可以通过检查一些有良好设计的页面来感觉比较。如Yahoo! 主页访问量相当大,它的数量在700个元素(HTML标签)以下。
六、分隔组件到多个域中[页面内容]
对终端用户响应时间影响最大的就是所请求页面所含组件数量。只要浏览器缓存为空,下载每个组件需要占用额外的HTTP请求,只有缓存满时才可能不占用。
HTTP/1.1规范中建议浏览器对每一个主机名允许并发下载两个组件。默认状态下,Internet Explorer和Firefox都符合这个规范。注意:IE8.0默认允许6个并发请求。
许多网页中所有组件都从同一主机名中下载,这时不仅响应时间受并发线程数限制,同时也受该服务器CPU和带宽限制。把页面组件分布在两个主机名中,整体响应时间就会快2倍,CPU和带宽消耗也会得以分担。
七、尽量减少 HTML 标签 iframe 的使用数[页面内容]
iframe允许在父文档内插入一个HTML文档。要想高效使用iframes,理解它的工作方式很重要。
使用iframe有如下好处:
◆ 有助于减慢显示第三方标记和广告内容。
◆ 是个安全的 Sandbox。
◆ 能并发下载脚本。
但同时也有弊端:
◆ 即使iframe 内的 HTML 文档内容为空,消耗也比较高。
◆ 会阻止页面的onload事件
◆ 非语义的
八、避免404页面[页面内容]
如果做了一个HTTP请求然后得到一个无用的响应页面,不仅完全不必要而且会降低用户体验。404页面就是在没有发现指定资源时返回的页面。
一些站点提供了有益的404提示,对用户体验有好处,但这毕竟浪费了服务器资源。当链接一个外部JavaScript文件,而它又出了404错误,这尤其糟糕。首先,因为这个下载有问题会阻止并发下载;其次,即使有错浏览器仍然会尽力解析404返回的内容,看看有无JavaScript代码,尽力查找里面可用代码。
文/邹建强
发表评论
-
windows2003下 apache ecshop实现二级域名和URL重写功能
2013-01-09 10:50 3984我的域名,服务器空间全是万网的,操作系统windows 200 ... -
php路径无缘无故多出来index.php
2011-07-31 15:25 1209最近公司的网店系统Shopex,莫名奇妙的路径出现/index ... -
php.ini的memory_limit设置
2011-06-16 09:42 2025今天调试使用Shopex4.84系统,点击查看某商品页面出现如 ... -
apache cronolog
2011-05-15 17:29 1842首先需要下载和安装cronolog,可以到http://w ... -
window appserv 二级域名如何解析
2011-05-13 16:05 3155服务器配置:windows2003 ... -
互联网周刊怎么了?
2010-09-14 09:58 1051互联网周刊怎么了? 我7月份定的互联网周刊杂志,到今天9 ... -
struts中文乱码解决方法
2010-01-04 19:39 1153转载:http://blog.csdn.net/caoyi ... -
Google Wave体验
2009-11-13 19:07 0今天下午看到邮件,Gtalk的朋友邀请我Google wave ... -
开发框架选择
2009-10-22 16:43 1011最近开发项目,遇到web层框架选择难题。 于是搜索了一下 ... -
Hotspot Shield
2009-10-20 06:12 0Hotspot Shield -
关于重定向问题
2009-10-03 14:34 678想实现类似于www.dtsh.com/bxj方式。 查 ... -
mysql导入.frm问题
2009-09-14 10:40 2955mysql导入.frm问题 原因:因为机器中毒了 ... -
关于Google map api教程
2009-06-10 19:33 2866关于Google map api教程 ... -
SqlServer安装N次后,无法正常安装问题
2009-04-12 19:29 801在运行窗口输入regedit,打开注册表编辑器,在HKEY_L ... -
关于无法提交表单问题
2009-03-31 13:11 1050今天,莫名其妙的无法提交表单。最后无语之处看了代码? 后来原因 ... -
SNS中好友动态功能
2009-03-11 08:05 924http://www.phpcup.cn/thread-785 ... -
Microformats,未来网站之间联系
2008-10-21 22:00 785http://www.kuqin.com/webpagedes ... -
jMaps,是jquery重写了google map函数
2008-10-21 14:58 4228今天看了大众点评网上的关于地图显示,原来以为是google m ... -
卸载myEclipse6.1 java vm 时windows出现错误:3
2008-10-06 12:28 1585卸载myEclipse6.1 出现“ 载入java vm 时w ... -
股权转让
2008-10-02 20:26 771股权查看 http://www.zcshgs.com/banz ...
相关推荐
python模块onnxruntime版本
此资源为完整项目部署后演示效果视频,可参考后再做项目课设决定。 包含:项目源码、数据库脚本、项目说明等,有论文参考,该项目可以直接作为毕设使用。 技术实现: 后台框架:SpringBoot框架 或 SSM框架 数据库:MySQL 开发环境:JDK、IDEA、Tomcat 项目都经过严格调试,确保可以运行! 博主可有偿提供毕设相关的技术支持 如果您的开发基础不错,可以在此代码基础之上做改动以实现更多功能。 其他框架项目设计成品不多,请根据情况选择,致力于计算机专业毕设项目研究开发。
Java毕业设计-ssm校园线上点餐系统演示录像(高分期末大作业)
【案例】某企业人力资源盘点知识.docx
本智能物流管理系统有管理员,顾客,员工,店主。功能有个人中心,顾客管理,员工管理,店主管理,门店信息管理,门店员工管理,部门分类管理,订单信息管理,工作日志管理。因而具有一定的实用性。 本站是一个B/S模式系统,采用SSM框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、操作简单,功能齐全的特点,使得智能物流管理系统管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来,实现无纸化办公,能够有效的提高智能物流管理系统管理效率。 关键词:智能物流管理系统;SSM框架;MYSQL数据库;Spring Boot 管理员模块的实现: 顾客信息管理:智能物流管理系统的系统管理员可以管理顾客信息,可以对顾客信息信息添加修改删除以及查询操作 员工信息管理:系统管理员可以查看对员工信息信息进行添加,修改,删除以及查询操作。 店主模块的实现: 员工信息管理:店主可以对员工信息信息进行修改,删除以及查询操作 门店信息管理:店主可以对门店信息信息进行修改操作,还可以对门店信息信息进行查询。 员工模块的实现: 门店信息管理:员工登录可以查看门店信息 订单信息管理
岗位体系建设.pdf
此资源为完整项目部署后演示效果视频,可参考后再做项目课设决定。 包含:项目源码、数据库脚本、项目说明等,有论文参考,该项目可以直接作为毕设使用。 技术实现: 后台框架:SpringBoot框架 或 SSM框架 数据库:MySQL 开发环境:JDK、IDEA、Tomcat 项目都经过严格调试,确保可以运行! 博主可有偿提供毕设相关的技术支持 如果您的开发基础不错,可以在此代码基础之上做改动以实现更多功能。 其他框架项目设计成品不多,请根据情况选择,致力于计算机专业毕设项目研究开发。
python模块onnxruntime版本
2013~2023中国企业全球化发展数据图表
绝对素数
Java毕业设计-ssm抑抑心理交流平台演示录像(高分期末大作业)
python模块onnxruntime版本
B2031 计算三角形面积
glm-4-9b-chat-1m模型代码文件
本车辆管理系统管理员功能有管理员和员工。 管理员功能有个人中心,员工管理,证件信息管理,车辆信息管理,业务单据管理,事故登记管理,维修登记管理,保养登记管理,加油登记管理,违章信息管理。 员工功能有个人中心,证件信息管理,车辆信息管理,业务单据管理,事故登记管理,维修登记管理,保养登记管理,加油登记管理,违章信息管理。因而具有一定的实用性。 本站是一个B/S模式系统,采用Spring Boot框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、操作简单,功能齐全的特点,使得车辆管理系统管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来,实现无纸化办公,能够有效的提高车辆管理系统管理效率。 关键词:车辆管理系统 本车辆管理系统管理员功能有管理员和员工。 管理员功能有个人中心,员工管理,证件信息管理,车辆信息管理,业务单据管理,事故登记管理,维修登记管理,保养登记管理,加油登记管理,违章信息管理。 员工功能有个人中心,证件信息管理,车辆信息管理,业务单据管理,事故登记管理,维修登记管理,保养登记管理,加油登记管理,违章信息管理。因而具有一定的实用性。
onnxruntime-1.16.0-cp39-cp39-linux_armv7l.whl.zip
tensorflow安装
【作品名称】:基于 Java+Mysql 实现的终极排班管理、考勤系统 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:使用 创建名为finalschedule的数据库,然后导入sql文件夹中的结构表和数据;部署启动项目即可。(sql中有数据库用户名名称dlwy,请修改为自己的用户名称或创建一样的用户) 功能介绍 人员管理 对人员信息的维护,增删改查等 分组管理 对人员进行分组,对不同的任务或者部门人员分组来管理排班,分组支持增删改查等 班次设置 排班班次设置,支持自定义班次名称、颜色和时间等
AUTOSAR_SWS_DiagnosticOverIP.pdf
30054 - AT-ST.mpd