web系统性能及规范检测笔记

静态检查

关于javascript的语言特性,Douglas Crockford在蝴蝶书里面写过:“一些特性因为规范的不完善而可能导致可移植性问题,一些特性会导致代码难以阅读或修改,一些特性诱使我们追求奇技淫巧但却易于出错,还有一些是语言本身设计错误”。

由于javascript语言本身弱类型灵活多变的特点,某些特性的不正确使用或者格式的混乱会导致造成一些未预见的行为或错误。为了解决此类的问题,我们需要静态检查

JSLint

JSLint是Douglas Crockford编写的工具,它将Web开发人员多年积累下来的反模式整合为一套规则,用以对Javascript脚本扫描,并给出相应的问题描述信息。

规则大致包含几个方面:

  • 语法错误检查: 比如括号配对遗漏等问题。
  • 代码格式检查: 比如缺少结尾分号、数组&对象末尾多余逗号等问题。
  • 变量定义检查: 比如未定义变量成为全局变量等问题。
  • 糟粕特性检查: 比如with、void语句等不推荐使用的问题。

最初的JSLint由于规则严格不妥协和拒绝开源等问题,受到一些诟病。时至今日JSLint也允许规则自定义并且可以在github上获取到它了。

关于JSLint的默认规则和自定义规则盗张图描述:

另外,在这篇文章发布的三天前(2015/10/22), Douglas依旧在更新JSLint。它的强(yan)大(ge)功(gui)能(ze)从源码中可以略见一斑。

JSLint https://github.com/douglascrockford/JSLint

JSHint

JSHint是Anton Kovalyov基于JSLint实现的一个开源工具。相对于JSLint来说,JSHint稍微友好一些,可配置性更高。也是现在web开发者使用最多的静态检查工具之一。

关于JSHint配置,分 增强参数(Enforcing Options)松弛参数(Relaxing Options) 。将增强参数设置为true,则JSHint会检查规则更严格,在某些情况下会产生更多告警;同理,将松弛参数设置为true,则JSHint会检查规则更友好,在某些情况下会产生的告警更少。

记录一部分常用配置参数:

增强参数

作用

bitwise

禁用位运算符

curly

循环和条件语句必须使用大括号块包围

eqeqeq

强制使用全等(===)和不全等(!==)来替代相等(==)和不相等(!=)

freeze

禁止重写原生对象原型

indent

代码缩进宽度

noarg

禁止使用arguments.callee和arguments.caller

undef

禁止使用未定义变量

unused

禁止定义了变量却不使用

trailing

禁止行尾空格

maxparams

函数可接受的最大参数数量

maxlen

每行代码最大字符串长度

松弛参数

作用

boss

