blog
blog copied to clipboard
Pines-Cheng
技术博客
## Babel 的处理流程  ## Babel 与 Babylon **[Babel](https://github.com/babel/babel) 是 JavaScript 编译器 compiler**，更确切地说是源码到源码的编译器，通常也叫做 `转换编译器（transpiler）`。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。 > Babel 是一个通用的多功能的 JavaScript 编译器。此外它还拥有众多模块可用于不同形式的静态分析。 > > 静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 （执行代码的同时进行代码分析即是动态分析）。 静态分析的目的是多种多样的，...
渲染一个网页，浏览器需要完成的步骤： 1. 处理 HTML 标记并构建 DOM 树。 2. 处理 CSS 标记并构建 CSSOM 树。 3. 将 DOM 与 CSSOM 合并成一个渲染树。 4. 根据渲染树来布局（Layout），以计算每个节点的几何信息。 5. 将各个节点绘制到屏幕上。 我们的演示网页看起来可能很简单，实际上却需要完成相当多的工作。**如果 DOM 或 CSSOM 被修改，您只能再执行一遍以上所有步骤，以确定哪些像素需要在屏幕上进行重新渲染**。 ## 构建对象模型...
## DevTools 原理 DevTools 本质上可以看成是一个前端小应用，代码在这里： [ChromeDevTools/devtools-frontend](https://github.com/ChromeDevTools/devtools-frontend)，当然，你也可以在 Chrome 浏览器直接打开：`devtools://devtools/bundled/inspector.html` 查看运行效果。  DevTools 是通过 [Chrome 远程调试协议（Remote Debugger Protocal) ](https://chromedevtools.github.io/devtools-protocol/)来和后端进行交互和调试的，这里说的后端一般指的是：Chrome 的远程调试功能，可以通过 ``` sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 ``` 在指定端口开启，然后在浏览器地址栏输入 `http://localhost:${port}` 能看到一个列表页面，列出了当前所有可调试的页面和插件。  点击Example...
 * 遵循了 VSCode 的 Theme 规范，可参考：[Color Theme](https://code.visualstudio.com/api/extension-guides/color-theme) * [Color Theme](https://code.visualstudio.com/api/extension-guides/color-theme) 包括 Workbench colors 和 Syntax colors * 语法高亮（Syntax Highlight）由两部分组成：[Tokenization](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#tokenization) 和 [Theming](https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#theming) * 基于 [CSS Custom Properties](https://www.w3.org/TR/css-variables-1/) 实现主题切换 * 通过插件加载/切换主题的方式值得借鉴...
## WebSocket 出现前 构建网络应用的过程中，我们经常需要与服务器进行持续的通讯以保持双方信息的同步。通常这种持久通讯在不刷新页面的情况下进行，消耗一定的内存资源常驻后台，并且对于用户不可见。在 WebSocket 出现之前，我们有一下解决方案： ### 传统轮询(Traditional Polling) 当前Web应用中较常见的一种持续通信方式，通常采取 `setInterval` 或者 `setTimeout` 实现。例如如果我们想要定时获取并刷新页面上的数据，可以结合Ajax写出如下实现： ```javascript setInterval(function() { $.get("/path/to/server", function(data, status) { console.log(data); }); }, 10000); ``` 上面的程序会每隔10秒向服务器请求一次数据，并在数据到达后存储。这个实现方法通常可以满足简单的需求，然而同时也存在着很大的缺陷：在网络情况不稳定的情况下，服务器从接收请求、发送请求到客户端接收请求的总时间有可能超过10秒，而请求是以10秒间隔发送的，这样会导致接收的数据到达先后顺序与发送顺序不一致。于是出现了采用 `setTimeout` 的轮询方式： ```javascript...
SSH 详解
## 简介 `SSH（Secure Shell）`是一个提供数据通信安全、远程登录、远程指令执行等功能的安全网络协议，由芬兰赫尔辛基大学研究员`Tatu Ylönen`，于1995年提出，其目的是用于替代非安全的Telnet、rsh、rexec等远程Shell协议。之后SSH发展了两个大版本SSH-1和SSH-2。 通过使用SSH，你可以把所有传输的数据进行加密，这样"中间人"这种攻击方式就不可能实现了，而且也能够防止 `DNS欺骗` 和 `IP欺骗`。使用SSH，还有一个额外的好处就是传输的数据是经过压缩的，所以可以加快传输的速度。SSH有很多功能，它既可以代替Telnet，又可以为FTP、Pop、甚至为PPP提供一个安全的"通道"。  SSH为一项创建在**应用层**和**传输层**基础上的安全协议，为计算机上的 Shell 提供安全的传输和使用环境。 ## SSH的基本框架 SSH协议框架中最主要的部分是三个协议： - `传输层协议（The Transport Layer Protocol）`：传输层协议提供服务器认证，数据机密性，信息完整性等的支持。 - `用户认证协议（The User Authentication Protocol）`：用户认证协议为服务器提供客户端的身份鉴别。 - `连接协议（The Connection Protocol）`：连接协议将加密的信息隧道复用成若干个逻辑通道，提供给更高层的应用协议使用。...
* 基于 PhosphorJS 可以实现 桌面端/Web 端统一实现类桌面的交互 * 了解 PhosphorJS 的核心组件 Widget 的接口和实现 * 了解 Theia 是如何基于 PhosphorJS 在 ApplicationShell 中进行页面组装的 * 了解 Theia 前端界面是如何通过 `FrontendApplication.start()` 构建的 * 了解 React 与...
 随着前端工程化的不断完善，CSS 预处理器已经成为项目中不可缺少的部分，很多人在项目技术选型阶段就会先选择一个 CSS 预处理器，绝大部分前端工程的脚手架也内置里一系列的 CSS 预处理的模版，大家已经习惯了享受 CSS 预处理器带来的书写代码的灵活流畅，反而是原生的 CSS 被冷落在一旁。 可能许多前端开发人员依然觉得 CSS 预处理器属于比较新的技术，其实不然，最早的 CSS 预处理器 Sass 从 07 年诞生距今已有 12 年，相对较新的的 Stylus 也已发布 9 年了。 前端的技术栈发展突飞猛进，W3C 下的 CSS 工作组也一直从社区汲取营养，加快...
JS 装饰器详解
在 ES6 中增加了对类对象的相关定义和操作（比如 class 和 extends ），这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候，变得并不是那么优雅。这个时候，我们就需要一种更优雅的方法来帮助我们完成这些事情。 ## 什么是装饰器 ### Python 的装饰器 在面向对象（OOP）的设计模式中，decorator被称为装饰模式。OOP的装饰模式需要通过继承和组合来实现，而Python除了能支持 OOP 的 decorator 外，直接从语法层次支持 decorator。 如果你熟悉 python 的话，对它一定不会陌生。那么我们先来看一下 python 里的装饰器是什么样子的吧： ```python def decorator(f): print "my decorator" return...
## 相关字段简述 RFC2616规定的47种http报文首部字段中与缓存相关的字段。 ### 通用头部字段  ### 请求头部字段  ### 响应头部字段  ### 实体头部字段  ## Pragma与Expires 在 http1.0 时代，给客户端设定缓存方式可通过两个字段——`Pragma`和`Expires`来规范。虽然这两个字段早可抛弃，但为了做http协议的向下兼容，你还是可以看到很多网站依旧会带上这两个字段。 ### Pragma 当该字段值为no-cache的时候（事实上现在RFC中也仅标明该可选值），会知会客户端不要对该资源读缓存，即每次都得向服务器发一次请求才行。 ### Expires 有了Pragma来禁用缓存，自然也需要有个东西来启用缓存和定义缓存时间，对http1.0而言，Expires就是做这件事的首部字段。 Expires的值对应一个GMT（格林尼治时间），比如Mon, 22 Jul 2002...