处理流程 首先从源码解析(Parsing)开始，解析包含了两个步骤 词法解析(Lexical Analysis) 词法解析器(Tokenizer)在这个阶段将字符串形式的代码转换为 Tokens(令牌)。Tokens 可以视作是一些语法片段组成的数组。例如 词法解析后的结果如下: 从上图可以看，每个 Token 中包含了语法片段、位置信息、以及一些类型信息，这些信息有助于后续的语法分析。 语法解析(Syntactic Analysis) 这个阶段语法解析器(Parser)会把 Tokens… »

背景 在 JavaScript 发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今 CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着 web2.0 时代的到来，Ajax 技术得到广泛应用，jQuery 等前端库层出不穷，前端代码日益膨胀，此时在 JS 方面就会考虑使用模块化规范去管理。 本文内容主要有理解模块化，为什么要模块化，模块化的优缺点以及模块化规范，并且介绍下开发中最流行的 CommonJS、AMD、ES6、CMD… »

浏览器渲染流程 首先简单了解一下浏览器请求、加载、渲染一个页面的大致过程： DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户端渲染 这里主要将客户端渲染展开梳理一下，从浏览器内核拿到内容（渲染线程接收请求，加载网页并渲染网页），渲染大概可以划分成以下几个步骤： 解析 html 建立 dom 树 解析 css 构建 render 树（将 CSS 代码解析成树形的数据结构，然后结合 DOM 合并成 render 树） 布局 render 树（Layout/reflow… »

RAIL 是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。 有以下四个方面： Response Animation Idle Load 聚焦用户 以下是用户对性能延迟的感知： 延迟时间 用户感知 0-16ms 很流畅 0-100ms 基本流畅 100-1000ms 感觉到网站上有一些加载任务 1000ms or more 失去耐心了 10000ms or more 直接离开，不会再访问了 Response… »

背景 性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能（加载速度、交互流畅度）优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。 性能优化广义上会包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms… »