1. 常用的图片格式PNG优点：背景可以透明、画质很高、不失真缺点：体积很大使用场景：比较小或者需要部分透明的图片，例如logo、图标等JPG/JPEG优点：压缩比高的情况下可以保留比较高的画质，相对PNG俩说体积会小很多缺点：边缘会产生锯齿感、模糊感使用场景：在展示...

关键渲染路径这个说法可能听起来会比较陌生，换用一个经常会在面试中被问到的问题：在浏览器输入URL时，Web页面的呈现过程是怎样的？DNS解析、TCP/IP四层模型等负责将资源传送给浏览器，而浏览器从拿到资源开始直到页面绘制结束这个过程就是我们所说的关键渲染路径。

RAIL, 是 Response, Animation, Idle, 和 Load 的首字母缩写, 是一种由Google Chrome团队与2015年提出的性能模型, 用于提升浏览器内的用户体验和性能. RAIL模型的理念是 "以用户为中心；最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意。

1. navigator.onLine返回的是布尔值。true表示在线，false表示离线。onLine属性只能简单判断网络的断开和连接状态，而不能监听网络状态的变化，例如从4g到3g。 {代码...} 兼容性2. navigator.connection能监听到具体的网络变化（例如从4g变化到了3g），但不能监听到...

现代前端在开发过程中时常都会使用到webpack，用来对代码进行模块化打包。通常情况下，我们都是直接使用webpack的配置和别人写好的loader。如果自己要实现一个loader，需要怎么做？

上一篇文章写了写关于防抖的东西，与之相关的节流当然也要来聊一聊。在固定时间内，多次触发只执行一次。类似于定时执行的概念，显然通过setTimeout或者时间戳都可以实现。setTimeout利用setTimeout延时执行的特性，可以在定时器执行的时候去执行事件。 {代码...} 时...

在触发一段时间后执行事件，如果这段时间内又触发了，则继续等待同样的时间。防抖在实际开发中使用场景还是蛮多，比如列表的实时搜索等。延时执行，这很容易想到使用setTimeout来实现。基础版 {代码...} 测试一下 {代码...} 嗯。好像没什么问题。不过我们发现上面在...

不管你是否使用过vue，多多少少应该也了解过vue的使用原理，也就是我们经常说的数据劫持。在vue2中使用的是Object.defineProperty实现的，而在vue3中则是使用的Proxy。

1. Performancevue3在性能方面比vue2快了2倍。重写了虚拟DOM的实现运行时编译update性能提高SSR速度提高2. Tree-shaking supportvue3中的核心api都支持了tree-shaking，这些api都是通过包引入的方式而不是直接在实例化时就注入，只会对使用到的功能或特性进行打包（...

Object.is() 方法判断两个值是否为同一个值。这是MDN上关于Object.is的定义。这定义很像是等号，不过也有些区别。Object.is不会转换被比较的两个值的类型，这点和===更为相似，他们之间也存在一些区别。NaN在===中是不相等的，而在Object.is中是相等的+0和-0在===中...

显而易见，Promise.resolve(value)只是一个resolve的语法糖，返回一个Promise对象。需要注意的一点是如果value本身就是一个promise或者含有then方法的对象，那么就直接返回value。

catch() 方法返回一个Promise，并且处理拒绝的情况。我们知道then方法的第二个参数其实就是干这个用的，catch只是一个别名。

前端开发中经常会用到Promise，不过有部分人并不清楚Promise的原理，本文也是本人在学习Promise时对Promis的一些认识，希望能对各位童鞋有所帮助。

对称加密算法 加密和解密共用一个秘钥的方式成为共享加密算法（对称加密算法）。 优点：加解密速度快，效率高缺点：不便于秘钥的分发和管理，安全性不高 非对称加密算法 非对称加密算法使用一对非对称的秘钥。一把叫做私有秘钥，不能让其他任何人知道。另一把叫做公...

HTTPS = HTTP + 加密 + 认证 + 完整性保护。简单点说HTTPS可以看做是对HTTP的一个扩展，在HTTP的基础上添加了一些其他的东西。加密、认证和完整性保护，添加这么些东西就很明显是为了保证数据的安全性。

GET：获取资源 例如图片、css文件、js文件等，在RESTful API中，一般用来获取数据，例如列表，详情等。对应CRUD中的R，即查找操作。 POST：传输实体主体 例如提交表单信息，在RESTful API中，一般用来提交数据，例如表单等。对应CRUD中的C，即创建操作。 PUT：传输文...

一个简单回答： 浏览器生成请求并发送到服务器； 服务器接受到请求后，执行一些动作或获取某些资源，然后将响应发送回客户端； 浏览器在接收到响应数据之后，解析DOM树和CSS树，处理JavaScript，构建页面。 如果这是你是在面试中的回答，那估计面试官的表情就是这样...

OSI七层模型是国际标准，分为七层，概念清晰，但却过于复杂，由此演变出了一个事实标准即TCP/IP四层模型，这个模型将应用层、表示层、会话层合并为一层应用层，将数据链路层、物理层合并为链路层。

SCSS预编译： scss的@import则更加像我们使用的import等模块化的东西，它是直接将代码包含进目标SCSS文件，而不会产生额外的http请求。

前言 hooks是react16.8新增的特性。关于为什么要新增hooks，是因为class的组件会存在以下的一些问题。 在组件之间复用状态逻辑很难 复杂组件变得难以理解 难以理解的 class 这些点就不详细赘述了，这篇文章的重点是介绍hooks。 useState function useState<S>(...