VAN

全局上下文的变量对象初始化是全局对象, 而函数上下文的变量对象初始化只有Arguments对象;EC创建阶段分为创建阶段和代码执行阶段;在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值;在代码执行阶段，会再次修改变量对象的属性值.后语参考文章:《聊一聊javascript执行上下文》《木易杨前端进阶-JavaScript深入之执行上下文栈和变量对象》ec创建阶段分为创建阶段和代码执行阶段。

JUEJIN小册|node原理讲解实例探究|8案例七：[视频流转 MP3 工具] - Node 数据流和管道 - Stream。[JUEJIN小册|node原理讲解实例探究|9案例八：[静态资源服务器] - Node 工具集 - path[util。[JUEJIN小册|node原理讲解实例探究|2案例一： [龟兔赛跑] Node 的语言基础 - JS（ES5[6[7。

juejin小册前端面试一面 1：ES 基础知识点与高频考题解析juejin小册前端面试2一面 2：JS-Web-API 知识点与高频考题解析juejin小册前端面试3一面 3：CSS-HTML 知识点与高频考题解析juejin小册前端面试4一面 4：从容应对算法题目(1)juejin小册前端面试5一面 5：浏览器相关知识点与高频考题解析juejin小册前端面试6一面 6：开发环境相关知识点与高频考题解析juejin小册前端面试7二面 1：如何回答常见的软技能问题juejin小册前端面试8二面 2：如何介绍

从本章开始，我们的性能优化探险也正式进入到了“深水区”——浏览器端的性能优化。平时我们几乎每天都在和浏览器打交道，在一些兼容任务比较繁重的团队里，苦逼的前端攻城师们甚至为了兼容各个浏览器而不断地去测试和调试，还要在脑子中记下各种遇到的 BUG 及解决方案。即便如此，我们好像并没有去主动地关注和了解下浏览器的工作原理。我想如果我们对此做一点了解，在项目过程中就可以有效地避免一些问题，并对页面性能做出相应的改进。“知己知彼，百战不殆”，今天，我们就一起来揭开浏览器渲染过程的神秘面纱！

随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。我认为，WebApp 就是我们前端性能优化的产物，是我们前端工程师对体验不懈追求的结果，是 Web 网页在性能上向 Native 应用的一次“宣战”。WebApp 优异的性能表现，要归功于浏览器存储技术的广泛应用——这其中除了我们上节提到的缓存，本地存储技术也功不可没。

从本节开始，我们进入网络层面的性能优化世界。大家可以从第一节的示意图中看出，我们从输入 URL 到显示页面这个过程中，涉及到网络层面的，有三个主要过程：● DNS 解析● TCP 连接● HTTP 请求/响应对于 DNS 解析和 TCP 连接两个步骤，我们前端可以做的努力非常有限。相比之下，HTTP 连接这一层面的优化才是我们网络优化的核心。因此我们开门见山，抓主要矛盾，直接从 HTTP 开始讲起。HTTP 优化有两个大的方向：● 减少请求次数● 减少单次请求所花费的时间。

缓存可以减少网络 IO 消耗，提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性，Chrome 官方给出的解释似乎更有说服力一些：通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。很多时候，大家倾向于将浏览器缓存简单地理解为“HTTP 缓存”。

Vue 和 React 都实现了异步更新策略。虽然实现的方式不尽相同，但都达到了减少 DOM 操作、避免过度渲染的目的。通过研究框架的运行机制，其设计思路将深化我们对 DOM 优化的理解，其实现手法将拓宽我们对 DOM 实践的认知。本节我们将基于 Event Loop 机制，对 Vue 的异步更新策略作探讨。

开篇我们先对上上节介绍的回流与重绘的基础知识做个复习（跳读的同学请自觉回到上上节补齐 →_→）。回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

图片优化——质量与性能的博弈《高性能网站建设指南》的作者 Steve Souders 曾在 2013 年的一篇 博客 中提到：我的大部分性能优化工作都集中在 JavaScript 和 CSS 上，从早期的 Move Scripts to the Bottom 和 Put Stylesheets at the Top 规则。为了强调这些规则的重要性，我甚至说过，“JS 和 CSS 是页面上最重要的部分”。几个月后，我意识到这是错误的。图片才是页面上最重要的部分。

从本节开始，我们要关心的两大核心问题就是：“DOM 为什么这么慢”以及“如何使 DOM 变快”。后者是一个比“生存还是毁灭”更加经典的问题。不仅我们为它“肝肠寸断”，许多优秀前端框架的作者大大们也曾为其绞尽脑汁。这一点可喜可贺——研究的人越多，产出优秀实践的概率就越大。因此在本章的方法论环节，我们不仅会根据 DOM 特性及渲染原理为大家讲解基本的优化思路，还会涉及到一部分生产实践。循着这个思路，我们把 DOM 优化这块划分为三个小专题：“DOM 优化思路”、“异步更新策略”及“回流与重绘”。

可视化方案以及可编程方案性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈，从而有的放矢地开展具体的优化工作。平时我们比较推崇的性能监测方案主要有两种：可视化方案、可编程方案。这两种方案下都有非常优秀、且触手可及的相关工具供大家选择，本节我们就一起来研究一下这些工具的用法。

首先要告诉大家的是，截止到上个章节，我们需要大家绞尽脑汁去理解的“硬核”操作基本告一段落了。从本节开始，我们会一起去实现一些必知必会、同时难度不大的常用优化手段。这部分内容不难，但很关键。尤其是近期有校招或跳槽需求的同学，还请务必对这部分内容多加留心，说不定下一次的面试题里就有它们的身影。图片加载时机的优化。

防抖的中心思想在于：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。继续讲司机开车的故事。这次的司机比较有耐心。第一个乘客上车后，司机开始计时（比如说十分钟）。十分钟之内，如果又上来了一个乘客，司机会把计时器清零，重新开始等另一个十分钟（延迟了等待）。直到有这么一位乘客，从他上车开始，后续十分钟都没有新乘客上车，司机会认为确实没有人需要搭这趟车了，才会把车开走。

服务端渲染（SSR）近两年炒得很火热，相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”（服务端渲染的运行机制）、“为什么”（服务端渲染解决了什么性能问题 ）、“怎么做”（服务端渲染的应用实例与使用场景）这三个点，对服务端渲染进行探索。服务端渲染是一个相对的概念，它的对立面是“客户端渲染”。在运行机制解析这部分，我们会借力客户端渲染的概念，来帮大家理解服务端渲染的工作方式。基于对工作方式的了解，再去深挖它的原理与优势。

不知不觉，小册内容已经过了小半了。回顾一下走过的路：在对知识体系进行一番梳理后，我们操起 webpack 开始优化文件（顺便还学了点 Gzip），随后又马不停蹄进入图片的小天地，最后把缓存和本地存储的味道逐一品尝，终于得以窥见网络层面核心优化技术的全貌。古人云：学而不思则罔。站在性能优化的半山腰，我希望大家可以缓一缓，停下来思考一个问题：我得到了什么？作为作者，我在自己写的每一行字背后都费了思量。在过去的每个章节里我都预先为知识点做了权重划分，力求“详略得当”，而非盲目地求大求全。

既然已经读到了最后一章，我想大家应该都收获了一张属于自己的前端性能优化的核心知识“索引表”——我希望它能成为大家的起点，成为各位今后拓展相关技能的素材。框架和工具固然重要，但一个合格的前端工程师，还应该具有抽象思维的能力和技术攻关的实力——这两点，都可以在性能优化的学习和实践过程中得到磨炼和凸显。反复地阅读文字、一味地深究理论是无法使我们的技能变“厚”的，最好的办法就是去做，去用，在用的过程中发现问题、解决问题、拓展问题——那些“未完成的故事”，一定会在这个过程中被你书写圆满。

提起性能优化，大家现在脑海里第一时间会映射出什么内容呢？可能是类似“雅虎军规”和《高性能 JavaScript》这样历久弥香的经典之作，也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向、并接到第一个性能优化任务时，我做的第一件事是向搜索引擎求助，第二件事是买书，然后开始了摸着石头过河，前后花费了大量的时间和精力。

微信小程序虽然提供自己的 IDE 开发工具，但是对于用惯了 VS Code、Sublime 等编辑器的前端工程师来说，其体验还是挺差的，因此本项目中，只将微信小程序开发者工具作为模拟器、调试和代码上传的工具，其他开发使用自己熟练的编辑器 / IDE 即可。除了选择自己熟练的编辑器 / IDE 之外，还应该在代码层面提高编码体验，本实战项目使用 Sass 和 ES6 语法来写代码，通过构建工具编译成小程序可以识别的 WXSS 和 ES5，最后也使用构建工具压缩和优化静态资源。

微信小程序问世没多久，大家发现用原生小程序语法开发，开发体验和效率真的不尽如人意。WePY 此时横空出世，彼时 WePY 的目的，是让小程序开发更贴近传统 H5 框架开发，支持引入 npm 包，支持组件化开发和 ES Next 新特性。开发模式：更符合现有 MVVM 框架的开发模式，类 Vue，节省上手成本组件化开发：支持组件嵌套、循环、组建通信等npm 包管理：处理了 npm 包依赖问题ES Next：语法更现代，提升开发体验。

对于多个页面都使用的代码片段，可以提炼成组件或者公共 API 来使用，这样既可以集中维护，又可以减少整体代码量。

小程序并不是 HTML5 应用，而是更偏向于传统的 CS 架构，它是基于的模式，一切皆组件（视图组件）。下面是小程序与普通 Web App 的对比。windowdocumentwindowdocumentlocationwx.request页面组件模块上，WXML 提供了一整套的「自定义 UI 组件标签」，有些组件实际是 HTML5 实现的，有些组件为了解决权限、性能和适配等问题实际是 Native 实现的（如 map、input、canvas、video）。

在需要使用自定义组件的页面配置文件page.json中添加其中，icon就是我们自定义的标签名称，后面的值则是相对于页面文件、icon 组件对应的路径。--定位icon--> < icon type = " dingwei " /> <!--天气icon--> < icon type = " {{ today.icon }} " class = " logo " > </ icon >--定位icon--> < icon type = " dingwei " /> <!

本小册实战部分选择制作一款天气+心情签到的小程序，命名为「新鲜天气」，目前该程序已经完成上线，大家可以通过扫描下面的二维码进行线上体验：在实战选题上，笔者尽量做到基础并且覆盖足够多的 API 和功能，让大家可以学到更多的内容。所谓基础，并不是「简单」，而是大家自己线下方便练习和实现的意思，「新鲜天气」数据都是来自腾讯地图、和风天气这些免费的 API，任何人都可以免费使用；小程序·云开发初级配置是免费的，能够满足我们小型小程序的计算、存储和数据库功能。学完本小册，大家就可以按照小册的内容实际操作一下。

天气预报页面主要有两个重要的流程：获取地理位置和获取天气数据。本节重点介绍这两部分的代码实现。

经过前两节的内容，基本天气预报页面的布局和数据交互都已经完成了，本节来介绍使用小程序的绘图 API 在「实时天气」模块上做一个雨雪效果。

日历的日期背景颜色是跟当时签到心情相对应的，当切换了日历的月份之后，应该重新获取当前月份的签到数据信息。小程序云开发的云函数和数据库是面向全球开发者的，它们使用的时区并不是我们的东八区（北京时间），因此我们在获取 Date 的时候就要小心，简单拼接。获取的时间并不是北京时间，数据库存入的数据如果使用北京时间（本地 JS），那么获取数据的时候就应该使用北京时间（云端执行 JS 时）。为了解决 Date 的问题，笔者在计算时区的时候，都转换成了 UTC 标准时间，比如在云函数中，笔者使用了。

功能，可以通过。

是微信团队联合腾讯云团队推出的一套小程序开发解决方案。小程序·云开发为开发者提供完整的云端流程，弱化后端和运维概念，开发者无需购买和管理底层计算资源，包括服务器、数据库、静态存储，只需使用平台提供的简易 API 进行核心业务等开发，实现快速上线和迭代，把握业务发展的黄金时期。简单来说，小程序开发中用到的服务器、数据库和静态资源管理，都可以托管到「小程序·云开发」上，小程序开发者只需要关注业务功能实现，而不需要关心服务器运维等带来的问题。

小程序本身支持很多组件，比如地图、按钮等，开发者也可以自己做项目内公共组件，比如我们后面实战部分会介绍做一个 icon 组件，放在components目录下面，这样此小程序的任何页面如果要使用这个 icon 公共组件，只需在自己的page.json添加完成之后，在页面代码中就可以直接使用<icon>的 tag 了。官方文档有更加详细的介绍。

开篇：微信小程序概述什么是微信小程序小程序是有别于传统 Web App、HTML5、原生 App 以及微信公众号的一种新的应用形式，由微信团队于 2017 年 1 月对外发布的，经过近两年的发展，小程序越来越成熟，小程序研发也越来越受到重视。什么是小程序？用张小龙自己的话来说：小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。作为微

那么这三层是如何分工协作的，他们的关系是什么，内部调用机制如何，我们先埋下一个伏笔在这里。

对于 Node 的框架部分，我们本册只针对 Koa 简单学习一下，因为它的源码更精简，结构更清晰，学习的难度相对较小，Koa 的历史就不多说了，也是 TJ 开创，从 GeneratorFunction 时代到现在的 Async/Await 异步时代，经历了一个较大的版本变化，大家可以翻开 Koa 5 年前的代码 看一看，早期的 Koa 就分离了 Application 和 Context，代码风格和流程的设计就比较精简，对于进化到今天的 Koa ，在它里面像 cookies koa-compose del

我们都知道 Node 是事件驱动的异步服务模型，高效的同时也很脆弱，因为所有的事情都是在一个单线程中完成的，一旦这个单线程挂了，那么整个服务就挂了，或者有点这个单线程里有个非常耗时的同步任务，那么其他的请求进来也会阻滞在这里了，这时候我们就希望能充分利用计算机的多核优势，多起几个独立的进程，每个进程都像是伏地魔的一个魂，让我们的服务有多条命，就算是一个挂了，整个服务还不至于瘫痪，而且还可以把压力分摊到每个进程上面，整体服务更加健壮，也能支撑更多的并发。幸运的是，在 Node 里面，提供cluster。

{${HTTP 作为整个互联网数据通信中几乎最主流的协议，它本身就是巨大的知识库，无论是工作 1 年还是 10 年的工程师，每一次重温 HTTP 的整体知识相信都会有很多收获，从 HTTP/1.1 到 HTTP/2，从 HTTP 到 HTTPS，从 TCP 的握手到 cookie/session 的状态保持…，我们在接触和 HTTP 的时候，一开始很容易被吓唬到，扎进去学习的时候也确实枯燥乏味，比较好的办法，就是在工作中不断的使用它，不断的练习，随着使用中的一点点深入，我们会对 HTTP 越来越熟悉。

其中 process.cwd() 这个特殊一些，大家要注意，文件的真实位置和程序启动文件时候所处的位置不一定是相同的，而 process.cwd() 就是指运行程序时候所处的目录，无论是文件还是文件夹，它都有针对当前运行程序的一个相对地址和一个相对于操作系统的绝对路径，其中相对地址随着参照物和运行程序会发生变化，而绝对路径是不变的，参考。我们在文件堆中穿梭的时候，最害怕的就是进错目录，进错层级，还要考虑到 windows 系统和 Linux 系统的差异性，一个文件夹是。

明显这个展现速度加快许多，内容是一片片出来的，原因就在于 pipe 会自动监听 data 和 end 事件，文件中的每一小段数据都会源源不断的发送给客户端，pipe 方法 还可以自动控制后端压力，在客户端连接缓慢的时候 Node 可以将尽可能少的缓存放到内存中，通过对内存空间的调度，就能自动控制流量从而避免目标被快速读取的可读流所淹没，并且，数据在 pipe 的时候，只有 pipe 链末端的目标流真正需要数据的时候，数据才会从源头被取出来，然后顺着管子一路走下去，属于被动消费，那么整体表现就会更优异一些。

关于流的概念，我们下一节会深入讨论，本节大脑中建立这种认识就可以了：无论多大的数据，无非就是一段段的 0 和 1，可以把它丢到一个管道里，不断的涌向另一个终点，就像水管里的水一样，既然能流动，那每次搬运数据、接收数据的时候，数据都存在哪里呢，为了保证速度应该是放到内存中的吧，那它长什么样子呢，我们接下来就来了解下 Buffer，也就是缓冲。计算机的世界只有 0 和 1，文字、图片、视频，还是程序本身都不例外，互联网又是计算机节点组成的复杂结构，我在网这端，你在网那头，我们通过邮件、钉钉、微信…

事件，是用户与浏览器互动过程中，最高频的一种交互机制，用户无论是鼠标点击，滚动，拖拽，还是一个表单文件上传行为，都通过事件的形式来与应用运行环境互动。事件有它的触发者，也有它的接收者或者处理者，连接这两者以及赋能二者能力的就是事件机制。

这一节的内容略显枯燥，我们对读写总结一下，无论读写，都有两种方式，一种粗矿的，一种精细化的，精细化的控制，需要先 open 一个文件，然后操作读写，但需要手工调用 close 方法关闭文件，这种方式适合于多次写入或读取。