近期，随着 vue3 的各种曝光，vite 的热度上升，与 vite 类似的 snowpack 的关注度也逐渐增加了。目前（2020.06.18）snowpack 在 Github 上已经有了将近 1w stars。snowpack 的代码很轻量，本文会从实现原理的角度介绍 snowpack 的特点。同时，带大家一起看看，作为一个以原生 JavaScript 模块化为核心的年轻的构建工具...

众所周知，在开发 Flutter 时，我们希望通过单一代码库支持 Flutter 在各类设备 (包括 iOS、Android、Windows、Linux、macOS 和 Web) 上的应用，并实现原生编译和游戏级别的视觉效果。Flutter 也已经在 Google 内部广泛用于 Assistant、Stadia、Cloud Search 以及 Blogger 等项目。在 Google 之外，字节跳动、Grab、Nuba...

渲染性能的主要评判指标是FMP与TTI，在 React Native 以跨平台前端框架身份逐步替代 Native 原生界面的同时，两者的渲染性能对比也逐渐浮出水面。

Flutter 是开源的 UI 工具包，其能够帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。Flutter 组件采用现代响应式框架构建，中心思想是用组件 (widget) 构建 UI。淘宝终端技术部无线技术专家王康从 Flutter 的原理出发，介绍了 Flutter 的原理、业内现状，以及阿里巴巴在 Flutter 上...

对笔者所在的淘系用户增长团队来说，把用户引导到手淘 app 里是很重要的一个环节，本文会分享在手机浏览器或其他 app 的 H5 页面里是怎么把手淘「召唤」出来的，这里就涉及到「唤端」这个概念。

前端的数据存储方式，你除了用过 Cookies、localStorage 和 sessionStorage 外，还有用过其它的存储方式么？其实除了前面提到的 3 种存储方式，目前主流的浏览器还支持 Web SQL 和 IndexedDB。

因为JavaScript具有自动垃圾回收机制，所以对于前端开发来说，内存空间并不是一个经常被提及的概念，很容易被大家忽视。特别是很多不是计算机专业的朋友在进入到前端之后，会对内存空间的认知比较模糊，甚至有些人干脆就是一无所知。

前端架构101：从 Flux 进化到 Model-View-Presenter 在 Flux 架构中，有两个问题依然没有被提到，一个是表现层模型，另一个是测试 我们从表现层逻辑说起 前端内存优化的探索与实践 标注是地图最基本的元素之一，标明了地图每个位置或线路的名称。在地图 JSAPI 中，标注的展示效果及性能也是需要重点解决的问题。 新版高...

传统网页的呈现是基于像素单位的，所以图片不能和 SVG 一样进行任意尺寸缩放后还保持边缘平整。也就是说，放大像素逻辑的图片，必然导致可视质量下降（信息失真）。所以我们往往会使用技术手段去规避失真

Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpack 提供的一个非常有用的功能，它允许在 JavaScript 运行时更新各种模块，而无需完全刷新。

关键意见领袖（Key Opinion Leader，简称 KOL）是营销学上的概念，通常被定义为：拥有更多、更准确的产品信息，且为相关群体所接受或信任，并对该群体的购买行为有较大影响力的人。KOL 是在其领域有号召力，影响力，和相当公信力的帐号，这一类帐号可以是真实的三次元名人，也可以二次元形象，甚至就是一个兴趣，一种爱好。

微前端是一种利用微件拆分来达到工程拆分治理的方案，可以解决工程膨胀、开发维护困难等问题。随着前端业务场景越来越复杂，微前端这个概念最近被提起得越来越多，业界也有很多团队开始探索实践并在业务中进行了落地。可以看到，很多团队也遇到了各种各样的问题，但各自也都有着不同的处理方案。

级联修改：当一个事件发生之后，A 组件在接收到事件之后在响应的过程中，还可能发出其他的事件触发后续的修改，你并不知道这个事件会在何处结束，会造成什么样的结果。这也和上一条「不可预测」相对应

