【实践经验】
1、捕获用户在该页面停留的时长，我是这样做的（前端监测）
https://mp.weixin.qq.com/s/VP8FQb1—OZoLuQWmpNorQ
在监测功能的时候，我们首要考虑的就是，我们的监测代码不能影响我们现在的业务代码，和以后的业务代码。
多页面应用
在多页面应用，要获取用户的停留时间还是挺简单的，看看下面几个Api👇
onload (页面加载完后)
onbeforeunload （页面卸载前，也就是点击叉的时候）
onpageshow （页面显示的时候）
onpagehide （页面隐藏的时候）
单页面应用
单页面应用的路由跳出，但是基于 H5的History API（browserHistory） 和 Hash（hashHistory）实现的。
2、在线Excel项目到底有多刺激
https://mp.weixin.qq.com/s/f1vwzuPryc8ag6nd5Ngr5A
3、首次面向B端展开全链路压测！淘系高难度压测实践方案公开
https://mp.weixin.qq.com/s/gvL-vjEgtf0SEtLTr8laHg
4、JS 实现网页截屏五种方法
https://mp.weixin.qq.com/s/00-bJzsu85xUPOXMLajlRg
最近研究了下如何利用JavaScript实现网页截屏，包括在浏览器运行的JS，以及在后台运行的nodeJs的方法。主要看了以下几个：
- PhantomJS
- Puppeteer(chrome headless)
- SlimerJS
- dom-to-image
- html2canvas
5、封装 axios 取消重复请求
https://mp.weixin.qq.com/s/fPuBTZGYQISwVtGxPZYYrQ
在我们web开发过程中，很多地方需要我们取消重复的请求。但是哪种场合需要我们取消呢？我们如何取消呢？带着这些问题我们阅读本文。
阅读完本文，你将了解以下内容：
- 需要取消重复请求的场景
- 我们如何取消重复请求
- axios如何取消重复的请求
- 封装axios
- 如何给开源的项目提供源码
- 如何在本地调试npm包
6、当我们谈前端性能的时候，我们谈的是什么
https://mp.weixin.qq.com/s/bjZT2u9gw7T9NbhtmykYYg
本文结合谷歌官方工具 Lighthouse，分析了最新的前端页面性能评分标准，帮助大家更好地理解各项性能指标，以提升并优化相关的前端项目。
7、Vue 组件通信方式及其应用场景总结（1.5W字）
https://mp.weixin.qq.com/s/kR4Lpvr_NWgFm9iuIWmDUA
我们在写vue项目中,具体要用什么通信方式，还要看具体的业务场景，项目大小等因素综合评估。文章中给大家介绍了vue通信方式的优缺点，可以给大家实际工作提供一个参考。
【基础夯实】
1、前端工程化 - 剖析npm的包管理机制（完整版）
https://mp.weixin.qq.com/s/GxPMzYYP6AC2SU2Il_mNyg
现如今，前端开发的同学已经离不开 npm 这个包管理工具，其优秀的包版本管理机制承载了整个繁荣发展的NodeJS社区，理解其内部机制非常有利于加深我们对模块开发的理解、各项前端工程化的配置以加快我们排查问题（相信不少同学收到过各种依赖问题的困扰）的速度。
本文从三个角度：package.json、版本管理、依赖安装结合具体实例对 npm 的包管理机制进行了详细分析。
2、9 个极其强大的 JavaScript 技巧
所谓 hacker 方法，就是一种不断改进和迭代的构建方法。有着 hacker 精神的程序员相信事物总有改进的余地，没有什么是完美的存在。每一段代码都有进一步优化的空间，每一个操作都有更便捷的技巧。
下面列举一些非常强大的 JavaScript hack 技巧。
3、搞懂 HTTP 重定向 - 如何优雅地使用 301
https://mp.weixin.qq.com/s/sy5AVy-QdgtvsFsowW99dw
作为前端开发，大家对重定向一定不陌生，不就是永久重定向和临时重定向嘛，谁还不知道呢 😂。
那么大家是否知道永久重定向和临时重定向的区别呢？如果不小心设置了永久重定向该如何取消呢？如何优雅地使用重定向呢？接下来就让我们来一探究竟吧。
URL 重定向，能够将多个 URL 指向同一个页面，这一技术有着多种用途。在 HTTP 中有一个专门的响应，叫做 HTTP 重定向，也就是所有 3 开头的响应（这个相信大家都背过）。
除了 HTTP 重定向，还有其他方式能够进行重定向，本文也会介绍。
内容较长，我们先看一下本文的内容架构：
- HTTP 重定向详解
- 其他类型的重定向方式
- 重定向的使用场景
- 如何优雅地使用 301
4、V8中的快属性
https://mp.weixin.qq.com/s/41UkARsqGS12Tx88JLuWEg
在这篇博客文章中，我们将解释 V8 在内部是怎么处理 JavaScript properties 的。从 JavaScript 的角度来看，properties 只有几个必要的区别。JavaScript 对象与字典类似，使用 string 作为 key 和任意 object 作为 value。但是在对象的迭代过程中，规范对于以整数作为 index 的 properties 和其他 properties 的迭代方式是不同的。除此(迭代方式)之外，不同 properties 的表现基本相同，与它们是否以整数作为 index 无关。
但出于性能和内存的考虑，V8 底层确实依赖 properties 的几种不同表现。在这篇博客中，我们将解释为了能快速访问动态添加的 properties ，V8 是怎么做的。了解 properties 的工作方式对于解释 V8 中的内联缓存(inline caches)之类的优化工作至关重要。
5、前端开发的你应该知道的浏览器知识
https://juejin.cn/post/6907119816931442701
浏览器的主要功能：
是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI（Uniform Resource Identifier统一资源标识符）来指定所请求资源的位置。
浏览器的主要组件包括：
1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
2. 浏览器引擎 － 用来查询及操作渲染引擎的接口。
3. 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
6. JS解释器 － 用来解释执行JS代码。
7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。
6、这个 29.7 K 的剪贴板 JS 库有点东西！
https://juejin.cn/post/6906635620752293902
本期阿宝哥将介绍一个被 158024 个项目引用的 JS 开源库 —— clipboard.js。相信挺多小伙伴在项目中，也用到了这个库。那么这个库背后的工作原理是什么？感兴趣的小伙伴，跟阿宝哥一起来揭开这背后的秘密吧。
clipboard.js 是一个用于将文本复制到剪贴板的 JS 库。没有使用 Flash，没有使用任何框架，开启 gzipped 压缩后仅仅只有 3kb。
7、JavaScript 中模块的导入和导出——最最最简明教程
https://mp.weixin.qq.com/s/qCE9kzJhjnxvXbTydaHiqQ
早期的 Web 网站主要由 HTML 和 CSS 组成。如果有任何 JavaScript 的代码需要在页面中执行，通常是以小的代码片段的形式来提供功能和交互性。结果就是通常 JavaScript 的代码都会被编写在一个文件中，然后通过 script 标签加载到页面中。开发人员可以将 JavaScript 代码拆分成多个 js 文件，但是所有 JavaScript 变量和函数都会被添加到全局作用域中。
但是随着 Angular、React 以及 Vue 等 Web 框架技术的发展，并且大部分公司都在开发高级 Web 应用而非桌面应用，JavaScript 就变得越来越重要了。将能够复用的代码逻辑封装成公共代码，并且在避免全局命名空间污染的前提下，将其模块化，这一需求就成为了必要。
ECMAScript 2015 规范引入了允许使用 import 和 export 语句的 modules 概念。在本教程中，你将学习什么是 JavaScript 模块以及如何使用 import 和export 管理代码结构。
8、早知道 CSS 有这 5 个伪元素，代码也不至于写那么复杂了！
https://mp.weixin.qq.com/s/_aRkgMtek31KRkotPUOcHQ
我们都知道，页面样式通常写在 CSS 规则里。但有时候为了实现一些特殊的效果，往往会借助 JavaScript。最佳实践当然是职责分离：CSS 负责表现，HTML 负责结构，JavaScript 负责行为。所以，样式上能用 CSS 解决的，尽量不用 JavaScript。这样代码更简洁、易维护，性能也更好。
本文将介绍 5 个 CSS 伪元素，你可能从来没听说过，或者没用过。一起来看看吧！
9、你们都被Vue惯坏了~
https://juejin.cn/post/6906709240329535495
【实用工具】
1、uvu: 一个既快又轻量的测试库
一个支持nodejs和浏览器的测试库，特点是速度快和轻量。
2、reading-time: 一个预估文章阅读时长的工具
https://javascriptweekly.com/link/99440/web
这个库帮助预估阅读一篇文章需要多长时间。
3、Odiff: 一个高性能图片diff工具
https://nodeweekly.com/link/99310/web
速度最快的图片diff工具，进行像素级比对。
4、Screenity: 一个屏幕录制和标注工具
https://github.com/alyssaxuu/screenity
一个Chrome插件，可以录制屏幕并且进行涂鸦和标注，功能很强大。
【动态与研究关注】
1、JavaScript诞生25周年
https://mp.weixin.qq.com/s/m5Cpfk_euWMYI4LSu7_trw
12月4日，js诞生25周年。来看看这25年来js经历了哪些？
2、对比多种微前端方案
让我们复习一下微前端的概念：
Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.
中文释义：
可以由多个团队独立开发的现代web应用程序的技术、策略和方案。
本文则是在此基础上对现有的微前端解决方案进行对比总结。
3、Serverless ：让「前端开发者」走向「应用研发者」
https://mp.weixin.qq.com/s/CMh4YDx6iG4b8F50NLYlcg
Serverless 云研发平台作为阿里巴巴集团前端委员会发起的一体化云研发平台，底层基于函数计算 FC，是整个 Node Serverless 体系中的研发入口，承接了淘宝、飞猪、ICBU、考拉、高德、文娱等研发、交付和运维工作。目前，集团已经有上千位前端和客户端的工程师使用 Serverless 云研发平台进行业务的开发工作，包括但不限于营销导购、中后台、行业前台等规模化场景。
本文将介绍 Serverless 云研发平台是通过提供哪些能力保障各租户业务的快速开发和安全交付的。
4、技术观察：谷歌CSP工程化实践导读
https://zhuanlan.zhihu.com/p/66652397
内容安全策略（Content Security Policy, 以下简称CSP）是业界主推的前端安全纵深防御方案。针对XSS漏洞及其他前端安全风险，其显著效果，已经在广泛应用中证实。
作为CSP规范的核心制定与实践者之一，Google团队在今年的HITB安全会议上进行了题为《A Successful Mess Between Hardening and Mitigation》的分享，其中呈现的数据与经验颇具参考意义。
为方便快速浏览，笔者在忠于原文基础上，辅以深度讲解，形成导读共享。全文分为四部分：精粹导览、知识背景、议题解读和总结。其中，“精粹导览”是对议题内容的客观精粹，“议题解读”呈现了笔者基于理解的综合评述。运营/决策者可关注1.1、1.2、2.1、2.2部分，技术研究/实践者建议重点阅读1.3、1.4、2.3部分。
5、来自谷歌前员工的最佳软件开发工具指南
https://mp.weixin.qq.com/s/N-ApPvi7EjGwU3SSqysaCg
谷歌的内部开发工具是世界领先的，其针对大规模软件开发的多方面痛点提供了解决方案。但几乎所有工具均与谷歌独有的内部生态系统紧密耦合，无法在其它环境中使用。本文介绍了如何在软件开发中引入好的开发工具，提高自己和团队成员的生产力，进而在大规模软件开发中传播有效的最佳实践，为公司带来工程化效率提升。
【程序之外】
1、全球数据博物馆的打造之路 - 2020双十一数据大屏设计背后的故事
https://mp.weixin.qq.com/s/2SDEARz7E5L7lGo7rXdF3g
“数据艺术”是本次双11数据大屏设计过程中产生的新名词，这样的表现手法需要由设计师与前端、算法同学合力完成，而并非传统意义上的设计作品。
通过数据技术，我们可以将古今中外所有的艺术转换成符合这个时代的无国界的作品，用科技的算法挖掘艺术作品背后有价值的精彩数据，打通艺术承载的感性文化与科技承载的理性精神，让人们能够不限场地时间和空间、都能看懂、喜欢、乃至去使用它。本次双11大屏的设计理念“全球数据博物馆”，即采用了这种“艺术经典+算法挖掘+数据传递+科技表达”的设计思路。这种思路使得我们这次的艺术设计产生了一种“既熟悉、又陌生”，“既温暖又科幻”的奇妙感受。
2、高效协作 I 资源库的协作方式
https://isux.tencent.com/articles/tencentdocs-efficient-methods.html
在《高效设计 I 云端库的工作方式》中，我们提出了云端库的工作方式，重点解决的是设计师之间的协同问题，云端库的工作方式保证了设计的输出质量和体验一致性。然而，在整个项目流程中，设计与开发之间的协作，也是完成整个项目的关键环节。设计师如何与开发之间进行高效协作呢？这是我们想要解决的问题。本文将从分析现有的设计开发协作方式存在的问题出发，然后探索一种新的协作方式—Git资源库的协作方式，希望对大家有所帮助。
3、「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！
https://mp.weixin.qq.com/s/2q5xKKWi36sDuQK90H2UAQ
还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？这种风格最初在社交媒体上风靡，很大程度上，来源于资深设计师 Michal Malewicz 的文章《Neumorphism in user interfaces》，这篇文章透过 Medium 平台，开始在各个设计师社区当中发酵，随后被不少平台预测为 2020 年会逐渐流行的一种视觉设计风格。
Glassmorphism 这个词是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，我们姑且将其称之为「玻璃拟物化设计」。
Malewicz 小哥对于这种风格特征归结为4点：
- 透明：使用带有模糊磨砂质感背景的透明效果
- 悬浮：带有明显悬浮感的多个层级
- 鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
- 微妙：使用轻薄微妙的边框来强化物理质感
简单的来说，「玻璃拟物化」在某些方面和「新拟物化」是一脉相承的，但是它有着相对更加具体的视觉隐喻，也就是我们日常接触的「玻璃」。
4、加拿大这家设计工作室的字体动画太酷炫了
动态作为一种视觉表现形式，广泛应用在广告宣传、logo动态、UI交互中。而经常浏览各大设计网站的同学也不难发现，动态字体和版式成为了近年来流行的视觉表现趋势。
若有收获，就点个赞吧
0 人点赞
