网站前端优化工具,网站前端的性能优化与测试——内容过期

seo基础     2020-12-29    浏览:0

网站前端的性能优化与测试——内容过期

  最近在搞网站的界面UI改版,除了少数的几个页面外,全站基本统一了界面风格,在解决各种浏览器兼容问题的时候,不经意搜到一个FireFox的插件 YSlow for Firebug,他是开源的网站优化工具,用于测试网站的前端性能。在YSlow的评价性能等级上,有十三条规则:1. Make fewer HTTP requests,2. Use a CDN,3. Add an Expires header,4. Gzip components,5. Put CSS at the top,6. Put JS at the bottom,7. Avoid CSS expressions,8. Make JS and CSS external,9. Reduce DNS lookups,10. Minify JS,11. Avoid redirects,12. Remove duplicate scripts,13. Configure ETags。这是《Yahoo!网站性能最佳体验的34条黄金守则》中进一步精简的,现在先来讨论第3条,这是比较容易可以实现了的,只需配置一下iis 或者apache等web服务器,给http header 加上“内容过期”即可实现。考虑到网站正在改版,css、js还需要修改,这里分别给相关资源加上较合适的过期时间:1、image、flash 100天后过期;2、css、js 3天后过期。

  配置过程:在iis管理器中打开相关网站,找到需要设置的文件、文件夹,然后点击属性,在“http头”一项中即可设置。

  如果指定一个过期时间后,如 2008-12-26 14:26:00,则会在浏览器的http header received中会得到一个明确的过期时间:如Expires:Fir,26 Dec 2008 14:26:00 GMT,这是一个标准的GMT时间(格林尼治时间);如果指定100天后过期,header received则会收到Cache-Control:max-age=8640000(以秒来计算)。以上两个header received该指示浏览器缓存该请求的内容,并会在浏览器的临时缓存文件夹中保存该文件直至其到达过期时间(先不考虑浏览器因为缓存空间不足而自动清空缓存和用户清空缓存这些情况),Internet explorer 可以在 C:documents and SettingsAdministratorLocal SettingsTemporary Internet Files 文件夹找到这些缓存文件。在首次访问时,浏览器会根据Expires 和 Cache-Control是否缓存内容,第二次访问时,如果缓存的内容没有过期,则从缓存直接读取相关内容。还有一种情况,当用户点击刷新按钮时,不管是否缓存,浏览器都会从服务器新请求所有内容。

  使用 HttpWatch、yslow的测试过程:

  1、打开过期时间、第一次访问

网站前端的性能优化与测试——内容过期 三联

  (HttpWatch)

  (YSlow)

  2、打开过期时间、第二次访问

  (HttpWatch)

  (YSlow)

  3、打开过期时间,HttpWatch 两次访问结果比较

  4、没有打开过期时间、第一次访问

  5、没有打开过期时间、第二次访问

  6、没有打开过期时间,HttpWatch 两次访问结果比较

  测试的两次结果略有不同,但是我们可以看到,打开过期时间后第二次访问时,相关文件已经被缓存了,Sent、Received都没有产生通信流量,在 Result一项中显示的是Cache,很明显是从缓存中读取数据了。从第一次访问时的49个Request降低为 9个Request,请求时间与流量都明显减少。打开一个没有设置“内容过期”的网站,首次访问和第二次访问产生的http请求数没有任何改变,但 received也降低许多,这是由于第一次请求时,浏览器会在临将相关文件保存在临时文件夹,服务端会返回给客户端一个Last-Modified字段,以后每次需要这个文件的时候,客户端会把这个字段发送到服务端,服务端拿来和最新的文件做比较,如果没有被改变过,那么返回304 Not Modified,那么客户端就直接从缓存里面拿,所以产生的流量非常小,但是request并没有减少,如上面的第5点。

  经过这几次测试比较,可以看到缓存所起的重要作用。 另外在asp.net等程序中,也可以指定过期时间,如:Response.Expires = 3600,这样页面的text/html内容也一样会被缓存,如果数据库内容已经更改,在用户再次访问时,内容并不会更新,在过期时间之内,要获得最新内容可以手动刷新。如果程序中没用指定过期时间、Cache,数据库内容改变后,不管怎样访问网页(新开浏览器,后退),都会得到最新的内容。


