博客背景：单元测试作为今年的全组通用任务，要求在所有项目中实施，每个人都需要会写单元测试。所以我在上周进行了一下单元测试的调研，这次调研的方向是主要使用 Mocha 基于 Karma 进行包括 UI 层的单元测试。 下面我主要描述一下搭建这套单元测试环境和开发的所用技术，和具体的 demo。 使用的工具介绍 使用 JavaScript 测试执行过程管理工具 KarmaKarma是一个基于 No ...

全新Chrome Devtools Performance使用指南教你利用 Performance 去分析 Response, Animation, 以及 Idle 这三个性能指标。 如何评价 Google 的跨平台应用开发框架 Flutter ?Flutter 与 React Native 的对比。 用Vue.js开发微信小程序：开源框架mpvue解析mpvue 是一款使用 Vue.js 开 ...

什么是 DockerDocker 是一种轻量级的虚拟化技术，它源自 dotCloud 公司的内部项目。Docker 是一个开源项目，其在 GitHub 上的仓库已有四万多的 star。 为什么要用 Docker传统虚拟机技术是虚拟出一套硬件后，在其上运行一个完整操作系统，在该系统上再运行所需应用进程；而容器内的应用进程直接运行于宿主的内核，容器内没有自己的内核，而且也没有进行硬件虚拟。因此容器要比 ...

React 是怎样炼成的React的诞生过程以及优化思路，内容整理自 2014 年的 OSCON - React Architecture by vjeux，虽然从今天（2018）来看可能会有点历史感，但仍然值得学习了解。以史为鉴，从中也可以管窥 Facebook 优秀的工程管理文化。 webassembly 的那些事虽然JIT技术大幅提升了JS的执行速度，但JS本身的无类型特性依然是JavaSc ...

前言： 运营需求的一个重要核心功能在于页面内指定内容可配置，比如：头图、不同情况的提示文案等都可以支持根据运营同学的配置随时更改，提供灵活性。但是这种配置的方式也出现了遇到难题的情况， 图片中包含复杂特效的情况往往会选择直接用视觉同学导出的gif动图， 问题在于页面中涉及的动图量大加载成本大大提高的问题。为了尝试既维持灵活可配 & 减少加载成本，加下来介绍下骨骼动画的方案。 H5动画/游戏 ...

腾讯社交网络图片带宽优化技术演进之路为进一步降低运营带宽成本，减小用户访问流量及提升页面加载速度，社交网络 CDN运维紧跟行业图片优化趋势，创新引入WebP、SharpP、自适应分辨率、Guetzli等图像压缩技术到现网，经过三年多的多部门联合攻关，已逐渐形成一套覆盖全图片类型（JPEG、JPG、PNG、WebP、GIF）多场景的图片压缩运营体系，适用于各类型终端，每年节约外网带宽几百G。 聊聊我 ...

webpack 优化前一段时间一直在写后台管理系统（vue + elementUI + webpack），数下来，虽然不多，也有 3 个了；由于是单页应用，每次到发布的时候，都会耗费大量的时间对代码进行编译压缩，所以时不时都会思考着如何才能优化这个过程；谷歌和度娘就像是哆啦 A 梦的奇幻袋，总能给大家带来意想不到的惊喜，当然，这次也不例外。 happypacknpm的官方解释比较简单：通过并行转换 ...

CSS工程化演进CSS 是 Web 开发中不可或缺的一部分，在前端工程化的不断进步的今天，一方面在 CSS 特性随着规范的升级越来越丰富，另一方面，前端业务复杂性的增加带来的工程愈加庞大，驱使者开发者不断寻找CSS工程化的最佳实践。 Chrome v65 将支持 CSS Paint APIChrome v65 中将会支持 CSS Paint API。 境外业务性能优化实践这篇文章结合境外业务特点， ...

koakoa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套， 并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件， 它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。 安装、版本依赖请点我点我 ~ O(∩_∩)O ...

前言：
上周做了一个预约健身卡的项目，在领导的指引下使用了 LAVAS 框架，这个框架的主要特点就是可以直接生成一套成熟的支持 PWA 的网站。
在开发过程中，发现 PWA 方案的主要核心技术在于 Service Worker，我下面将从 PWA 方案的简介、PWA 方案的相关技术等2个方向简单介绍一下我对于本次开发的收获。
在介绍完这些技术后，我将在最后的篇幅里介绍一个简单 PWA 方案的详细实现。