女王控的博客

前端

144 篇文章

深入理解 Babel

处理流程 首先从源码解析(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

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… »

0%