前端 1943

20

探索类型系统的底层 - 自己实现一个 TypeScript

• 破晓L   7月27日发布
• 15 收藏

这篇文章包含两个部分： A 部分：类型系统编译器概述(包括 TypeScript) 语法 vs 语义 什么是 AST？ 编译器的类型 语言编译器是做什么的？ 语言编译器是如何工作的？ 类型系统编译器职责 高级类型检查器的功能 B ...

19

代码简洁之道：编写干净的 React Components & JSX

• 破晓L   7月20日发布
• 10 收藏

不同团队编写出来的 React 代码也不尽相同，水平各有高低，就像十个读者就有十种哈姆雷特，但是以下八点可能是你编写 React 代码的基本准则。

29

性能优化小册 - 渲染十万条数据：基于 IntersectionObserver 的虚拟化长列表

• 破晓L   6月17日发布
• 22 收藏

技术不局限于框架，相同的原理只是实现方式略有不同。 前置 1. 什么是虚拟列表？ 首先，虚拟列表只是一个概念，本人对虚拟列表这个表述不置可否。 虚拟列表是对于列表形态数据展示的一种按需渲染，是对长列表渲染...

13

性能优化小册 - React 搜索优化：防抖、缓存、LRU

• 破晓L   6月9日发布
• 10 收藏

最近要对 react 项目做重构优化等相关的工作，由于有好长时间没碰 React 了，今天索性把一个基于关键字搜索的 demo 做一下简单优化，在此记录以下。

7

性能优化小册 - 让页面更早的渲染：使用 preload 提升资源加载优先级

• 破晓L   6月4日发布
• 6 收藏

preload 是一个新的 Web 标准，旨在提高性能以及提供给 web 开发者更多的细粒度加载控制。它可以使开发者自定义加载逻辑而避免以 script 标签加载资源所带来的性能损耗。

7

记一次 Angular 基于 STOMP over WebSocket 实现流文本传输

• 破晓L   6月1日发布
• 3 收藏

在介绍正文之前需要先简单了解几个概念： STOMP 协议、STOMP over WebSocket 以及 RxJS。（关于这三点本文不会进行详细介绍）

50

Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

• 破晓L   5月28日发布
• 37 收藏

原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

8

性能优化小册 - 可编程式缓存：Service Workers

• 破晓L   5月26日发布
• 6 收藏

Service Workers 不仅可以应用于 PWA ，PC 端也可以利用其强大的功能实现一些有趣的优化，网络中有很多关于 Service Workers 介绍的比较好的文章，基于小册宗旨，本文并不是一篇 Service Workers 的详细教程。

16

性能优化小册 - 提高网页响应速度：优化你的 CDN 性能

• 破晓L   5月21日发布
• 9 收藏

CDN 服务本身并不具备域名解析功能，而是依托于 DNS 智能解析功能，由 DNS 根据用户所在地、所用线路进行智能分配最合适的 CDN 服务节点，然后把缓存在该服务节点的静态缓存内容返回给用户。

8

性能优化小册 - 分类构建：利用好 webpack hash

• 破晓L   5月18日发布
• 6 收藏

借助 wepack 的 hash 命名法，不仅可以提高我们项目的构建效率，在生产环境中，合理设置 hash 类型有助于我们对资源进行有效的缓存。

11

性能优化小册 - 异步堆栈追踪：为什么 await 胜过 Promise

• 破晓L   5月11日发布
• 7 收藏

与直接使用 Promise 相比，使用 async/await 不仅可以使代码更具可读性，而且还可以在 JavaScript 引擎中实现一些有趣的优化。

17

当无情面试官问 vue-next-router 带来了哪些变化？

• 破晓L   5月8日发布
• 10 收藏

此次 Vue 的重大改进随之而来带来了 Vue Router 的一系列改进，现阶段（alpha.10）相比 vue2-router 的主要变化，总结如下：

20

记一次 Vue 组件设计及 computed 动态引入组件

• 破晓L   4月10日发布
• 16 收藏

本文涉及技术点： 动态组件 & 异步组件 内置组件 keep-alive & transition 插槽 slot 及 v-slot 实际场景 多级 tabs 切换，tab 项不固定，灵活控制 tab 项内容的展示，如下图。 目录结构 目录结构大概像...

14

记一次 <keep-alive> 缓存及其缓存优化原理

• 破晓L   4月3日发布
• 11 收藏

由于缓存空间是有限的，所以不能无限制的进行数据存储，当存储容量达到一个阀值时，就会造成内存溢出，因此在进行数据缓存时，就要根据情况对缓存进行优化，清除一些可能不会再用到的数据。所以根据缓存淘汰的机...

8

JavaScript - 数据结构详解（一）

• 破晓L   1月20日发布
• 8 收藏

数据结构的概念 数据结构，直白的理解，就是研究数据的存储方式。 数据结构是一门学科，它教会我们「如何存储具有复杂关系的数据更有助于后期对数据的再利用」。 存储结构 数据结构大致包含以下几种存储结构： 线...

32

网站性能优化实战篇

• 破晓L   2019-11-24 发布
• 23 收藏

阅读理由：经验之谈，从理论到实践。 前情摘要 网站优化是前端开发的重中之重，但是优化细节却十分繁杂，没有好的思路，优化很难高效的开展。 本文将以实际网站来做参考，手把手教你如何一步步做好网站优化。 这...

28

CSS 渲染原理以及优化策略

• 破晓L   2019-11-21 发布
• 22 收藏

提起 CSS 很多童鞋都很不屑，尤其是看到 RedMonk 2019 Programming Language Rankings 的时候，CSS 竟然排到了第七位。

52

彻底理解浏览器缓存机制

• 破晓L   2019-11-20 发布
• 43 收藏

推荐理由：文章思路清晰，鞭辟入里。 概述 浏览器的缓存机制也就是我们说的 HTTP 缓存机制，其机制是根据 HTTP 报文的缓存标示进行的。 所以在分析浏览器缓存之前，我们先使用图文简单介绍一下 HTTP 报文，HTTP ...

27

从 Proxy 到 Vue 源码，深入理解 Vue 3.0 响应系统

• 破晓L   2019-11-14 发布
• 17 收藏

最近被公众号各种推送关于 Vue 3 的文章（真是不想学都不行啊），因为现在 Vue 还处于 pre-alpha 状态，所以很多功能尚未实现（这就意味着源码量相对较少，阅读起来也相对比较容易）。此次版本中的重大改进之一是...

57

Vue 组件间通信 12 种方法汇总

• 破晓L   2019-10-25 发布
• 53 收藏

修饰符 .sync 是 2.3.0+ 新增，它对 props 起到了一种修饰的作用，使用 .sync 进行修饰的 props 意味子组件有修改它的意图，这种情况下它只起到一个标注性作用，有它没它都不会影响逻辑（后文会介绍使用 .sync 的...