Javascript代码是如何被压缩的

通常我们用到的打包工具如 webpack,会在打包的时候将源代码合并在一个文件中,并且压缩成一行,去掉能去掉的空格、换行。合并代码这一步,是由 webpack 框架完成。压缩代码则是借助第三方混淆压缩代码库 terser 完成。

terser 的压缩分两步,压缩(compress)和混淆(mangle)。compress 负责去掉空格,将能合在一起的表达式合在一起。mangle 负责缩短变量的长度,又叫混淆。主要流程是构造 ast,遍历 ast,根据配置转换 ast。

Read more

前端基础拾遗之CSS篇

盒子模型

CSS 中的每个元素都被表示为一个矩形的盒子,每个盒子有四个边:content edge, padding edge, border edge, and margin edge。

box-sizing: content-box(默认),border-box ,padding-box(deprecated)。

content-box 下盒子实际宽度不等于 width,不包括 padding 和 border 部分,布局计算不方便。border-box 下盒子实际宽度与 width 相等。

Read more

前端基础拾遗之HTML篇

DOCTYPE 作用

DTD(文档类型定义)是一组机器可读的规则,他定义 XML 或 HTML 的特定版本中允许有什么,不允许有什么。而 DOCTYPE 是用来描述使用哪个 DTD,保证网页以标准模式渲染,一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。HTML5 之前的 HTML 基于 SGML(Standard Generalized Markup Language, 标准通用标记语言)标准,需要 DTD 来保证在标准模式下渲染。HTML5 只需要 DOCTYPE 就可以保证在标准模式下渲染。

Read more