使用YSlow分析前端页面性能

简介: YSlow是什么 YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

YSlow是什么

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

YSlow gives you:

Performance report card
HTTP/HTML summary
List of components in the page
Tools including JSLint

YSlow分析web页面并基于一种高性能网站的规则集对于提高网站页面性能提出建议。YSlow是基于Firefox  的页面开发工具。YSlow基于预先制定的3组规则集或者用户自定义的规则集对页面进行分级。它提供一些提高网站页面性能的建议,分析页面的组成部分,显示页面静态文件,以及提供一些性能分析工具,包括Smush.it和JSLint

在firebug扩展里找到YSlow并安装后,它会显示在firebug选项卡里

开始测试网站

      

   测试结果

         

综合级别B,算是不错的结果

最左侧列出的平时几项比较所有推荐的优化原则,包括减少http请求,避免空src属性,404页面,使用gzip压缩页面内容等,cnblogs大部分都考虑到了。

现在重点说明几项

1 倾向于使用ajax get请求

When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE's maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.

当使用XMLHttpRequest时,浏览器通过两步实现post请求, (1) 发送头信息  (2) 发送数据。因为get方法是把头信息和数据一起发送的,所以使用get会更好点,除非数据量比较大时,数据量超过一定范围的话,不适合使用get

2 Put JavaScript at bottom

JavaScript scripts block parallel downloads; that is, when a script is downloading, the browser will not start any other downloads. To help the page load faster, move scripts to the bottom of the page if they are deferrable.

浏览器在下载js过程过程中会阻断html下载,将js放置于页面底部有利于页面加载。

3 on Use cookie-free domains

When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. To workaround this problem, make sure that static components are requested with cookie-free requests by creating a subdomain and hosting them there.

当浏览器向服务器请求一张静态的图片前,会先发送同域名下的 cookie,服务器对于这些 cookie 不会做任何处理。因此它们只是在毫无意义的消耗带宽。所以你应该确保对于静态内容的请求是无 cookie 的请求。

Use cookie-free domains 的翻译摘自网络,平时开发对于这一项不是很注意

另外提供了Yshow一些工具

       

JSLint 是一个在线js语法检查工具,根据自己的规则检测js合法性,编写js时可以作为参考

其它的工具用于显示页面所有js,css等功能

使用YShow可以检测页面性能,为我们平时的优化起到一定的参考作用

参考阅读

http://developer.yahoo.com/performance/rules.html#cookie_free

推荐阅读

一步一步实现网站的多语言版本

说说程序中的日志

如果您觉得文章内容有一定帮助,请点击推荐

PS:YSlow不仅仅在Firefox下可以使用,同时兼容很多主流浏览器,详细请查看官网

 

 

目录
相关文章
|
2天前
|
前端开发 JavaScript
前端在移动端使用 100vh 导致页面出现滚动条的解决方案
前端在移动端使用 100vh 导致页面出现滚动条的解决方案
10 2
|
4天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
11 1
|
17天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
11天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
61 2
前端JS读取文件内容并展示到页面上
|
5天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
11 0
|
28天前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
28 1
|
1月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
19 1
|
23天前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
183 0
|
2月前
|
前端开发 JavaScript
前端基础(一)_前端页面构成
本文介绍了前端页面的基本构成,包括HTML(负责页面的结构和语义)、CSS(负责页面的样式和表现)和JavaScript(负责页面的行为和动态效果)。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页,并解释了HTML文档的结构和语法。
30 0