YSlow老矣尚能饭否

前端性能优化
yslow

#1

----Browser Insight 前端调研

最近的项目到了前端性能优化的阶段了,很久以前用 yslow 来做页面分析,这次下载之后装了老半天,然后点击居然没反应,我去!难不成我装了小白鼠版本?卸载了又装,装了又卸载。最后无奈。。。。。google 一下。

为什么我的 YSlow 用不了 - Firefox 火狐浏览器 - 火狐社区

火狐中 yslow 点击运行没有反应,是为什么,版本不兼容吗?...._火狐社区

火狐浏览器中有 yslow 插件,前一天运行的好好的,第二天就..._百度知道

看了几个帖子,原来 yslow 在最新的谷歌和火狐浏览器下已经无法使用了,开发者难道出去度假了?

转了一圈明白了,最新的火狐浏览器有了自己的调试工具,不在需要安装 Firebug 了,而 yslow 依赖于 Firebug 的,故而,yslow 就在火狐浏览器上玩不转了。

还好 yslow 有谷歌浏览器插件,下载之后折腾了半天,装上后,依然是点击没有反应。。。。唉!

以前老用 yslow 的评分做自我考核,现在 yslow 挂掉了,尺子没了,感觉路都走不稳了,看了下官网界面

我明白了!肯定是 yslow 开始混 node 社区了,不和谷歌还有火狐浏览器玩了。

上 npm 网站搜索下,不出所料,很多围绕 yslow 的插件,还有封装为服务的,可见nodejs+PhantomJS 配合还是蛮好的

我本地试用了下这几个版本的组建:

"yslowjs":"0.3.2"
"jQuery":"1.7.4"
"url":"0.11.0"
"jsdom":"3.1.2"

可以解析网页标题 然后出评分

代码很简单

whyslow.js

var YSlow = require('yslowjs');
var request = require('request');
var jquery = require('jquery');

module.exports = function(siteUrl, callback) 
{
 makeRE(siteUrl, function(err, title) {
   if (err) {
			callback(err)
		} else {
			getYSlow(siteUrl,function (err,result) {			
		                  callback(null,title,result)
			})
		}
	})
}
function makeRE(siteUrl, callback) {
	request(siteUrl, function(error, response, body) {
		console.log(response.statusCode)
		if (!error && response.statusCode == 200) {
			// console.log(body) 
			getTitle(body, function(err, title) {
				callback(err, title)
			})
		} else {
			console.log(error) 
			callback(error)
		}
	})
}
function getTitle(cont, callback) {
	var env = require('jsdom').env,
		html = cont;
	// first argument can be html string, filename, or url
	env(html, function(errors, window) {
		if (errors) {
			callback(errors)

    	} else {
		var $ = require('jquery')(window);
		var title = $('head>title').text();
		callback(null, title)
	}
});
}
function getYSlow(siteUrl,callback) {
	console.log('getYSlowURL')
	console.log(siteUrl)
	var yslow = new YSlow(siteUrl, ['--info', 'grade']); //(basic|grade|stats|comps|all) [all],
	console.log('\nRunning (Async)....');
	yslow.run(function(error, result) {
		if (error) {
			console.trace(error);
			callback(error)
		} else {
			console.log('=> overall:   ' + result.o);
			console.log('=> load time: ' + result.lt);			
			callback(null,result)
		}
	});
}

简单的调用下

yslow.js

var whyslow = require('./webgrade/whyslow');
var fs = require('fs');
console.log('===')
whyslow('http://bbs.linuxtone.org/forum.php', function(err, title, result) {
	console.log('===')
	if (err) {
		console.log(err)
	} else {
		console.log(result)
		console.log(title)
		 var str = JSON.stringify(result);
		fs.writeFileSync('./schema/yslow.json', str, {
			encoding: 'utf8'
		});
	}
})

看下结果(我承认,有些乱。。。)

webjs@webjs-upc:~/codepalce/nodejslearn/app$ node yslow.js 
=== 
200 
getYSlowURL 
http://bbs.linuxtone.org/forum.php 

