最近遇到了一个老项目，比较有意思的是这个项目集前后端的代码于一起，而后端也会去修改前端代码，所以就出现了后端用 IntelliJ IDEA 来开发前端项目，而前端用 VSCode 来开发前端项目的情况。
于是乎，出现了代码规范的问题，所以就有了这篇文章，整理了一下前端代码校验以及在 Vue 项目中的实践。

阅读完这篇文章，你可以收获：

• 能够自己亲手写出一套 ESLint 配置；
• 会知道业界都有哪些著名的 JS 代码规范，熟读它们可以让你写出更规范的代码；
• vue-cli 在初始化一个包含代码校验的项目时都做了什么；
• Prettier 是什么？为什么要使用它？如何与 ESLint 配合使用？
• EditorConfig 又是什么？如何使用？
• 如何在 VSCode 中通过插件来协助代码校验工作；
• 如何保证 push 到远程仓库的代码是符合规范的；

为什么要写这类文章

作为一个程序员，代码能力毋庸置疑是非常非常重要的，就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要，那我们就必须掌握它，所以文章标题用了死磕，一点也不过分，也希望不被认为是标题党。

作为一个普通前端，我是真的写不出 Promise A+ 规范，但是没关系，我们可以站在巨人的肩膀上，要相信我们现在要走的路，前人都走过，所以可以找找现在社区已经存在的那些优秀的文章，比如工业聚大佬写的 100 行代码实现 Promises/A+ 规范，找到这些文章后不是收藏夹吃灰，得找个时间踏踏实实的学，一行一行的磨，直到搞懂为止。我现在就是这么干的。

能收获什么

这篇文章总体上分为 2 类手写题，前半部分可以归纳为是常见需求，后半部分则是对现有技术的实现；

• 对常用的需求进行手写实现，比如数据类型判断函数、深拷贝等可以直接用于往后的项目中，提高了项目开发效率；
• 对现有关键字和 API 的实现，可能需要用到别的知识或 API，比如在写 forEach 的时候用到了无符号位右移的操作，平时都不怎么能够接触到这玩意，现在遇到了就可以顺手把它掌握了。所以手写这些实现能够潜移默化的扩展并巩固自己的 JS 基础；
• 通过写各种测试用例，你会知道各种 API 的边界情况，比如 Promise.all， 你得考虑到传入参数的各种情况，从而加深了对它们的理解及使用；

阅读的时候需要做什么

阅读的时候，你需要把每行代码都看懂，知道它在干什么，为什么要这么写，能写得更好嘛？比如在写图片懒加载的时候，一般我们都是根据当前元素的位置和视口进行判断是否要加载这张图片，普通程序员写到这就差不多完成了。而大佬程序员则是会多考虑一些细节的东西，比如性能如何更优？代码如何更精简？比如 yeyan1996 写的图片懒加载就多考虑了 2 点：比如图片全部加载完成的时候得把事件监听给移除；比如加载完一张图片的时候，得把当前 img 从 imgList 里移除，起到优化内存的作用。

除了读通代码之外，还可以打开 Chrome 的 Script snippet 去写测试用例跑跑代码，做到更好的理解以及使用。

在看了几篇以及写了很多测试用例的前提下，尝试自己手写实现，看看自己到底掌握了多少。条条大路通罗马，你还能有别的方式实现嘛？或者你能写得比别人更好嘛？

好了，还楞着干啥，开始干活。

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但偏基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。

这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。

小 tip：后续内容更精彩哦。

之前写了一篇文章：jpg、gif、png 和 svg 用于 web 上，我们该如何选择最合适的图像格式，介绍了这几种图片格式的特点，以及如何为网站选择合适的图片，然后评论区有位大佬让我补充下 WebP 格式，于是乎它来了。

什么是 WebP 格式

WebP 是一种现代图像格式，可为 Web 上的图像提供出色的无损和有损压缩。 使用 WebP，网站管理员和 Web 开发人员可以创建更小，更丰富的图像，从而使 Web 更快。

与 PNG 相比，WebP 无损图像的尺寸要小 26％。 在同等的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。

无损 WebP 支持透明性（也称为 Alpha 通道），而仅增加了 22％ 的字节数。 对于可以接受有损 RGB 压缩的情况，有损 WebP 还支持透明性，与 PNG 相比，文件大小通常小 3 倍。

