Service Worker 以其 异步安装 和 持续运行 两个特点，决定了针对它的更新操作必须非常谨慎小心。因为它具有拦截并处理网络请求的能力，因此必须做到网页(主要是发出去的请求)和 Service Worker 版本一致才行，否则就会导致新版本的 Service Worker 处理旧版本的网页，或者一个网页先后由两个版本的 Service Worker 控制引发种种问题。
2. 在配置 webpack.config.js 中设置 watch: true；
前言 在 web 前端开发中，我们会借助 Grunt、Gulp 和 Webpack 等工具的 Watch 模块去监听文件变化，那服务端应该怎么做？其实文件变化的监听依然可以借助构建工具，但我们还需要
今天我们来学习用 devtool 的 Performance 和 Memory 工具来找出网页哪里发生了内存泄漏。
这里简单的解释一下，有人说，这个不是很简单嘛，直接将切换的函数写到select的控件里面，直接点击切换的函数的时候直接给后端对应的uuid，拿到值就可以了，是的，如果只有这一个页面是可以的，但是仔细看布局，select组件是在一个公共组件里面的，你选择的时候你的uuid是不可以直接给到当前页面的，即时给到他，别的配置怎么办呢？而且我们要做的是切换的时候直接整个项目里面的uuid全部改掉，然后重新渲染整个数据，才是合理的解决方案。说一下我开始的想法，我开始是准备使用缓存做，每次用户切换的时候我都将最新的uuid放到缓存里面，但是有一个问题解决不了就是在别的页面怎么实时监听这个值改变了呢？所以，使用vuex是一个比较合理的解决方案，看代码
nodejs的进程在重启的时候，用户去访问服务，就会出现短暂的 502 bad gateway
Vue.js是一个流行的JavaScript框架，它使得构建复杂的交互式应用程序变得更容易。Vue.js基于MVVM模式设计，采用了响应式数据绑定和组件化的架构。在Vue.js中，数据绑定是非常重要的概念，它通过使用观察者模式来追踪数据变化并自动更新DOM。
最近公司里让我研究PWA，经过几天的研究发现PWA竟是如此万能，功能接近手机原生APP，最大的优点是它的离线缓存机制，这主要得益于ServiceWorker！
组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；
美团外卖商家端基于 FlutterWeb 的技术探索已久，目前在多个业务中落地了App、PC、H5的多端复用，有效提升了产研的整体效率。在这过程中，性能问题是我们面临的最大挑战，本文结合实际业务场景进行思考，介绍美团外卖商家端在 FlutterWeb 性能优化上所进行的探索和实践，希望对大家能有所帮助或启发。
计算属性是一个 function，这个 function 的返回值就是计算属性最终的值。
这两天遇到一个新需求：一个一镜到底的h5动画。因为功能的特殊性，就要求我们提前监听页面的静态图片是否全部加载完毕。即处理预加载。
在template里的插值表达式，如果太长，会让模板代码变得难于维护；如果有多处用到了同样的插值表达式，也不便于复用和修改。例如，这样的一个插值表达式：
前段时间项目上有个需求，在菜单栏进行切换应用的时候，页面的数据要进行刷新。如下图所示：
视图模型双向绑定，是Model-View-ViewModel的缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。以前是操作DOM结构更新视图，现在是数据驱动视图。
Vue.js是一套用于构建用户界面的渐进式框架。Vue.js通过简单的API提供高效的数据绑定和灵活的组件系统。
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
对于初学者来说，学到计算属性和监听（侦听）属性这里很容易犯晕，搞不懂这两者之前的区别和什么时候该使用哪个，这里Dapan就来尝试梳理一下计算属性（computed）和监视（侦听）属性（watch）的区别，以及该选择使用哪一个：
计算属性是基于响应式数据进行计算得出的结果并被缓存的属性。在组件的模板中可以像数据属性一样使用，它由一个计算函数和它所依赖的数据组成，只有当所依赖的数据发生变化时，它才会重新计算属性的值。Vue.js 内部实现了缓存机制，因此计算属性只会在必要的时候才重新计算。这样能够提高 Vue.js 应用的性能，并且让代码更加简洁和易于维护。
PWA是最近前端最火热的一个概念之一，Service Worker为PWA赋能离线可用性以及push消息。
SPA（ single-page application ）仅在 Web ⻚⾯初始化时加载相应的 HTML、JavaScript 和 CSS。⼀旦⻚⾯加载完成，SPA 不会因为⽤户的操作⽽进⾏⻚⾯的重新加载或跳转；取⽽代之的是利⽤路由机制实现 HTML 内容的变换，UI 与⽤户的交互，避免⻚⾯的重新加载。
1、v-show 和 v-if的区别，v-show 和 keep-alive 的区别
早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 '#search'：
我们在业务组件中，会经常使用循环列表，当时用v-for命令时，会在后面写上:key，那么为什么建议写呢？
2020年09月18日，vue3.0正式发布。随着它的发布，Vue.js再次被推上了前端的风口浪尖。 同时，面试官的提问也将加入一些有关Vue3.0的新元素（相信近期去面试的小伙伴或多或少都会被问到Vue3.0的知识点）。
关于 性能优化 是个大的面，这篇文章主要涉及到 前端 的几个点，如 前端性能优化 的流程、常见技术手段、工具等。
内存泄漏(Memory Leak)指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况。如果内存泄漏的位置比较关键，那么随着处理的进行可能持有越来越多的无用内存，这些无用的内存变多会引起服务器响应速度变慢，严重的情况下导致内存达到某个极限(可能是进程的上限，如 v8 的上限;也可能是系统可提供的内存上限)会使得应用程序崩溃。 传统的 C/C++ 中存在野指针，对象用完之后未释放等情况导致的内存泄漏。而在使用虚拟机执行的语言中如 Java、JavaScript 由于使用了 GC (Garbage Coll
1.4.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
我最近遇到一个需求，要给网站添加一个用户网络离线提醒。要求我们要实时监测用户的网络状态，当用户断网了，我们要立马给用户弹出一个断网提醒。
Hexo 是一款基于 Node.js 的静态博客生成器。有别于传统的 WordPress、Typecho 等由服务端渲染的动态博客程序，Hexo 可以遍历博客的各个页面，将博客文章等内容渲染到主题（即页面模板）之中，生成全部页面的 HTML 文件及其引用的 CSS、JS 等静态资源。这些静态资源文件常常通过托管到 Pages、托管到对象存储或者自建 Nginx 服务器的方式来对外提供访问。
从开始学习前端到现在走在进入中高级前端开发的路上，觉得上手容易又简单的就是Vue框架，包含其相关的生态系统。一直只是简单了解双向绑定的原理，并没有手动去实现或者去拜读过源码。而vue双向绑定基本是面试必考项，通过这段时间的学习，输出以下双向绑定的简单实现示例。
标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
答案：CSS的盒模型是用于布局和定位元素的概念。它由内容区域、内边距、边框和外边距组成，这些部分依次包裹在元素周围。
key 是为 Vue 中 vnode 的唯一标记，通过这个 key，diff 操作可以更准确、更快速
在chrome[1]插件开发中我们知道，background.js是独立于浏览器的，在background.js中主要负责popup与content.js的交互,在某些时候，也许你需要在一个插件的设置页与content进行实时通信，此时你能想到什么样的方式吗？本文是在插件业务通信总结的一篇笔记，希望看完能在实际业务中带来思考和帮助
所有的性能优化中，缓存是最重要也是最直接有效的，毕竟现在都这么忙，可等不了网页转菊花。
1）el（挂载点） 创建一个Vue这个实例去接管页面中的某个Element（元素）。也就是说el表明和页面上 哪一个节点做绑定！ 2）data vue实例都有一些数据，我们把数据都存放在data中。
1 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：
前言 张涛现在已经PWA上瘾了！ 介绍 这里再介绍一下 Progressive Web Apps 是结合了 web 和 原生应用中某些功能的一种体验（本质上还是 web 应用）。但是作为一个 web 应用，它可以 断网使用、推送消息、发送通知、从桌面启动，当然还包括 Web 应用的优势：免安装、快速开发、依赖浏览器跨平台(支持包括Edge在内的各种主流PC/手机浏览器)。 fetch 拦截请求 之前讲述了 PWA 最重要的组件：Service Worker，没有看过的可以先看看：https
在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。
Observer : 它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新
MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
本文我们通过案例来介绍下 watch 和 computed 的使用，案例效果如下：
前面已经提到了fis release命令大致的运行流程。本文会进一步讲解增量编译以及依赖扫描的一些细节。 首先，在fis release后加上--watch参数，看下会有什么样的变化。打开命令行 fi
前面已经提到了fis release命令大致的运行流程。本文会进一步讲解增量编译以及依赖扫描的一些细节。
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象：
现在有一种观点声音逐渐大了起来，认为市面上出现了许多比 React 性能更好的框架，是不是意味着，React 将要被淘汰了？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