允许在循环和条件语句中使用赋值( 如if(var i=0, len=...){ )

esnext

允许ES6特性

loopfunc

允许循环中定义函数

sub

允许使用方括号语法获取对象属性

除此之外还有一个环境参数(Environments),这个参数告诉JSHint有一些全局变量已经被预定义。

环境参数

作用

browser

指定浏览器全局变量(document,navigator,FileReader等)

devel

指定用于调试的全局变量(console,alert等)

jquery

指定jquery

module

指定module

...

指定...

具体完成配置查询 http://jshint.com/docs/options/

其他

JSCS

JSCS是一个代码风格检查器,它只匹配代码格式的问题,不匹配潜在的bug、error等。它拥有90多个不同的规则,但是如果不做配置的话就没有任何作用。换言之,一切JSCS的要做的东西都需要根据需求自定义开启。

优点:可以自定义插件进行扩展 缺点:慢

ESLint

ESLint是Zakas大神2013年开发的工具,它的特点是可扩展、每条规则独立、不内置编码风格。它默认包含了所有 JSLint、JSHint 中存在的规则,迁移容易,而且可以给规则设置“警告”、“错误”或者直接禁用几个等级。另外它也包含代码风格检测规则,并支持插件扩展。

优点:支持React JSX,支持ES6,支持插件扩展 缺点:慢

动态检查

静态地谈性能不能解决全部的问题,甚至说,大部分性能优化问题是需要程序真正跑起来才能去发现解决优化的。那么关于动态的检测、优化记录几个方法及工具。

我爱火狐

console对象最初是由mozilla提出的,虽然现在各个现代浏览器都实现了这个对象,并且99%也都满足了日常需求,不过在某些非常细微的地方还是略有差异。

console并不只是可以log、error、info等。

函数执行监控

这是一对函数,监控开始 console.profile(tag) 和 监控结束 console.profileEnd()。在这两个指令中间执行的所有逻辑调用会被记录并统计,并且被console.profileEnd返回。

比如现在有几个蛋疼的函数:

function iAmAFuckingFunction(){
    for(var i=0; i<10 ;i++){
        eggacheA(999);
    }
    eggacheB(9999);
}
function eggacheA(count){
    for(var i=0; i<count; i++){
    }
}
function eggacheB(count){
    for(var i=0; i<count; i++){
    }
}

可以在代码中这样加入调试

console.profile("蛋疼函数检测1");
iAmAFuckingFunction();
console.profileEnd();

然后可以在控制台中看到

在这个统计中可以看到从profile到profileEnd之间执行的逻辑有哪些函数被调用,被调用次数,执行时间,总时间等等各项信息。

另外在firebug控制台也有按钮可以直接使用profile

点击“概况”按钮,然后触发一些事件(交互逻辑、ajax等等),操作完毕再次点击“概况”按钮,就可以得到刚才操作所执行逻辑的信息。

比如,现在我想看看平台lazyload逻辑的相关执行信息,那么我先打开页面,点击“概况”

然后把页面向下滚动,滚动结束后再次点击“概况”

可以看到消耗时间最长的是jq的css函数,但这个是总时间,现在想看单个函数执行时间最长,那么点击“平均时间”tab

这个时候能看到最慢的函数执行时间了。前几个都是库,我需要看自己逻辑中的执行情况,那么在右边“文件”tab可以看到相关信息了。

执行时间监控

另外还有一对函数: console.time(tag) 与 console.timeEnd(tag)。它们的用法跟profile差不多,只不过返回的是两个指令之间的时间差。

还是刚才那三个蛋疼函数

console.time("eggache");
iAmAFuckingFunction();
console.timeEnd("eggache");

返回

另外console.timeEnd是有返回值的,返回值就是时间差的毫秒数。也就是说:

console.time("eggache");
iAmAFuckingFunction();
var timeSub = console.timeEnd("eggache");
//timeSub 0.698906173342948

声明:以上方法只能在firefox->firebug中使用,其他浏览器正确无法获取信息

YSlow

这是一个web性能工具,最早由Yahoo!基于firebug开发,现在已经扩展到各个浏览器都能够安装。它按照雅虎页面优化准则(基于34条那个版本比14条更细)来对网站进行性能分析,并对各个检测项按照A、B、C、D、E、F给出评级,当然也会有一个0~100的评分。

现在对腾讯教育平台首页进行YSlow Run Test

会看到一个执行进度条,片刻后执行完毕可以看到

平台首页得分是90分,评价还是很高的,而且这里有个小小的错误,YSlow不认识78910.url.cn,把这几个域名下的资源误认为是不在CDN之下,实际上这些是做了CDN的。所以其实评分还应该更高一点~~~~ 咳咳偏题了,继续说YSlow。

前面说了YSlow是基于雅虎页面优化准则来进行性能检测的,那么其实这其中大部分的事情也都在码农群体中心照不宣地遵守了,只是有一些东西也许随着技术的更新迭代不是那么完美适用了。比如“添加Expires头”这一条。这个准则的初衷其实是为了缓存文件来着,随着HTTP1.1的普及,在有Cache-Control头的情况下,其实没有Expires也是完全可以的。

附两张YSlow分析的图

最后

Timeline的图贴一张,不赘述了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏风口上的猪的文章

.NET面试题系列[2] - .NET框架基础知识(2)

面试出现频率:虽然很重要但不怎么出现,可能会考你定义,以及程序集包括什么,然后自然的话题就跑到反射上去了。

672
来自专栏前端说吧

JS-抽奖系统-实现原理

3684
来自专栏hrscy

202 - Swift 的核心是什么?

不知道大家有没有看过 WWDC 2015 的视频,其中有一个编号为 408 的视频解释了这个问题,下面是视频链接:Protocol-Oriented Progr...

802
来自专栏杂烩

程序eclipse下run和debug不一致问题

    公司核心代码,这里不上了,主要将如何发现问题、如何排查问题和如何解决问题。

492
来自专栏CSDN技术头条

提高代码可读性的10个技巧

以下为译文: 如果你的代码很容易阅读,这也会帮助你调试自己的程序,让工作变得更容易。 代码可读性是计算机编程领域的一个普遍课题,这也是作为开发人员首先要学习的...

1847
来自专栏web编程技术分享

js常用方法和一些封装(3) -- dom相关

34210
来自专栏信安之路

UAF 实例-RHme3 CTF 的一道题

堆的题目基本都是选择菜单,这里可以添加,删除,选择,编辑,展示球员,还可以显示队伍,功能看着很多啊

670
来自专栏AzMark

Python 学习之异常

1403
来自专栏深度学习与计算机视觉

PEP 8 —Python代码风格指南(一)

原文:PEP 8 – Style Guide for Python Code PEP:8 题目:Python代码风格指南 作者:Guido van Ro...

1909
来自专栏我是攻城师

最近工作中遇到ElasticSearch一些问题总结

42310

扫码关注云+社区