xingbofeng.github.io
xingbofeng.github.io copied to clipboard
xingbofeng
counterxing的博客
在上一篇文章[Vue 3.0 前瞻，体验 Vue Function API](https://github.com/xingbofeng/xingbofeng.github.io/issues/44)，笔者通过尝试[vue-function-api](https://github.com/vuejs/vue-function-api)，提前体验了Vue 3.0 即将发布的函数式API，在文章最后，笔者提出了一些思考。最近，Vue 官方发布了最新的3.0 API 修改草案，并在充分采纳社区的意见后，将Vue Function API 更正为 Vue Composition API，提供了在Vue 2.x 能够提前体验此API的库[@vue/composition-api](https://github.com/vuejs/composition-api)，笔者出于学习目的，提前体验了这个库。并结合上一篇文章，描述 Vue 官方团队在采纳社区意见后对 API 作出的一些更正。 本文主要分以下几个主题讨论最新的Composition API： * reactive API * ref...
上一篇文章[Vue 3.0 最新进展，Composition API](https://github.com/xingbofeng/xingbofeng.github.io/issues/45)中，笔者通过描述Vue Composition API 的最新修正，本文通过解析[@vue/composition-api](https://github.com/vuejs/composition-api)的响应式原理部分代码，以便在解读学习过程中，加深对 Vue Composition API 的理解。 如果读者对 Vue Composition API 还不太熟悉，建议在阅读本文之前先了解 Vue 3.0 即将带来的Composition API，可以查阅[@vue/composition-api](https://github.com/vuejs/composition-api)相关文档，或查看笔者之前写过的文章： * [Vue 3.0 最新进展，Composition API](https://github.com/xingbofeng/xingbofeng.github.io/issues/45) * [Vue 3.0 前瞻，体验 Vue...
> 最近 Vue 官方公布了 Vue 3.0 最重要的[RFC：Function-based component API](https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#comparison-with-react-hooks)，并发布了兼容 Vue 2.0 版本的 plugin：[vue-function-api](https://github.com/vuejs/vue-function-api)，可用于提前体验 Vue 3.0 版本的 Function-based component API。笔者出于学习的目的，提前在项目中尝试了[vue-function-api](https://github.com/vuejs/vue-function-api)。 笔者计划写两篇文章，本文为笔者计划的第一篇，主要为笔者在体验 Vue Function API 的学习心得。第二篇计划写阅读[vue-function-api](https://github.com/vuejs/vue-function-api)的核心部分代码原理，包括`setup`、`observable`、`lifecycle`。 本文阅读时间约为15~20分钟。 ## 概述 Vue 2.x 及以前的高阶组件的组织形式或多或少都会面临一些问题，特别是在需要处理重复逻辑的项目中，一旦开发者组织项目结构组织得不好，组件代码极有可能被人诟病为“胶水代码”。而在...
众所周知，对前端而言，直接操作 DOM 是一件及其耗费性能的事情，以 React 和 Vue 为代表的众多框架普遍采用 Virtual DOM 来解决如今愈发复杂 Web 应用中状态频繁发生变化导致的频繁更新 DOM 的性能问题。本文为笔者通过实际操作，实现了一个非常简单的 Virtual DOM ，加深对现今主流前端框架中 Virtual DOM 的理解。 关于 Virtual DOM ，社区已经有许多优秀的文章，而本文是笔者采用自己的方式，并有所借鉴前辈们的实现，以浅显易懂的方式，对 Virtual DOM 进行简单实现，但不包含[snabbdom](https://github.com/snabbdom/snabbdom)的源码分析，在笔者的最终实现里，参考了[snabbdom](https://github.com/snabbdom/snabbdom)的原理，将本文的Virtual DOM实现进行了改进，感兴趣的读者可以阅读上面几篇文章，并参考笔者本文的[最终代码](https://github.com/xingbofeng/simple-virtual-dom)进行阅读。 本文阅读时间约15~20分钟。 ##...
> 笔者最近做了一个在 Web 构建打印模板的需求，从中学习到一些有价值的东西，特地记录一篇文章分享。 ## 概述 本文首先描述笔者所处的项目组的 Web 打印项目的需求背景，然后描述笔者在实践 Web 打印项目的过程中遇到了诸多问题，阐述 Web 打印的问题解决思路，最后给出了另外一种 Web 打印的需求解决方案，即使用`Headless browser`生成图片并打印的方案。预计阅读时间5 ~ 10分钟。 本文主要分下面几个方面： * Web 构建打印模板需求 * 基本概念 * 打印设备接口 * 页面模型 * 引入打印样式...
前端性能优化清单
# 前端性能优化清单 ## 一、性能监控 ### 1.1 监控性能的目的 ### 1.2 前端性能优化指标 ### 1.3 明确性能优化目标 #### 1.3.1 渐进式加载 #### 1.3.2 首屏白屏 #### 1.3.3 首屏可见 #### 1.3.4 首屏完全可交互 ### 1.4 收集性能监控数据 #### 1.4.1...
随着各大前端框架的诞生和演变，`SPA`开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过`ajax`和服务器通信，实现整个`Web`应用拒不更新，带来了极致的用户体验。然而，对于需要`SEO`、追求极致的首屏性能的应用，前端渲染的`SPA`是糟糕的。好在`Vue 2.0`后是支持服务端渲染的，零零散散花费了两三周事件，通过改造现有项目，基本完成了在现有项目中实践了`Vue`服务端渲染。 关于[Vue服务端渲染](https://ssr.vuejs.org)的原理、搭建，官方文档已经讲的比较详细了，因此，本文不是抄袭文档，而是文档的补充。特别是对于如何与现有项目进行很好的结合，还是需要费很大功夫的。本文主要对我所在的项目中进行`Vue`服务端渲染的改造过程进行阐述，加上一些个人的理解，作为分享与学习。 ## 概述 本文主要分以下几个方面： * 什么是服务端渲染？服务端渲染的原理是什么？ * 如何在基于`Koa`的`Web Server Frame`上配置服务端渲染？ * 基本用法 * `Webpack`配置 * 开发环境搭建 * 渲染中间件配置 * 如何对现有项目进行改造？ * 基本目录改造； * 在服务端用`vue-router`分割代码； * 在服务端预拉取数据； * 客户端托管全局状态；...
> 这周，`Chrome 70`正式版本发布，`Progressive Web Apps（PWA）`已经正式支持到`Windows 10`平台，然而，早在前几个版本之前，`Chrome`就已经通过`chrome://flags`支持开启实验性的功能，早就支持在`Windows 10`平台上安装`Progressive Web Apps（PWA）`。谷歌表示安装在桌面的网页应用使用体验非常接近于本地应用，并且应用的服务商可以缓存所有资源因此这些PWA应用有很好的兼容性和可靠性。 在上一篇文章[Service Worker学习与实践（一）——离线缓存](https://github.com/xingbofeng/xingbofeng.github.io/issues/37)中，已经讲到`Service Worker`的生命周期、如何创建、激活、更新`Web`应用程序的`Service Worker`，并且给出了一个简单的示例来说明使用`Service Worker`来实现离线缓存的原理，在这篇文章里，主要是对`Service Worker`实现原生应用程序的能力做出一定解析，下一篇文章，将通过一个例子阐述如何使用`Service Worker`实现消息推送功能。 ## Progressive Web Apps（PWA） `Progressive Web App`, 简称 PWA，是提升`Web App`的体验的一种新方法，能给用户原生应用的体验。 `PWA`能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，`PWA`本质上是`Web App`，借助一些新技术也具备了`Native App`的一些特性，兼具`Web App`和`Native...
在上一篇文章[Service Worker学习与实践（二）——PWA简介](https://github.com/xingbofeng/xingbofeng.github.io/issues/38)中，已经讲到`PWA`的起源，优势与劣势，并通过一个简单的例子说明了如何在桌面端和移动端将一个`PWA`安装到桌面上，这篇文章，将通过一个例子阐述如何使用`Service Worker`的消息推送功能，并配合`PWA`技术，带来原生应用般的消息推送体验。 ## Notification 说到底，`PWA`的消息推送也是服务端推送的一种，常见的服务端推送方法，例如广泛使用的轮询、长轮询、`Web Socket`等，说到底，都是客户端与服务端之间的通信，在`Service Worker`中，客户端接收到通知，是基于[Notification](https://developer.mozilla.org/zh-CN/docs/Web/API/notification)来进行推送的。 那么，我们来看一下，如何直接使用`Notification`来发送一条推送呢？下面是一段示例代码： ```javascript // 在主线程中使用 let notification = new Notification('您有新消息', { body: 'Hello Service Worker', icon: './images/logo/logo152.png', }); notification.onclick = function() { console.log('点击了');...
## 什么是`Service Worker` `Service Worker`本质上充当Web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步`API`。 * `Service Worker`的本质是一个`Web Worker`，它独立于`JavaScript`主线程，因此它不能直接访问`DOM`，也不能直接访问`window`对象，但是，`Service Worker`可以访问`navigator`对象，也可以通过消息传递的方式（[postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)）与`JavaScript`主线程进行通信。 * `Service Worker`是一个网络代理，它可以控制`Web`页面的所有网络请求。 * `Service Worker`具有自身的生命周期，使用好`Service Worker`的关键是灵活控制其生命周期。 ## `Service Worker`的作用 * 用于浏览器缓存 * 实现离线`Web APP` * 消息推送 ## `Service Worker`兼容性...