• Works
    • 笔记
    • 资源
  • 关于我

拉风的博客

源码

解读uglifyJS(四)——Javascript代码压缩

Posted by raphealguo on 22 五月, 2014 7 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

前言

对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小,前边混淆压缩变量名字是方法之一,但是还有诸多可以把代码体积压小的规则,我在本篇文章会对UglifyJS所有压缩代码体积的细节整理成一条条的规则,为了方便理解,还会给出一些压缩前代码以及压缩后代码的对比。由于UglifyJS里边对IF的压缩规则最多,也是最为丰富精彩的部分,放在最后边解释。
还是那样,有兴趣了解UglifyJS实现细节,看文章最后的我对它源码做的注释。
留意:

  1. 下边代码样例中左侧为压缩前源码,右侧为压缩后代码,为了对比方便,下边多数的代码压缩后的变量名字没有混淆处理,同时一个压缩规则的例子尽量不混其他压缩策略进去。
  2. 我下文多处写到的表达式语句是指UglifyJS语法分析得到的simple_statement,你可以认为只要能放到逗号表达式里边的都算是simple_statement。

[Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

解读uglifyJS(三)——Javascript的变量名混淆

Posted by raphealguo on 17 五月, 2014 2 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

前言

UglifyJS会对JS文件的变量名进行混淆处理,要理解Javascript变量混淆的细节,我们需要回答以下几个问题:
1.遇到一个变量myName,我们怎么知道这个myName变量要不要混淆
2.混淆名字怎么生成才合适,新的名字替换旧的名字时有什么要注意的地方?
3.哪些关键字会产生一个作用域?
4.作用域链跟符号表在UglifyJS里边是怎么体现?
5.UglifyJS混淆的过程是什么样?

我们先梳理一下这5个问题,最后贴出我阅读UglifyJS在这部分的实现时做的代码注释。 [Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

解读uglifyJS(二)——AST生成

Posted by raphealguo on 15 五月, 2014 Leave a Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

为了理解源码结构,必须要进行语法分析,uglify在语法分析阶段得到一棵AST树(它的结构是数组嵌套数组,parse-js移植于一个Lisp的项目,获得的AST树类似Lisp里边的表,数组套数组:["toplevel", ["stat", [xxxx]]])

对于JS来说,一个文件就是处于一个全局域的语句块,uglify里边把这个命名为toplevel的语句块,里边涉及各种状态,太具体的状态就不画图了,上一个语句块的状态转移的图片,其他还是要阅读源码比较爽快。

[Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, Zend源码

解读uglifyJS(一)——token扫描

Posted by raphealguo on 14 五月, 2014 3 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

uglifyjs是用来压缩混淆JS文件,同时会对代码尽可能的优化,使得最后产出的js代码非常小,uglifyjs通过nodejs写的,底层用了一个parse-js的进行AST分析。
这两天在工作空隙的时间阅读了uglifyjs的源码,发现了很多js语法细节的东西,略有收获,顺便把看的过程注释在它代码里边。

词法分析的文章写过好几篇了,不想重复了,直接贴代码注释了。 [Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码

PHP-Zend引擎剖析之CV变量(三)

Posted by raphealguo on 27 十一月, 2013 1 Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

前言

讨论完虚拟机的基本流程后,接下来就是把细节的地方揪干净,接下来几篇文章先揪一下PHP的变量。我们知道PHP的变量是弱类型的,但是我并不打算从这个开始分析,我先把最简单的赋值语句:<?php $var = 1;?>开始分析整个变量赋值的过程,同时解释一下PHP的CV(compiled variable)变量。
从上一篇《PHP-Zend引擎剖析之Hello World(二)》知道每条语法规则从编译到运行需要经历以下两个步骤:
  1. 词法分析,接着语法分析匹配中规则
  2. 虚拟机执行一条opcode涉及到几个东西:opcode的操作数op1,op2以及opcode的返回结果result(三个参数对应的类型);opcode对应的handler。

我们先看一下在zend_language_parser.y里边是如何书写赋值语句的语法规则(在没有任何说明的情况下,本文讨论的仅仅是:$var = 1;这样一条简单的赋值语法规则)。

[Read more...]

Posted in: PHP, Zend源码, 源码 | Tagged: PHP源码, Zend源码

PHP-Zend引擎剖析之Hello World(二)

Posted by raphealguo on 20 十一月, 2013 2 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

前言

这一次,我围绕Hello World来展开Zend虚拟机的执行过程。Hello World的PHP版本:

<?php
     echo ‘Hello World’;
?>

前一篇文章聊到的词法分析阶段就会把上边的脚本分析出一个Token序列:
我们得到一个Token序列:T_OPEN_TAG, T_ECHO, T_CONSTANT_ENCAPSED_STRING, ‘;’, T_CLOSE_TAG。但在Zend虚拟机执行的过程中,是怎么去分析这个Token序列的?

[Read more...]

Posted in: PHP, Zend源码, 源码 | Tagged: PHP源码, Zend源码

PHP-Zend引擎剖析之词法分析(一)

Posted by raphealguo on 14 十一月, 2013 5 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

前言

闲来研究一下PHP底层的Zend引擎源码,Zend引擎是PHP脚本的虚拟机。
在PHP上层有SAPI接口,负责对各个接入层的抽象,例如PHP在Apache模块里边的实现,Fast-CGI的实现,命令行的实现。在PHP底层便是Zend虚拟机,Zend虚拟机负责解析PHP语法的文件,上层可以在虚拟机中注册函数/变量提供给虚拟机调用,例如从Apache分发过来的HTTP请求经过PHP的Apache SAPI接口后,便会注册一些$_COOKIE、$_GET等全局变量,而在命令行模式下便没有这些跟HTTP相关的全局变量。
Zend引擎跟其他编译器跟解释器一样,会经历词法分析/语法分析,语法分析后会生成op code,也就是PHP的中间代码,最终Zend虚拟机执行的是op code。第一篇贡献给Zend引擎的理当是词法分析的源码剖析。
PS:分析的代码是PHP-5.5.5的源码包,下载地址:http://windows.php.net/downloads/releases/php-5.5.5-src.zip。
[Read more...]
Posted in: PHP, Zend源码, 源码 | Tagged: PHP源码, Zend源码

jQuery源码剖析(十)——Sizzle选择器引擎之位置伪类

Posted by raphealguo on 13 二月, 2013 Leave a Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

前言

本篇文章是剖析Sizzle的最后一篇,上一篇文章把大概的匹配器解析过程剖析了,但是还有一个特殊的选择器规则没说到:位置伪类。(姑且称为位置伪类吧,因为它与节点在父节点的位置信息有关)
上一篇文章已经把详细的匹配器工作过程叙述了一遍,本篇文章不再叙述相关过程,只是把其中有关于位置伪类特殊处理的部分剖析一下,了解详细匹配过程移步到《jQuery源码剖析(九)——Sizzle选择器引擎之匹配器》
[Read more...]

Posted in: javascript, jQuery源码, Sizzle源码, 源码 | Tagged: jQuery, Sizzle, 源码

jQuery源码剖析(九)——Sizzle选择器引擎之匹配器

Posted by raphealguo on 8 二月, 2013 1 Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

前言

上篇文章《jQuery源码剖析(八)——Sizzle选择器引擎之解析原理》谈到一个终极匹配器superMatcher,它把候选元素集合seed筛选出最后符合规则的节点集合。如下图:

从这个图中我们知道,superMatcher的输入是DOM节点结合,输出也是DOM节点集合。这个终极匹配器里边需要一堆小的匹配器来判断当前输入的节点是否符合规则。
因此容易想到这样的匹配器的形式如:function(elem){return true;}
也即是说,输入一个DOM节点,判断一下输入节点是否符合某个匹配规则,如果符合了,那它就应该在最后的结果集里边。 [Read more...]

Posted in: javascript, jQuery源码, Sizzle源码, 源码 | Tagged: jQuery, Sizzle, 源码

jQuery源码剖析(八)——Sizzle选择器引擎之解析原理

Posted by raphealguo on 7 二月, 2013 6 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/category/%E6%BA%90%E7%A0%81/

前言

这篇文章的主题是解释Sizzle选择器引擎中的解析原理,以及部分源码注释。注意,这篇文章会做一下两点限制:

  • 暂时忽略位置选择器的伪类,例如,:even, :eq等
  • 暂时忽略XML格式,应该说之后的剖析都不会关心jQuery如何解析XML,文中贴出的源码会把XML那部分相关的去除掉

我接下去的几篇文章会用以下例子来逐步剖析Sizzle的解析原理以及匹配器构成原理:

javascript
1
2
3
4
5
6
7
8
9
10
11
<div>
  <p>
    <span class="clr">
      <input type="text" />
    </span>
  </p>
  <div class="clr">
    <input type="checkbox" name="readme" />
    <p>Hello World</p>
  </div>
</div>

使用以下选择器S来选取节点:$(‘div .clr > input[name="readme"] + p’)。
在开始前,我们必须了解一个真相:CSS选择器的解析顺序是从右到左的。 [Read more...]

Posted in: javascript, jQuery源码, Sizzle源码, 源码 | Tagged: jQuery, Sizzle, 源码
1 2 下一页 »

标签

BFS CA CSS dfs ExtCSS HTTP HTTPS jQuery MVVM PHP源码 Sizzle ssl uglifyjs Vue Vue2.x webview模拟器 Web开发 Zend源码 上线 云南游 入门 前端工程 加密 协议 工具 提测 效率 数字签名 数学 旅游 游戏 源码 灰度 监控 硬件 算法 网络模型 计算机 认证

近期评论

  • 捕获页面中全局Javascript异常 - 算法网 发表在《前端代码异常监控》
  • Augustmyv 发表在《如何学习Vue2源码》
  • Holographicuqj 发表在《如何学习Vue2源码》
  • Foamcub 发表在《如何学习Vue2源码》
  • liusir 发表在《关于我》

链接表

  • bang
  • DIV.IO
  • 小木舟

Copyright © 2022 拉风的博客.

Theme by ThemeHall.