上面这 3 段话来源于 https://developers.google.com/speed/webp

我相信你一定或多或少的接触或使用过 JS 中的扩展操作符（Spread Operator），在基本形式中，扩展操作符看起来像三个点，比如如下这样：

1

[...arr]

而实际上，它也就是这么用的，但是如果事情有这么简单，就不用我在这里写了。扩展操作符给我最大的印象就是，这玩意还挺方便的，然而最近写代码的时候经常性的遇到需要使用扩展操作符的场景，所以我干脆在网上找了些资料，把平时常见的应用场景给罗列了下，发现这个操作符是真的强大，有多强大？来看看下面这些用法吧。

1. 字符串转数组

字符串转数组最普遍的做法是这样：

1
2
3

let str = 'hello'
let arr = str.split('')
console.log(arr)  // ['h', 'e', 'l', 'l', 'o']

而使用了扩展操作符后可以这样：

1
2
3

let str = 'hello'
let arr = [...str]
console.log(arr)  // ['h', 'e', 'l', 'l', 'o']

HTTP/0.9

HTTP/0.9 是于 1991 年提出的，主要用于学术交流，需求很简单——用来在网络之间传递 HTML 超文本的内容，所以被称为超文本传输协议。整体来看，它的实现也很简单，采用了基于请求响应的模式，从客户端发出请求，服务器返回数据。

完整请求流程

• 因为 HTTP 都是基于 TCP 协议的，所以客户端先要根据 IP 地址、端口和服务器建立 TCP 连接，而建立连接的过程就是 TCP 协议三次握手的过程。
• 建立好连接之后，会发送一个 GET 请求行的信息，如 GET /index.html 用来获取 index.html。
• 服务器接收请求信息之后，读取对应的 HTML 文件，并将数据以 ASCII 字符流返回给客户端。
• HTML 文档传输完成后，断开连接。

在上篇文章 探究网页资源究竟是如何阻塞浏览器加载的 中介绍到 JS 会阻塞 DOM 的加载，样式会阻塞页面的渲染，外链样式里的自定义字体还会对文字造成闪动给用户带来不好的体验，诸如此类问题还有挺多，那到底该如何解决它们呢？

今天我们就来学习通过在 link 标签里加上特定的属性，比如 preload、prefetch 等来解决此类问题，那么你对这些属性又了解多少呢？把它们用在了你们的项目优化中了嘛？

一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。

阅读完这篇文章你将解开如下谜团：

• 如何用 Chrome 定制网络加载速度？
• 图片/视频/字体会阻塞页面加载嘛？
• CSS 是如何阻塞页面加载的？
• JS 又是如何阻塞页面加载的？
• JS 一定会阻塞 DOM 加载嘛？
• defer 和 async 是什么？又有何特点？
• 动态脚本会造成阻塞嘛？
• 阻塞是怎么和 DOMContentLoaded 与 onload 扯上关系的？

可以在浏览器的 Application 面板下看到浏览器的本地存储包含了：Cookie、sessionStorage、localStorage 和 IndexedDB。

Cookie

Cookie 是什么

Cookie 又叫 HTTP Cookie 或者叫浏览器 Cookie。Cookie 的作用是维护服务端和客户端的会话状态，简而言之就是告诉服务器当前客户端用户的一些信息，比如是否登录啥的。

浏览器缓存一直是个老生常谈的话题，也是面试官常常用来鉴别面试者的利器，作为前端来讲这块知识是属于必须掌握的，再者利用好缓存也是做性能优化的有效方法。本文将从缓存原因、缓存读写顺序，缓存位置以及缓存策略这几个角度介绍浏览器缓存，并且最后给出实践的应用举例。

为什么要缓存

很多同学知道缓存的位置和字段，知道怎么用，但是你有没有想过为什么我们的页面需要浏览器缓存呢？

• 缓存可以减少用户等待时间，提升用户体验，直接从内存或磁盘中取缓存数据肯定是比从服务器请求更快的；
• 减少网络带宽消耗：对于网站运营者和用户，带宽都代表着成本，过多的带宽消耗，都需要支付额外的费用。试想一下如果可以使用缓存，只会产生极小的网络流量，这将有效的降低运营成本。
• 降低服务器压力：给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，降低服务器的压力。