随着 HTTPS 建站的成本下降，现在大部分的网站都已经开始用上 HTTPS 协议。大家都知道 HTTPS 比 HTTP 安全，也听说过与 HTTPS 协议相关的概念有 SSL 、非对称加密、 CA证书等，但对于以下灵魂三拷问可能就答不上了：

对于大多数前端工程师来说，音视频技术是一个比较少涉足的领域，本文涵盖了流媒体技术中的文本、图形、图像、音频和视频多种理论知识，涉及到播放器、web媒体技术、主流框架等介绍，只需要花上一点点时间，你将进入前端多媒体的领域。

说到在项目中引入一个视频，我们肯定会想到 HTML5 为我们提供的 Video 标签，它为我们提供了许多属性和方法，使用起来很方便，当然直接使用也会遇到各种兼容问题，在最初学习 Video 标签时，W3C 官网就给出了这样的温馨提示：在 HTML 中播放视频并不容易!

MVC启示录 - 模块的职责，作用域和通信 在上一篇中，我提出了一个应用中常见的问题：如何在多个视图中共享同一份数据，并且保证它的改动能够同步到不同的视图中去？ 针对这个问题我给出了两类解决方案：一类是用户行为驱动的意识流编码，比如当我选择将素材回滚到某个历史版本时，我想当然的手动去更新每一个视图 Webpac...

可能是目前最易理解的手写promise 本文写给有一定Promise使用经验的人，如果你还没有使用过Promise，这篇文章可能不适合你，建议先了解Promise的使用 本篇文章整体架构的大图如下，接下来会一步一步去实现一个 Promise。 前端架构 101：在谈论它们之前我们需要达成的共识 在这个系列里面，我会谈到前端架构的进化；它们...

Tooltips常被称为提示框（或信息提示框），提示框能够以较强的交互性、自由度为用户提供相应的提示信息。今天我们要聊的不是如何实现强大的交互行为，而是来看看如何以最好的方式来还原他们的视觉效果，并且能适用于不同的场景。

从Map这个例子可以看出来，obj被map一直引用着，那么垃圾回收器处理时认为{ name: 'fedaily' }还有其他引用，就不会回收它。如果需要彻底删除它，需要map.delete('account')。

你真的理解setState吗？ 面试官：“react中setState是同步的还是异步？” 我：“异步的，setState不能立马拿到结果。” 面试官：“那什么场景下是异步的，可不可能是同步，什么场景下又是同步的？” 我：“......” 如何使用深度学习识别 UI 界面组件？ 本文介绍了使用机器学习的方式来识别 UI 界面元素的完整流程，包括：现状问...

WebAssembly是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范。WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我...

但是如果需要考虑各种引用类型，以及循环引用等问题，那么还是需要手动实现这些拷贝逻辑，这里参照lodash深拷贝的实现逻辑，但是精简了很多，我们来看看如何做：

无论是刚入门的前端新手还是工作了几年的中高级前端 前端基础都是必须要牢牢掌握的 是不是有时候感觉到一个问题自己能回答出来七八分但是距离完美答案还是差点意思 那么此文章能帮助你快速突击前端高频次面试题 掌握之后轻松应对前端面试 祝大家都有好的offer！

本篇是基于 FDCon2019 上《让你的网页更丝滑by刘博文》的复盘文。该课题也是博主感兴趣的领域, 后续会结合 React 的 Schedule 与该文进行进一步整合, 个人博客

我曾经一度很迷茫，在学了Vue、React的实战开发和应用以后，好像遇到了一些瓶颈，不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题，这篇文章，笔者想结合自己的一些成长经历整理出一些路线，帮助各位初中级前端工程师少走一些弯路。

PWA是指渐进式web应用，一般由web app manifest, service worker, app shell, notification push等部分组成。

在 React 16.6 版本中，新增了 React.lazy 函数，它能让你像渲染常规组件一样处理动态引入的组件，配合 webpack 的 Code Splitting，只有当组件被加载，对应的资源才会导入 ，从而达到懒加载的效果。

在Web发展史中，我们知道浏览器与服务器间采用的是 http协议，而这种协议是无状态的，所以这就导致了服务器无法知道是谁在浏览网页，但很明显，一些网页需要知道用户的状态，例如登陆，购物车等。