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 条评论
登录 后参与评论

相关文章

来自专栏Crossin的编程教室

一些常见的新手问题

本账号开设至今,回答的各种问题,没有一万也有八千了。今天挑了其中曝光率较高的一些问题,跟各位分享,供入门不久和新关注的同学参考。 1. 我是零基础,如何开始学习...

30990
来自专栏13blog.site

Mybatis-Generator生成Mapper文件中<if test="criteria.valid">的问题解答

写在前面 由于开源了项目的缘故,很多使用了My Blog项目的朋友遇到问题也都会联系我去解决,有的是把问题留在项目的issue里提出,有的是在我的私人博客里留言...

34860
来自专栏优启梦

渗透测试中的域名伪装原理

今天在《网络渗透测试--保护网络安全的技术、工具、过程》一书中看到了一个关于对恶意链接进行域名伪装的方法,以前从不知道的一个方法,特此记录下来:

21850
来自专栏java一日一条

深入理解 Java 中的 try-with-resource

众所周知,所有被打开的系统资源,比如流、文件或者Socket连接等,都需要被开发者手动关闭,否则随着程序的不断运行,资源泄露将会累积成重大的生产事故。

17020
来自专栏开发

Kotlin开发指南

最近用kotlin重写了项目中的部分模块,领略到了这个Google官方推荐语言的魅力。

58640
来自专栏Python入门

这4个Python实战项目,让你瞬间读懂Python!

Python当下真的很火。Python实战项目,也一直尤为关注,接下来,和大家介绍下十个Python练手的实战项目

20040
来自专栏老九学堂

【新手必读】Java初学者,你遇到的问题都在这了

很多小伙伴初次接触Java时往往会感觉十分迷茫,在这里老九君收集并解答了同学们遇到的一些基础问题,希望能对大家的Java学习之路有所帮助。 初识篇 1、什么是J...

37760
来自专栏Seebug漏洞平台

PWN学习之house of系列(一)

house of spirit是fastbin的一种利用方法,利用demo可参考: https://github.com/shellphish/how2heap...

1.2K130
来自专栏CSDN技术头条

QtQuick 系列教程之 QML 与 C++ 交互

QML 作为一种灵活高效的界面开发语言已经越来越得到业界的认可。QML 负责界面,C++ 负责逻辑,这也是 Qt 官方推荐的开发方式。那么 QML 与 C++ ...

26230
来自专栏Seebug漏洞平台

PWN学习之house of系列(一)

作者:Hcamael@知道创宇404实验室 准备一份house of系列的学习博文,在how2heap上包括下面这些: house of spirit hous...

443130

扫码关注云+社区

领取腾讯云代金券