--- theme: channing-cyan highlight: juejin --- ## 浏览器和协议 ### 1. 从输入url到展示页面加载的过程 * 通过DNS解析获得网址的对应IP地址
* 浏览器与远程web服务器通过TCP三次握手协商来建立一个 TCP/IP 连接
* 浏览器通过TCP/IP连接向web服务器发送一个 HTTP 请求
* 服务器的永久重定向响应
* 浏览器跟踪重定向地址
* 服务器处理请求
* 服务器返回一个 HTTP 响应
* 浏览器渲染:解析HTML、解析CSS、解析JS、Render树
### 2. 三次握手和四次挥手 **握手** * 第一次握手，发送端首先发送一个带SYN（synchronize）标志的数据包给接收方，第一次的seq序列号是随机产生的，这样是为了网络安全，如果不是随机产生初始序列号，黑客将会以很容易的方式获取到你与其他主机之间的初始化序列号，并且伪造序列号进行攻击 * 第二次握手，接收端收到后，回传一个带有SYN/ACK（acknowledgement）标志的数据包以示传达确认信息SYN 是为了告诉发送端，发送方到接收方的通道没问题；ACK 用来验证接收方到发送方的通道没问题 * 第三次握手，发送端再回传一个带ACK标志的数据包，代表握手结束，若在握手某个过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c5ff3d32b5840b58150b676a4c8fea7~tplv-k3u1fbpfcp-watermark.image#?w=1106\&h=455\&s=62999\&e=png\&b=fefefe) **挥手** * 客户端发送一个 FIN，用来关闭服务端到客户端的数据传送 * 服务端收到这个 FIN，它发回一个 ACK，确认序号为收到的序号加1 。和 SYN 一样，一个 FIN 将占用一个序号 * 服务端关闭与客户端的连接，发送一个FIN给客户端 * 客户端发回 ACK 报文确认，并将确认序号设置为收到序号加1 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/236e751f3c4d4acc9d4bf8a5c8b4e083~tplv-k3u1fbpfcp-watermark.image#?w=1147\&h=461\&s=60265\&e=png\&b=fefefe) ### 3. HTTP和HTTPS **HTTP：** * 不安全 * 协议对客户端没有状态存储【没有状态】 * 每次请求需要TCP三次握手四次挥手，和服务器重新建立连接【没有连接】 * 基本的特性，由客户端发起请求，服务端响应 * 简单快速、灵活 * 使用明文、请求和响应不进行确认 **HTTPS：** * 安全 * HTTP安全版本，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护 * 采用混合加密技术，传输过程无法直接查看明文内容【传输加密】 * 通过证书认证客户端访问的是自己的服务器【身份认证】 * 传输过程防止被篡改【数据完整】详情请参考：[HTTP和HTTPS协议，看一篇就够了](https://blog.csdn.net/xiaoming100001/article/details/81109617/) ### 4. 跨域的解决方案 * JSONP * PostMessage * document.domain * Websocket * CORS * Nginx 反向代理 * Node 中间件代理详情请参考：
[前端常见跨域解决方案（全）](https://segmentfault.com/a/1190000011145364)
[可能是最好的跨域解决方案了](https://mp.weixin.qq.com/s/58T6DvK_v2UNLbCpU6F8ig)
### 5. 01服务器返回的code意义 | 状态码 | 简义 | 含义 | | --- | --------- | ------------------------------------ | | 100 | 继续请求 | 服务器已接收到部分请求，等待剩下的部分继续请求 | | 101 | 切换协议 | 客户端请求切换协议，服务器已准备切换协议 | | 200 | 请求成功 | 客户端请求的数据服务器已成功返回 | | 201 | 创建成功 | 客户端请求成功且服务器已创建新的资源 | | 202 | 接受请求 | 服务器已接受请求，但尚未处理 | | 203 | 非授权信息 | 服务器处理成功，但返回内容源于其他 | | 204 | 没有内容 | 服务器处理成功，但是没有任何返回 | | 205 | 内容重置 | 服务器处理成功，内容无返回，请求重置文档内容 | | 206 | 部分内容 | 服务器成功处理了部分get请求 | | 300 | 多种选择 | 服务器可以执行多个操作，或者根据返回列表客户端选择进行操作 | | 301 | 永久移动 | 请求的资源已永久移动到其他位置，服务器自动修改请求资源的位置 | | 302 | 临时移动 | 服务器响应的资源非在客户端请求的位置，但是可以响应该请求 | | 303 | 访问其他位置 | 服务器自动（除 HEAD 之外）请求的其他位置 | | 304 | 未修改 | 上次访问服务器的资源没有改变 | | 305 | 使用代理 | 客户端使用代理访问服务器 | | 307 | 临时重定向 | 客户端的要求服务器临时修改当前访问资源位置 | | 400 | 请求错误 | 服务器无法解析该请求 | | 401 | 未授权 | 客户端请求的资源没有进行身份验证，或未请求权限 | | 403 | 拒绝请求 | 客户端发起的请求被服务器拒绝 | | 404 | 未找到 | 没有找到请求的网页地址或请求的地址不存在 | | 405 | 方法禁用 | 客户端请求的方法被禁用 | | 406 | 无法请求 | 无法使用请求的内容特性响应请求的网页 | | 407 | 缺少代理授权 | 客户端请求应使用代理或需要代理的授权 | | 408 | 请求超时 | 服务器等候请求超时 | | 409 | 存在冲突 | 服务器返回字段存在冲突，或返回的列表差异过大 | | 410 | 已删除 | 请求资源已删除，请求资源以前有而现在没有 | | 411 | 标头字段无效 | 服务器不接受不含有效内容长度标头字段的请求 | | 412 | 条件未满足 | 服务器未满足请求者在请求中设置的其中一个前提条件 | | 413 | 请求体超标 | 服务器无法处理超标（占用内存太大）的请求，超出了服务器的处理范围 | | 414 | URI超标 | 请求的 URI超标，服务器无法解析 | | 415 | 不支持请求 | 请求的格式不受请求页面的支持 | | 416 | 不在请求范围 | 页面无法提供请求的范围 | | 417 | 请求头未满足条件 | 服务器没有按要求请求标头字段 | | 500 | 服务器内部错误 | 服务器无法完成请求 | | 501 | 未完成请求 | 服务器问题，没有完成请求，并非请求问题 | | 502 | 网关错误 | 服务器配置的网关可能存在问题，无法接收信息 | | 503 | 服务器不可使用 | 服务器正处于维护阶段或暂停服务 | | 504 | 网关超时 | 网关没有及时未回应，上游没有接收到信息 | | 505 | HTTP协议不支持 | 当前请求的HTML版本与服务器不一致或服务器不支持当前请求的HTML版本 | 详情请参考： [HTTP请求返回code意义](https://www.cnblogs.com/diqitian/p/6013512.html) ## HTML ### 1. 语义化标签有哪些？ header 头部 nav 导航栏 section 区块 main 主要区域 article 主要内容 aside 侧边栏 footer 底部 ### 2. 简单说一下拖拽过程？ dragstart // 拖放事件，开始拖放时触发。 darg // 拖放事件，正在拖放触发。 dragenter // 目标事件，拖放进入目标时触发。 dragover // 目标事件，拖放目标内移动时触发。 dragleave // 目标事件，拖放移出目标时触发。 drop // 目标事件，目标接受被拖放时触发。 dragend // 拖放事件，拖放操作结束时触发。 ### 3. 严格模式与混杂模式 **严格模式：** 浏览器支持的最高标准运行 **混杂模式：** 向下兼容的方式显示，模拟低版本浏览器的行为 ### 4. iframe的优缺点有哪些？ **优点：** * iframe能够原封不动地把嵌入的网页展示出来； * 提高页面代码的复用性； * 解决加载缓慢的第三方内容，如图标和广告等的加载问题； * 在处理上传或局部刷新时，避免了页面整体刷新； * iframe解决部分跨域问题； **缺点：** * iframe会阻塞主页面的 onload 事件； * 无法被一些搜索引擎索引到； * 页面会增加服务器的http请求； * 会产生很多页面，不便于管理； * 很多移动设备无法完全显示框架，设备兼容性差； * 会出现区域的上下、左右滚动条，滚动条会挤占页面空间； * 使用框架时，要保证正确的使用导航链接，容易造成链接死循环； ## CSS ### 1. 盒模型 **盒模型构成**：content + padding + border + margin
W3C标准盒模型：width表示content（主内容）宽度
IE盒子模型： width表示content(主内容)+padding(内边距)+border(边框)这三个部分的宽度 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b78d40bebe6d40c1bed03066107ffe62~tplv-k3u1fbpfcp-watermark.image#?w=1019\&h=752\&s=1231707\&e=png\&b=fcf6f5) **切换盒模型:** box-sizing: content-box // W3C盒子模型 box-sizing: border-box // IE盒子模型 ### 2. CSS常用样式选择器 | 选择器 | 权重 | 使用示例 | | ---------- | ---- | ------------------------------- | | !important | 1111 | \* {color: '#00f' !important} | | 行内 | 1000 | \ | | id | 0100 | #id{color:'#00f} | | class | 0010 | .calssName{color:'#00f} | | 标签 | 0001 | div{color:'#00f} | | 子选择 | 0001 | div \> span{color:'#00f} | | 伪类 | 0001 | a:hover {color:'#00f}\> | **PS:** 相同等级或重复写的样式则为最后写的样式为准 ### 3. 伪类和伪元素 **常用的伪类：** a:link // 未访问 a:hover // 悬停 a:visited // 已访问 a:active // 已选择 **常用的伪元素：** span::before { // 内容前面插入新内容 content:''; } span::after{ // 内容之后插入新内容 content:''; } ### 4. CSS属性继承 ### 5. 居中div的方案 **水平垂直居中：** div{ position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); } 详情请参考： [CSS实现DIV居中方案](https://blog.csdn.net/YourActivity/article/details/115328745) ### 6. 绝对定位和相对定位 * position属性的绝对定位：absolute 和 fixed 统称为绝对定位 * position属性的相对定位：relative * position属性的默认值：static * absolute脱离文档流，参考最近的relative位置，没有设置相对定位没有则参照根元素html的位置 * relative定位是相对于自身位置定位详情请参考：[position 相对定位和绝对定位](https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html) ### 7. CSS3特性 border-radius // 圆角 text-shadow // 文字阴影 transition // 动画过度 animation // 动画 box-shadow // 盒子阴影 border-image // 图片边框 background-clip // 背景绘制 color: rgba(0,0,0,0.1) // 透明度设置 flex //布局 // 媒体查询 // 多列布局 ### 8. Flex布局详情请参考：[Flex 布局教程：语法篇](https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) ### 9. CSS绘制三角形普通三角形 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ab3e1cb90fa4f19b1f2797d9eac4eeb~tplv-k3u1fbpfcp-watermark.image#?w=106\&h=104\&s=938\&e=png\&b=fffefe) div { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 右上角角标的三角形 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ab212f30647474bbf568749c647e1c2~tplv-k3u1fbpfcp-watermark.image#?w=108\&h=109\&s=962\&e=png\&b=ffffff) div { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; } ### 10. px、em、rem、vh\vw **px：** 像素px是相对于显示器屏幕分辨率而言的一个单位
**em：** 相对于当前对象内文本的字体尺寸
**rem：** 相对于根元素\的字体大小
**vh\vw：** 相对于视口的高度和宽度。1vh = 1/100 的浏览窗口高度，1vw = 1/100 的浏览器窗口宽度
### 11. 清除浮动的方法

// 父元素使用overflow: hidden、auto // 使用伪元素清除浮动 ### 12. CSS优化 * 尽量避免使用@import * 多个图片背景尽量使用精灵图 * 减少重绘和重排的属性使用（如color，background，visibility等属性） * 有重复命名时，选择器添加父节点名方便快捷查找 ### 13. 0.5px的线条 div{ left: 0; top: 0; width: 100%; height: 1px; background-color: red; transform: scaleY(0.5); // 通过设置 Y 轴的值来定义缩放转换 transform-origin: center top; // 允许您改变被转换元素的位置,X轴位置‘center’,Y轴位置‘top’ } ### 14. CSS动画 * @keyframes * animation-name * animation-duration * animation-delay * animation-iteration-count * animation-direction * normal - 动画正常播放（向前）。默认值 * reverse - 动画以反方向播放（向后） * alternate - 动画先向前播放，然后向后 * alternate-reverse - 动画先向后播放，然后向前 * animation-timing-function * ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） * linear - 规定从开始到结束的速度相同的动画 * ease-in - 规定慢速开始的动画 * ease-out - 规定慢速结束的动画 * ease-in-out - 指定开始和结束较慢的动画 * cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值 * animation-fill-mode * none - 默认值。动画在执行之前或之后不会对元素应用任何样式。 * forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。 * backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。 * both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。 * animation * 设置所有动画属性的简写属性。 @keyframes anima { 0% {background-color: #fff;} 50% {background-color: #00f;} 100% {background-color: #0cf;} } div { width: 50px; height: 50px; background-color: #fff; animation-name: anima; // 添加动画 animation-duration: 3s; // 动画时间3s animation-delay: 0.5s; // 延迟0.5s animation-iteration-count: 3; // 该动画执行3次 // 设置 infinite 则一直执行 } ## JavaScript ### 1. 数据类型 **基础数据类型**：Undefined、Null、Boolean、Number、String、Symbol【ES6】、Bigint【ES10】
**复杂数据类型（三大引用类型）**：Object、Array、Function 【Arrar和Function都属于Object类型】
var obj = new Object(); obj.name = 'zhangsan'; var arr = new Array(); arr.push(1); var func = function(){ return 1 } console.log(obj, arr, func()); // {name:'zhangsan'}, [1], 1 ### 2. 数据类型转换 **可以相互转换的类型**：Number、String、Boolean
var a = 0; console.log(a); // 0 console.log(a.toString()); // '0' console.log(parseInt(a.toString())); // 0 console.log(+(a.toString())); // 0 console.log(Boolean(a)); // false ### 3. 数据类型判断 **typeof** console.log(typeof 1);　　 // number console.log(typeof '1');　　 // string console.log(typeof true ); // boolean console.log(typeof undefined); // undefined console.log(typeof null); // object console.log(typeof {}); // object console.log(typeof [] ); // object var func = function(){ return 1 } console.log(typeof func ); // function console.log(typeof func() ); // number console.log(typeof (function() {})); // function **constructor** console.log(false.constructor === Boolean); // true **Object.prototype.toString.call** console.log(Object.prototype.toString.call(false)); // [object Boolean] **instanceof**【只能识别复杂类型】 console.log([] instanceof Array); // true console.log({} instanceof Object); // true var func = function(){ return 1 } console.log(func instanceof Function); // true console.log(1 instanceof Number); // false ### 4. 原型和原型链 * 定义一个函数数据类型(普通函数、类)时候，都会自带一个 prototype 属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值 * 对象数据类型也自带一个属性 \_\_proto\_\_ ，属性值是当前实例所属类的原型(prototype)。原型对象中有一个属性 constructor , 它指向函数对象 * 原型链指的是通过prototype对象指向父类对象最后指向Object对象的过程【Object最后为null】 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76f95c798af84592b859f834cfd30855~tplv-k3u1fbpfcp-watermark.image#?w=737\&h=617\&s=46210\&e=png\&b=ffffff) ### 5. 作用域和作用域链 * 作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存 * 当代码在一个环境中执行时，会创建变量对象的一个作用域链（作用域形成的链条) * 内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数 * 当在内部函数中，需要访问一个变量的时候，首先会访问函数本身的变量对象，是否有这个变量，如果没有，那么会继续沿作用域链往上查找，直到全局作用域。在 Web 浏览器中，全局执行环境被认为是 window 对象，所有全局变量和函数都是作为 window 对象的属性和方法创建的。在 node 环境中，全局执行环境是 global 对象。 ### 6. 深拷贝和浅拷贝的方法 * 浅拷贝就是可以将对象的基础类型复制，无法复制复杂数据类型 * 深拷贝就是为了解决无法复制复杂数据类型，对数据进行深程度拷贝 **浅拷贝**
1. Object.assign var obj1 = { name:'zangsan', age: 18 } var obj2 = Object.assign(obj1); console.log(obj1, obj2) 2. 扩展运算符(...) var obj1 = { name:'zangsan', age: 18 } var obj2 = {...obj1}; console.log(obj1, obj2) 3. for...in function copy(obj1) { var obj = Array.isArray(obj1) ? [] : {}; for (let i in obj1) { obj[i] = obj1[i]; } return obj; } var obj1 = { name:'zangsan', age: 18 } var obj2 = copy(obj1); console.log(obj1, obj2) **深拷贝** 1. JSON对象来实现深拷贝【缺点：函数无法拷贝，会显示undefined】 var obj1 = { name:'zangsan', age: 18, hobby:{ motion: new Array('篮球','足球'), } } function deepClone(obj) { var _obj = JSON.stringify(obj), objClone = JSON.parse(_obj); return objClone; } var obj2 = deepClone(obj1); console.log(obj1, obj2); 2. lodash函数库实现深拷贝【需要引入[lodash](https://www.lodashjs.com/)库】 var obj1 = { name:'zangsan', age: 18, hobby:{ motion: new Array('篮球','足球') } } var obj2 = _.cloneDeep(obj1); console.log(obj1, obj2); 3. 递归 function deepClone(obj){ 015 objClone = Array.isArray(obj) ? [] : {}; if(obj && typeof obj=== "object"){ for(key in obj){ if(obj.hasOwnProperty(key)){ if(obj[key]&&typeof obj[key] ==="object"){ objClone[key] = deepClone(obj[key]); }else{ objClone[key] = obj[key]; } } } } return objClone; } var obj1 = { name:'zangsan', age: 18, hobby:{ motion: new Array('篮球','足球') } } var obj2 = deepClone(obj1); console.log(obj1, obj2); ### 7. 闭包 * 在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“
* 在本质上，闭包是将函数内部和函数外部连接起来的桥梁详情请参考：[学习Javascript闭包](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html) ### 8. 常用的创建对象的几种方式 * 工厂模式 const createCase = (name,age,onName) =>{ const obj = new Object(); obj.name = name; obj.age = age; obj.obName = () => { alert(name); } return obj; } const case1 = createCase('zs', 23); const case2 = createCase('ls', 24); console.log(case1); // {name: 'zs', age: 23, obName: ƒ} console.log(case2); // {name: 'ls', age: 24, obName: ƒ} * 构造函数模式 function createCase(name,age,onName){ this.name = name; this.age = age; this.obName = () => { alert(name); } } const case1 = new createCase('zs', 23); const case2 = new createCase('ls', 24); console.log(case1); // {name: 'zs', age: 23, obName: ƒ} console.log(case2); // {name: 'ls', age: 24, obName: ƒ} * 原型模式 function createCase(){}; createCase.prototype.name = 'zs'; createCase.prototype.age = '23'; const case1 = new createCase(); console.log(case1.name); // 'zs' console.log(case1.age); // 23 * 通过Object构造函数或对象字面量创建单个对象 * 组合使用构造函数模式和原型模式 * 动态原型模式 * 寄生构造函数模式 * 稳妥构造函数模式 ### 9. 继承的几种实现方法 * 构造继承 * 原型链继承 * 拷贝继承 * 实例继承 * 组合继承 * 寄生组合继承 ### 10. this：call、apply、bind * this的指向受函数运行环境的影响(默认指向window) * call方法可以修改this的指向(指向函数执行时所在的作用域), 然后再执行函数 // function.prototype.call(); function f(x, y){ console.log(x + y); } f.call(null, 1, 1) // 2 * apply和call作用类似，唯一区别是apply 接收数组作为函数执行时的参数 // function.prototype.apply(); function f(x, y){ console.log(x + y); } f.apply(null, [1, 1]) // 2 * bind 用于将函数体内的this绑定到某个对象，然后返回一个新函数 // function.prototype.bind(); const add = function (x, y) { console.log(x, y); return x * this.a + y * this.b; } const newAdd = add.bind({a: 2, b: 3}, 5); // 第二个参数为x值 newAdd(5) // 输入参数为y值结果: 25 ### 11. 事件捕获和事件冒泡 * 捕获型事件：事件从document对象开始触发，然后到目标事件 * 冒泡型事件：目标事件到document对象的顺序触发。 ### 12. DOM操作获取DOM * [JavaScript获取节点信息](https://juejin.cn/post/7037006704562667528) DOM事件 * onclick--------点击事件 * onload---------进入时执行事件 * onunload-------离开时执行事件 * onmouseover----鼠标指针移入时执行事件 * onmouseout-----鼠标指针移出时执行事件 * onmousedown----鼠标摁下时执行事件 * onmouseup------鼠标松开时执行事件 ### 13. AJAX * AJAX是异步 JavaScript 和 XML。 * AJAX可以通过在后台与服务器进行少量数据交换,实现异步更新。 * AJAX的XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 * AJAX通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。 * AJAX常用的方法：（新增）post,（获取）get,（删除）delete, （修改）put * 原生AJAX请求 //创建 XMLHttpRequest 对象 var ajax = new XMLHttpRequest(); //规定请求的类型、URL 以及是否异步处理请求。 ajax.open('GET',url,true); //发送信息至服务器时内容编码类型 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //发送请求 ajax.send(null); //接受服务器响应数据 ajax.onreadystatechange = function () {}; ### 14. 宏任务与微任务 * [ 宏任务和微任务的简述](https://juejin.cn/post/7021729751718952997) ## Git操作 * [Git命令](https://juejin.cn/post/7021080043690393637) ## 其他 ### 1. 前端电脑必装 * [VisualStudioCode](https://code.visualstudio.com/) * [Node](https://nodejs.org/download/release/latest-v12.x/) * [内网穿透](https://natapp.cn/) * [GIT](https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git) * [MySQL](https://www.mysql.com/downloads/) ### 2. 实用工具推荐 * [Sourcetree](https://www.sourcetreeapp.com/) * [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) * [谷歌浏览器](https://www.google.cn/intl/zh-CN/chrome/?brand=CHBD\&gclid=EAIaIQobChMIn7ePqL_45gIVx6iWCh3XXgcVEAAYASAAEgIOCfD_BwE\&gclsrc=aw.ds) * [API开发平台](https://www.getpostman.com/) * [夜神模拟器](https://www.yeshen.com/) * [远程电脑控制](http://teamviewer.cn/cn/) ### 3. 学习社区推荐 * [juejin](https://juejin.cn/) * [stackoverflow](https://stackoverflow.com/) * [jianshu](https://www.jianshu.com/) * [leetcode-cn](https://leetcode-cn.com/) * [github](https://github.com/) ### 4. 学习官网推荐 * [MDN](https://developer.mozilla.org/zh-CN/) * [菜鸟教程](https://www.runoob.com/) * [w3school](https://www.w3school.com.cn/js/index.asp) ## PS 希望大家都可以找到在工作中的乐趣。
热爱前端技术。
新手交流点这里 -->[有兴趣一起摸鱼的点击这里](https://juejin.cn/pin/7049527756979175432)