Running (Async).... 
=> overall:   75 
=> load time: 16111 
=== 
{ w: 925579, 
  o: 75, 
  u: 'http%3A%2F%2Fbbs.linuxtone.org%2F', 
  r: 99, 
  i: 'ydefault', 
  lt: 16111, 
  g: 
   { ynumreq: 
      { score: 20, 
        message: 'This page has 12 external Javascript scripts.  Try combining them into one.\nThis page has 4 external stylesheets.  Try combining them into one.\nThis page has 18 external background images.  Try combining them with CSS sprites.', 
        components: [] }, 
     ycdn: 
      { score: 0, 
        message: 'There are 97 static components that are not on CDN. <p>You can specify CDN hostnames in your preferences. See <a href="https://github.com/marcelduran/yslow/wiki/FAQ#wiki-faq_cdn">YSlow FAQ</a> for details.</p>', 
        components: [Object] }, 
     yemptysrc: { score: 100, message: '', components: [] }, 
     yexpires: 
      { score: 0, 
        message: 'There are 13 static components without a far-future expiration date.', 
        components: [Object] }, 
     ycompress: 
      { score: 56, 
        message: 'There are 4 plain text components that should be sent compressed', 
        components: [Object] }, 
     ycsstop: { score: 100, message: '', components: [] }, 
     yjsbottom: { score: 100, message: '', components: [] }, 
     yexpressions: 
      { score: 58, 
        message: 'There is a total of 16 expressions', 
        components: [Object] }, 
     yexternal: 
      { message: 'Only consider this if your property is a common user home page.', 
        components: [Object] }, 
     ydns: 
      { score: 70, 
        message: 'The components are split over more than 4 domains', 
        components: [Object] }, 
     yminify: 
      { score: 90, 
        message: 'There is 1 component that can be minified', 
        components: [Object] }, 
     yredirects: { score: 100, message: '', components: [] }, 
     ydupes: { score: 100, message: '', components: [] }, 
     yetags: { score: 100, message: '', components: [] }, 
     yxhr: { score: 100, message: '', components: [] }, 
     yxhrmethod: { score: 100, message: '', components: [] }, 
     ymindom: 
      { score: 69, 
        message: 'There are 1448 DOM elements on the page', 
        components: [] }, 
     yno404: { score: 100, message: '', components: [] }, 
     ymincookie: { score: 100, message: '', components: [] }, 
     ycookiefree: 
      { score: 95, 
        message: 'There is 1 component that is not cookie-free', 
        components: [Object] }, 
     ynofilter: { score: 100, message: '', components: [] }, 
     yimgnoscale: { score: 100, message: '', components: [] }, 
     yfavicon: 
      { score: 95, 
        message: 'Favicon is not cacheable', 
        components: [] } } }

yslow 渐渐衰落也有一定原因

  1. yslow 主要是页面结构分析,但是现在界面主要靠 js 绘制例如 react 等

  2. yslow 主要用于 pc 上的浏览器,但是目前前段研究重点已经转向 mobile。

  3. HTML5 接口包中的 window.performance 对象包含了判断一个网页加载状态和快慢的相关属性,移动端 也支持这个接口,安卓支持的最好,苹果最新版本操作系统也支持

悄悄话:其实就是浏览器把 yslow 干的事情自己给干了,But。。。。。。只干了一点点点点

寻找 yslow 的接盘侠

前段时间逛“前端乱炖”,在这篇帖子 "1024 征服高冷测试女神"中发现了一个专业收集浏览器错误信息和性能指标信息的工具—— OneAPM 的 Browser Insight,我猜测window.performance 也一定收集了,否则哪来性能指标呢?

在这个前端性能监控工具的源代码 (http://bi-collector.oneapm.com/static/js/bw-loader-411.4.5.js) 里面搜了下 window.performance ,果然有!

毕竟都是靠 js 收集客户端信息,所以部署方式和谷歌统计一样

关于 window.performance 里面各个属性的含义,以及在前端性能优化过程中如何去使用比较这些值,
之后有机会再聊吧~

下面是一张 Browser Insight 中一个应用模块各种指标的截图,个人觉得既清楚又形象。

注:本文由OneAPM资深技术工程师张超编写,由OneAPM产品运营赵保森整理发布


WordPress 全方位优化指南(上)
#2

YSlow 是什么鬼,不都在用 OneAPM Browse Insight 了吗?
:pill: :pill: :pill: :pill: :pill: :pill:


#3

涉猎广泛 :christmas_tree:


#4

yslow 是什么东西


#5

一个雅虎开发的网页评价系统


#6

是的!最近YSlow确实有些过期了。。OneAPM的确实越来越给力了


#7

YSlow 是什么鬼,不都在用 OneAPM Browse Insight 了吗?