- 浏览: 951231 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
sscsacdsadcsd:
mike8625 写道react还要自己的一些标签 还得编译 ...
对于React体系的一点想法 -
mike8625:
说的都是给大公司听的,国内很多还是小公司,做个小项目, 说实话 ...
关于国内前端和JS技术发展的乱想 -
mike8625:
react还要自己的一些标签 还得编译 编译吧浏览器端说还慢 ...
对于React体系的一点想法 -
u012814086:
下意识想到了Golang
JavaScript语句后应该加分号么? -
xueduanyang:
我是水羊,年轻的时候觉得只要有好斧子就能做成好产品,各种产品都 ...
关于国内前端和JS技术发展的乱想
2009-05-11
A lesson of RegExp: 50x faster with just one line patch
While I'm developing WebSHi (which is the fastest syntax highlighter written by JavaScript), I also write many performance testings for other rivals. One of them is SyCODE Syntax Highlighter , which is written by silverdrag (水月). It derives from the famous SyntaxHighlighter 1.5.x (dp.SH for short) and as silverdrag's words, it should be 5x to 10x faster than original dp.SH .
But unfortunately, my testings can't prove it. Though it won't trigger the "script slowly" dialog like dp.SH when highlighting large file, in most cases, it only shows 2x faster than dp.SH on IE6. On the other side, when I tested it on FF, I was so surprised that SyCODE is extremely slow, it will cost 5s+ for processing a 700 lines JavaScript file while the original dp.SH only half second.
It's very strange, so I digged into SyCODE. I found that SyCODE highlights more words for JavaScript language (currently all my testcases are to highlight some JavaScript source code files). The original dp.SH (and most other rivals) only highlights the keywords of JavaScript language. SyCODE also highlights global names like Array , Boolean , String , etc., and properties and methods like alert , charAt , onclick etc.. That means SyCODE need to do more text searching and replacement. I disabled such features and tested again, this time SyCODE is 2x faster than dp.SH.
So you will think the problem is just the extra words replacement. And what interesting is it just affect FF a lot, even SyCODE do more text processing, it's still faster than (or at least as fast as) dp.SH on other browsers (Safari, Chrome, Opera and IE).
I'm curious about the root cause of the problem. After some researching, I located it. Just one simple function:
GetKeywords: function(str) {
return '\\b' + str.replace(/\s+/g, '\\b|\\b') + '\\b';
},
The function GetKeywords
is used to generate a regexp
for keywords search and replacement. For example, GetKeywords("abstract break byte case catch")
will return a regexp /\babstract\b|\bbreak\b|\bbyte\b|\bcase\b|\bcatch\b/
.
The code is straightforward, but it's bad and generate a very inefficient regexp.
The keypoint is \b
, \b
is a word boundary assertion. To test whether a position is a word
boundary, the regexp engine need to consider both the left character of
the position and the right character of the position. If one is a word
character (aka a-z, A-Z, 0-9 and the underscore "_") and the other is
not, then it's a word boundary. You see it need both look forward one
char and look backward one char. Though \b assertion is not very
expensive, each failed match of /\babstract\b|\bbreak\b|\bbyte\b|\bcase\b|\bcatch\b/
will do such look forward/backward 10 times, and JavaScript language
has 50+ keywords means each failed match will do 100 times, and SyCODE
add 400+ properties/methods words means extra 800+ times!
Of coz, \b assertion can be easily optimized, but our test result shows that FF's regexp engine doesn't do a good optimization at all.
Anyway, there is a very cheap way to solve the problem. Most of those \b assertions are unnecessary
. /\babstract\b|\bbreak\b|\bbyte\b|\bcase\b|\bcatch\b/
can be rewrite as /\b(?:abstract|break|byte|case|catch)\b/
, those two regexp are equal, the only difference is the latter only need two \b assertion. Yes, we just need two
, even SyCODE add 400+ words, we still just need two
.
It's trivial to fix GetKeywords :
GetKeywords: function(str) {
return '\\b' + str.replace(/\s+/g, '\\b|\\b') + '\\b';
return '\\b(' + str.replace(/\s+/g, '|') + ')\\b';
},
Let's see the result of applying this one line patch:
700 | 6.7s | 0.1s |
1600 | 15.5s | 0.3s |
4300 | 41.5s | 0.7s |
Oops, one line code cause 50x difference.
Besides FF, the patch also help other browsers a lot.
IE6 | 6.3s | 2.8s |
Safari3 | 2.6s | 0.8s |
Opera9 | 8.2s | 1.7s |
Chrome1 | 2.3s | 0.5s |
As we can see, even Chrome, which introduce a very optimized regexp engine, also shows at least 4x difference.
SyCODE derives from dp.SH, the GetKeywords function is also the legacy from dp.SH, and even the new SyntaxHighlighter 2 still use the similar code. Because dp.SH only highlight about 50 keywords for JavaScript langauge, you will not see performance issue like SyCODE, but applying this one line patch still introduce 20% faster on most browsers.
But this patch is not the end. In next article, I will discuss a complex technique to get another 10% to 40% faster for keywords search/replacement.
评论
挫
greatly inspires me on digging more deeper into regexp.
can't wait to see the following posts.
发表评论
-
论ES6模块系统的静态解析
2013-03-14 04:56 15685本文是Dave Herman的《Stati ... -
如何创建一个JavaScript裸对象
2012-08-27 02:11 7913所谓裸对象,即 naked object ,是指没有原型(sp ... -
JavaScript语句后应该加分号么?
2012-06-19 03:10 14171这是一个老生常谈的问 ... -
shim是应该抛异常还是应该fail silently?
2011-08-11 17:26 5481玉伯发布了es5-safe模块 ... -
7月30日的广州演讲视频和Slides
2011-08-01 23:38 31157月30日在W3CTech广州站活动上的演讲,题目是:ECMA ... -
如何判断一个函数的意图是被用作构造器,也就是可视为“类”
2011-07-21 13:55 2891前提是不要求做什么特殊标记。只是最大可能的猜测函数的作用大概是 ... -
关于国内前端和JS技术发展的乱想
2011-07-19 18:53 33034玉伯在我的一条微博后面写了一些(和主题不是很相关但)非常值得思 ... -
Module与Trait的比较
2011-08-12 12:50 3891最近我多次提及module和trait。 粗看,我们可以发现 ... -
如何将let结构(block scope)转换到当前的JavaScript代码
2011-07-12 17:24 2947本文是对如何将let结构转换到ES3代码的补充。 首先,原文 ... -
JavaScript的未来方向之观察
2011-07-12 02:53 8314最近每次去杭州,都有 ... -
我为什么力挺NodeJS
2011-07-04 00:27 0之前在参加CNodeJS社区在 ... -
JS之父再谈JS历史(续完)
2010-12-31 04:20 3371又到年底,我觉得是时候还债了。自开blog来,我出了不少“太监 ... -
我为什么是DC黑续,兼答Tin
2010-04-27 14:29 0我同意安全是一个重要问题。我不同意的是把所谓安全放到凌驾于其他 ... -
我为什么是DC黑─Why I disagree with Douglas Crockford
2010-04-26 17:51 10926参加完了QCon北京大会, ... -
JavaScript的EOS(分号)问题
2009-05-08 16:24 5728在http://bbs.51js.com/viewthre ... -
JavaScript五大关键字
2009-05-06 17:53 4712近期做语法高亮项目的副产品,是统计了一下几个主流JS工具包中各 ... -
curry和partial的差别
2009-03-28 00:15 367051js上asfman翻译了http://ejohn.org/ ... -
Eval is Evil , With evil too
2009-03-27 18:39 0with的问题: 2009-3-27 17:12:40 ... -
IE全局变量的Dissociative Identity Disorder(人格分裂症)
2009-03-16 02:47 14674最近,小麦提出了一个疑惑: 小麦 写道最后介绍一个我也搞不明白 ... -
JScript下Array对象的性能问题
2009-02-14 02:51 3951今天看了微软JScript官方blog上去年的两篇文章: ht ...
相关推荐
3796 i-FRAME 安装、操作和维护手册
我的visio画图
NPOI可以在没有安装Office的情况下对Word或Excel进行读写,NPOI是一个开源的C#读写Excel、WORD等微软OLE2组件文档的项目
STM32学习软件编程资料,STM32F103C8单片机经典外设应用设计实例软件源代码,KEIL工程文件,可供学习参考。
VoLTE高丢包优化指导书
5G通信行业、网络优化、通信工程建设资料
5G通信行业、网络优化、通信工程建设资料
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
该课题主要是以SpringMVC模式运行的,采用了mysql数据库进行数据的管理,掌握并且熟练使用百度API相关技术。系统分为了管理员用户和一般用户,主要有以下模块: 管理员用户: 1.实时路况管理:实时路况的信息采用了百度地图进行直观的管理,利用了GIS相关技术进行管理,能够让用户方便的第一时间查看到相应的地图信息,以及实时路况信息。 2.投诉留言管理:实现了对投诉留言信息的查看和回复。 3.系统信息设置:实现了系统的访问数据的统计,以及针对系统的管理员 用户和管理员密码进行管理。 4.用户信息管理:管理了一般用户的基本信息情况,针对用户的资料进行修改管理。 一般用户: 1.用户资料管理:实现了用户个人的资料信息管理。 2.路况信息查看:实现了对路径的实时信息的查看,某个路段在某时间的交通情况的查看,以三种情况代表路况情况(拥挤、缓行和畅通) 3.路况分析:采用了折线图,分析每天或者某个月的路况信息,以折线图形式直观展示。该功能采用jFreeChart库实现。 4.留言发布:针对一些路况信息,进行留言反馈,并能查看管理员反馈信息。
5G通信行业、网络优化、通信工程建设资料。
5G通信、网络优化与通信建设
5G通信行业、网络优化、通信工程建设资料。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
199-数据安全治理的思考与规划-论剑.pdf
SPVLoc: Semantic Panoramic Viewport Matching for 6D Camera Localization in Unseen Environments
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用,尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代,所以对于信息的宣传和管理就很关键。系统化是必要的,设计网上系统不仅会节约人力和管理成本,还会安全保存庞大的数据量,对于信息的维护和检索也不需要花费很多时间,非常的便利。 网上系统是在MySQL中建立数据表保存信息,运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时,也能及时通过数据输入的有效性规则检测出错误数据,让数据的录入达到准确性的目的,进而提升数据的可靠性,让系统数据的错误率降至最低。 关键词:vue;MySQL;SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
实验内容七:RIP、OSPF动态路由协议 实验目的:配置RIP、OSFP动态路由 实验任务1:RIP路由配置实验 (1) 添加三台2811型号路由器,为每台路由器添加网络接口模块 先关闭路由器电源,电源开关如下图。 ( 实际操作中,为确保电路安全,只有关机后,才可以在路由器中插入新的网络模块卡,类似往计算机中插入网卡。) 在三台路由器上均添加模块NM-2FE2W,拖拽右下角模块到左上方路由器插槽中,如下图所示。(NM-2FE2W有2个 快速以太网接口)。 插入新模块后,再重新开启路由器。 (2) 添加三台PC机,所有设备之间用交叉线连接,配置网络接口IP地址。 按照拓扑图中地址设置, 配置路由器各网络接口IP地址、子网掩码。 配置PC机各网络接口IP地址、子网掩码、默认网关。 (3)分别查看三台路由器的路由表 Router# show ip route 三个路由表中,只显示了每台路由器直接连接的网络地址和接口。 (4)在三台路由器上,分别配置动态RIP路由协议,自动更新路由表。 R1路由器示例: Router>enable Router#config