提高网站速度的6种网站前端优化方法

  最近有几个同事开通了个人博客,但却抱怨说因为的买的虚拟空间,所以个人博客网站打开速度很 慢。对于这种现象,按照一般的情况来看,一个网站的访问打开速度的快与慢,全是看这个网站使用的空间配置,要是这个空间主机的配置不错,那么你的网站访问 速度就会很快;相反,要是你的空间主机的配置很烂,那么你的网站访问速度就会很慢。其实抛去空间主机的配置因素不谈,我们站长或者seo人员也可以从网页 制作方面着手,从而从现有的资源上提高网站的访问速度。如果你还不知道如何才能优化网站来提高网站的访问速度,那就看一下马海祥博客为你总结出来的六个小 技巧吧,希望对你能有所帮助!

  1、利用浏览器缓存你的 js 和 CSS 文件:

  在网站根目录 .htaccess 中加入以下代码

  ExpiresActive on

  ExpiresDefault “access plus 1 year”

  这段代码的意思是对 jpg|gif|png|css|js 发送 header 缓存头,进行一年的缓存、在浏览器不使用 ctrl+F5 强制刷新时,会一直缓存到时间时间结束,唯一遗憾的是如果你更改了js或者css文件必须把以前的路径或者文件名更改,可以这样 base.js?ver=(x) 这种方式下次浏览器就会自动读取并缓存。

  2、把你的 .js 库文件地址替换成 Google CDN的地址:

  随着 jquery 和 mootools 等js库的使用需要加载的.js文件越来越多也越来越大,通常传统的网站是上传到网站本身的目录。但对于一个接近70多KB的jquery.js体积确实不利于网站响应速度的提升,此时就应该使用Google API 。

  例如:把你的 http://www.***.cn/jquery.x.x.js 替换为 http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js,其意义在于当一个 用户访问过使用 google api 的网站之后,再次访问其他调用了该api地址的网站就不需要再次加载该文件了。从而达到提速的目的。

  不单是jquery库,其他诸如mootools yui 也可以使用这种方式。

  3、精简和优化你的 js 和 CSS:

  虽然有了缓存和gzip保驾护航,但是对于 js 和 css 的优化却也是必须的。我们写的javascript脚本和 css 代码都是经过缩进和换行的,适合人类阅读,但是浏览器执行这些脚本不并需要这些无意义的空格和换行。所以我们应该去除这一些空格换行,甚至缩短 javascript 和 css 里面的变量。诸如此类的优化工具有 YUI Compressor 和 Closure Compiler 。这两个工具都是基于 java 的,使用应该安装jdk并且设置 JAVA_HOME 。(对于非程序员的网站管理员而言确实有点困难)

  此工具可以不用在本地安装jdk,直接上传 js 和 css 文件进行压缩,可选择是采用 YUI Compressor 或 Closure Compiler 。

  4、GZIP 压缩你的 JS 和 CSS 文件:

  压缩js和css可以通过服务器动态脚本进行也可以更简单的使用apache服务器可以在网站根目录 .htaccess 中加入以下代码

  AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json

  Header append Vary Accept-Encoding

  这段代码的意思是调用服务器的压缩模块对以上文件输出之前进行GZIP压缩,gzip的压缩之后所有文件都应该能减少30%以上的体积。特别是对于大量使用js的博客有了gzip保驾护航之后速度能提高不少。

  5、使用css sprites合并图片

  一个网站经常使用小图标和小图片进行美化,但是很遗憾这些小图片占用了大量的HTTP请求,因此可以采用sprites的方式把所有的图片合并成一张图片 ,可以通过相关工具在线合并,也可以在ps中合并。

  6、优化你网站图片:

  大量使用的图片和图标虽然可以给网站带来美轮美奂的效果,图文混编更是一种非常绚丽的博文展现方法。可图片的体积确实不是很给力,jpg是一种 有损压缩格式,而png虽然是无损的,但缺憾是体积颇大。为了减少图片体积达到最快的下载速度,每一张图片上传前应该优化一下体积。

  本文为马海祥博客原创文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/wyzz/207.html,注明出处;否则,禁止转载;谢谢配合!


网站建设:大型网站的前端性能优化和规范

  (文/scott )Web性能涉及的范围太广,但一般web开发者在程序上线以后很多都曾遇到过性能的问题。普遍表现为页面速度开始急剧变慢,正常访问时间变的很长,或则干脆给你抛出异常错误页面。这里会涉及到很多可能发生的情况,举例几个最主要发生的情况:

  * 数据库连接超过最大限制,一般表现为程序的连接池满,拒绝了与数据库的连接。

  * 数据库死锁

  * Web Server 超过最大连接数(一般在虚拟主机上才会限制)

  * 内存泄漏

  * Http连接数太多,即访问量超过了机器和软件设计正常所能提供的服务

  而今天分享的主要是比较偏向前端

  浏览器请求和响应的过程

