小程序框架分为两部分：逻辑层（App Service）和 视图层（View）。视图层即WXML 和 WXSS，JavaScript 即逻辑层，视图层与逻辑层间的数据传输和事件系统依托于微信app，这既是双线程。 小程序一直以来采用的都是 AppService 和 WebView 的双线程模型，基于 WebView 和原生控件混合渲染的方式，小程序优化扩展了 Web 的基础能力，保证了在移动端上有良好的性能和用户体验。Web 技术至今 30 多年历史，作为一款强大的渲染引擎，它良好兼容性和丰富的特性。 尽管各大厂商在不断优化 Web 性能，但由于其繁重的历史包袱和复杂的渲染流程，使得 Web 在移动端的表现与原生应用仍有一定差距。为了进一步优化小程序性能，提供更为接近原生的用户体验，我们在 WebView 渲染之外新增了一个渲染引擎 Skyline，其使用更精简高效的渲染管线，并带来诸多增强特性，让 Skyline 拥有更接近原生渲染的性能体验。

渲染进程里面发生的事 这篇文章是探究Chrome内部工作原理的四集系列文章中的第三篇。之前我们分别探讨了Chrome的多进程架构以及导航的过程都发生了什么。在本篇文章中，我们将要窥探一下渲染进程在渲染页面的时候具体都发生了什么事情。 渲染进程会影响到Web性能的很多方面。页面渲染的时候发生的东西实在太多了，本篇文章只能作一个大体的介绍。如果你想要了解更多相关的内容，Web Fundamentals的Performance栏目有很多资源可以查看。 渲染进程处理页面内容 渲染进程负责标签（tab）内发生的所有事情。在渲染进程里面，主线程（main thread）处理了绝大多数你发送给用户的代码。如果你使用了web worker或者service worker，相关的代码将会由工作线程（worker thread）处理。合成（compositor）以及光栅（raster）线程运行在渲染进程里面用来高效流畅地渲染出页面内容。 渲染进程的主要任务是将HTML，CSS，以及JavaScript转变为我们可以进程交互的网页内容。 解析 构建DOM 前面文章提到

导航的时候都发生了什么 这篇文章是探究Chrome内部工作原理的四集系列文章中的第二篇，在上一篇文章中我们探讨了不同进程或者线程是如何负责浏览器各个不同部分的工作的。在这篇文章中，我们将会深入了解每个进程和线程是如何沟通协作来为我们呈现出网站内容的。 让我们来看一个用户浏览网页最简单的情景：你在浏览器导航栏里面输入一个URL然后按下回车键，浏览器接着会从互联网上获取相关的数据并把网页展示出来。在本篇文章中，我们将会重点关注这个简单场景中网站数据请求以及浏览器在呈现网页之前做的准备工作 - 也就是导航（navigation）的过程。 一切都从浏览器进程开始 我们在上一篇文章CPU，GPU，内存和多进程架构中提到，浏览器中tab外面发生的一切都是由浏览器进程（browser process）控制的。浏览器进程有很多负责不同工作的线程（worker thread），其中包括绘制浏览器顶部按钮和导航栏输入框等组件的UI线程（UI thread）、管理网络请求的网络线程（network thread）、以及控制文件读写的存储线程（storage thread）等。当你在导航栏里

CPU，GPU，内存和多进程架构 在这个4集系列教程里面，我将会从Chrome浏览器的高层次架构（high-level architecture）开始说起，一直深入讲到页面渲染流水线（rendering pipeline）的具体细节。如果你想知道浏览器是怎么把你编写的代码转变成一个可用的网站，或者你不知道为什么一些特定的代码写法可以提高网站的性能的，那你就来对地方了，这篇文章就是为你准备的。 作为本系列文章的第一篇，我们会先了解一些关键的计算机术语以及Chrome浏览器的多进程架构。 计算机的核心 - CPU和GPU 要想理解浏览器的运行环境，我们先要搞明白一些计算机组件以及它们的作用。 CPU 首先我们要说的是计算机的大脑 - CPU（Central Processing Unit）。CPU是计算机里面的一块芯片，上面有一个或者多个核心（core）。我们可以把CPU的一个核心（core）比喻成一个办公室工人，他功能强大，上知天文下知地理，琴棋书画无所不能，它可以串行地一件接着一件处理交给它的任务。很久之前的时候大多数CPU只有一个核心，不过在现在的硬件设备

Vue.js 3.0 在 Vue 2.0 的基础上进行了全面升级，以下是主要区别和核心改进： 1. 响应式系统重构 特性Vue 2.0Vue 3.0实现方式基于 Object.defineProperty基于 Proxy（原生代理）性能递归遍历对象属性，初始化较慢按需代理，性能提升 2~3 倍数组监听需重写数组方法（如 push）直接监听数组索引变化动态属性增删需用 Vue.set/Vue.delete直接操作对象即可 2. Composition API 特性Vue 2.0（Options API）Vue 3.0（Composition API）代码组织按选项（data, methods）

1. 类成员声明 在ES13之前，我们只能在构造函数里面声明类的成员，而不能像其他大多数语言一样在类的最外层作用域里面声明成员: class Car { constructor() { this.color = 'blue'; this.age = 2; } } const car = new Car(); console.log(car.color); // blue console.log(car.age); // 2 ES13出来之后可以突破这个限制，写下面这样的代码： class Car { color = 'blue'; age = 2; } const car = new Car(); console.log(car.color); // blue console.log(car.age); // 2

基本的网络请求就是三个步骤：请求，处理，响应。 后端缓存主要集中于“处理”步骤，通过保留数据库连接，存储处理结果等方式缩短处理时间，尽快进入“响应”步骤。当然这不在本文的讨论范围之内。 而前端缓存则可以在剩下的两步：“请求”和“响应”中进行。在“请求”步骤中，浏览器也可以通过存储结果的方式直接使用资源，直接省去了发送请求；而“响应”步骤需要浏览器和服务器共同配合，通过减少响应内容来缩短传输时间。这些都会在下面进行讨论。 本文主要包含 * 按缓存位置分类 (memory cache, disk cache, Service Worker 等) * 按失效策略分类 (Cache-Control, ETag 等) * 帮助理解原理的一些案例 * 缓存的应用模式 按缓存位置分类 我看过的大部分讨论缓存的文章会直接从 HTTP 协议头中的缓存字段开始，例如 Cache-Control, ETag,