网站建设:大型网站的前端性能优化和规范 三联

  第一步、浏览器预处理

  查询Cache:读取Cache 或者发送304请求

  第二步、查询DNS

  优化规则--减少DNS查找

  DNS缓存

  浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存(TTL)

  使用Keep-Alive特性

  减少DNS查找

  当客户端的DNS缓存为空时,DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。

  较少的域名来减少DNS查找(2-4个主机)

  第三步、建立连接

  优化规则-- 使用内容分发网络

  美国十大Internet网站和CDN服务提供商

  页面静态化,取决于发布系统

  Ctrip使用的China-Cache和网宿

  优化规则--用域名划分页面内容

  按页面内容划分域名,在合适的资源服务器上存放文件

  第四步、发送请求

  优化规则-- 减少HTTP请求

  HTTP请求30-40,合并文件,图片地图,内联图像

  a)js文件(不超过7个)

  1.tuna_090501_base.js和tuna_090501_module.js(拆分tuna_090501.js)

  2.数据文件js(1-2个)

  3.频道公用js(1个)和页面私有js(1-2个)

  不含ga.js、uiscript.asp和外链其他网站的js

  b) css文件不超过4个,各频道首页和全站首页不超过3个。

  c) 目前无法解决的是allyes广告的请求数。

  ? 大量的广告和产品图片可能会造成,图片请求数很大,可能造成总请求数指标吃紧,

  这个只能从设计上搞定,需要权衡

  ? 目前老页面可能css和js文件请求数可能会超标

  优化规则- – 优化CSS Spirite

  图片地图 Ctrip首页例子

  优化规则– 避免404错误

  避免内部无效的链接

  规则优化 –不要使用frameset,少使用iframe

  搜索引擎不友好、 即时内容为空,加载也需要时间、会阻止页面加载

  禁止使用iframe引入外部资源,不包括allyes广告,不包括about:blank的空页面。

  第五步、等待响应

  优化规则 --避免重定向

  在重定向完毕并且HTML下载完毕之前,是没有任何东西显示给用户的

  涉及服务器负载、数据查询、服务器端缓存等

  第七步、接收数据

  优化规则 -- 压缩组件

  HTML文档、脚本和样式表、XML和JSON的文本响应 压缩如何工作

  压缩通常能将响应的数据量减少将近70%

  优化规则 -- 精简Javascript和Css

  从代码中移除不必要的字符以减少其大小,减少加载时间。

  规则规则– 尽量缩减页面大小

  页面必须小于150K(不含图片)

  a) 静态文件是否gzip

  b) 图片是否压缩优化过

  第八步、读取Cache

  优化规则-- 添加Expire或Cache-Control

  应用于不经常变化的组件,包括脚本、样式表、Flash组件、图片

  Expires和Cache-Control

  规则规则 -- 使用外部的Js和Css文件

  尽可能使用外部Js和Css,因为我们目前大部分Js和Css都做了Gzip和缓存技术,可以充分利用。

  第九步、处理元素

  不要对image和pdf等二进制文件进行gzip压缩

  第十步、渲染元素

  优化规则 -- 将样式表放在顶部

  界面原型页面必须将样式表置于页面顶部,开发人员如无特殊原因也必须将样式表置于顶部。

  以往多数是因为masterpage原因无法将所有样式表置顶,在改版修改masterpage时,尽可能按照此原则进行设计。

  优化规则 – 建议将脚本放在底部

  一般浏览器可以允许并行下载,取决于主机个数、带宽等

  (默认情况下,IE是2个而FF是8个)

  下载脚本时并行下载实际上是被禁用的。

  优化规则-- 移除重复脚本

  必须为0

  优化规则 -- 避免CSS表达式

  影响浏览器渲染时间

  优化规则 – 优化图像

  尽量使用GIF和PNG

  尽量使用png/gif格式的图片,png的图片优先,但是必须注意如要兼容IE6,则png使用一定要注意透明问题。

  图片在上次前一定要先用工具压缩优化(png、jpg)

  Javascript开发规范

  大型的项目在前端 JS 方面有几个需要达成的目标:

  代码逻辑分层

  避免全局变量

  便于多人协作开发

  各部分代码模块化,可以按需加载

  保持全局变量的清洁

  可进行单元测试


网站前端性能测试有什么工具可以测页面加载或渲染等时间呢
页面加载速度本来就是和浏览器与机器性能挂钩,为了区分从服务器端取数据和浏览器加载渲染页面的时间的话,比较推荐使用Chrome自带的开发者工具,其中在Timeline的Tab下就能看到各个行为所消耗的时间,还是很方便的。
每种颜色代表不同的行为,比如Loading,scripting,Rendering,Painting每种颜色代表不同的行为,比如Loading,scripting,Rendering,Painting

觉得这样不够具有代表性的话,可以去各种页面性能检测的网站进行测试,得出的结果比较统一吧
我自己在用的是这个WebPagetest - Website Performance and Optimization Test,能够比较直观的看出性能,而且还给出了优化方法和优化后的性能对比

相关搜索

相似文章

前端优化 网站内容,网站前端的性能优化与测试——内容过期 2020-12-29

优化网站前端页面性能,网站前端的性能优化与测试——内容过期 2020-12-29

前端网站的性能优化,网站前端的性能优化与测试——内容过期 2020-12-29

前端网站性能优化 面试,网站前端的性能优化与测试——内容过期 2020-12-29

前端网站性能优化 缓存,网站前端的性能优化与测试——内容过期 2020-12-29

前端网站的优化,网站前端的性能优化与测试——内容过期 2020-12-29

前端网站资源优化,网站前端的性能优化与测试——内容过期 2020-12-29

网站前端样式的优化与维护,网站前端的性能优化与测试——内容过期 2020-12-29

网站前端晕维优化是啥,网站前端的性能优化与测试——内容过期 2020-12-29

网站性能优化测试,网站前端的性能优化与测试——内容过期 2020-12-29