前端面经 - 看这篇就够了（笔者靠这个拿到阿里和字节的offer

• CSS优化、提高性能的方法有哪些

• 多个css合并，尽量减少HTTP请求

• 将css文件放在页面最上面

• 移除空的css规则

• 避免使用CSS表达式

• 选择器优化嵌套，尽量避免层级过深

• 充分利用css继承属性，减少代码量

• 抽象提取公共样式，减少代码量

• 属性值为0时，不加单位

• 属性值为小于1的小数时，省略小数点前面的0

• 使用CSS Sprites将多张图片拼接成一张图片，通过CSS background 属性来访问图片内容

js

• 节流、防抖

• 长列表滚动到可视区域动态加载（大数据渲染）

• 图片懒加载（src）

• 使用闭包时，在函数结尾手动删除不需要的局部变量，尤其在缓存dom节点的情况下

• DOM 操作优化

• 批量添加dom可先createElement创建并添加节点，最后一次性加入dom

• 批量绑定事件，使用事件委托绑定父节点实现，利用了事件冒泡的特性

• 如果可以使用innerHTML代替appendChild

• 在 DOM 操作时添加样式时尽量增加 class 属性，而不是通过 style 操作样式，以减少重排（Reflow）

网络

• 减少 HTTP 请求数量

• 利用浏览器缓存，公用依赖包（如vue、Jquery、ui组件等）单独打包/单文件在一起，避免重复请求

• 减小cookie大小，尽量用localStorage代替

• CDN托管静态文件

• 开启 Gzip 压缩

浏览器内核

• 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

• JS引擎则：解析和执行javascript来实现网页的动态效果

• 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些

• Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

• Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]

• Webkit内核：Safari,Chrome等。[ Chrome的Blink（WebKit的分支）]

cookies、sessionStorage、localStorage 和 indexDB 的区别

• cookie是网站为了标示用户身份而储存在用户本地的数据

• 是否在http请求只能够携带

• cookie数据始终在同源的http请求中携带，跨域需要设置withCredentials = true

• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

• 存储大小：

• cookie数据大小不能超过4k；

• sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大，因不同浏览器大小不同；

• 有效时间：

• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

• localStorage 硬盘存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

• sessionStorage 存在内存中，数据在当前浏览器窗口关闭后自动删除

画表对比：

| 特性 | cookie | localStorage | sessionStorage | indexDB |

| — | — | — | — | — |

| 数据生命周期 | 一般由服务器生成，可以设置过期时间 | 除非被清理，否则一直存在 | 页面关闭就清理 | 除非被清理，否则一直存在 |

| 数据存储大小 | 4K | 5M | 5M | 无限 |

| 与服务端通信 | 每次都会携带在 header 中，对于请求性能影响 | 不参与 | 不参与 | 不参与 |

对于 cookie，还需要注意安全性：

| 属性 | 作用 |

| — | — |

| value | 如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识 |

| http-only | 不能通过 JS访问 Cookie，减少 XSS攻击 |

| secure | 只能在协议为 HTTPS 的请求中携带 |

| same-site | 规定浏览器不能在跨域请求中携带 Cookie，减少 CSRF 攻击 |

从输入URL到浏览器显示页面过程中都发生了什么

• 参考：从输入URL到浏览器显示页面过程中都发生了什么[1]

对AMD、CMD的理解

• CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数

• AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的

• AMD

es6模块 CommonJS、AMD、CMD

• CommonJS 的规范中，每个 JavaScript 文件就是一个独立的模块上下文（module context），在这个上下文中默认创建的属性都是私有的。也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。

• CommonJS是同步加载模块,在浏览器中会出现堵塞情况，所以不适用

• AMD 异步，需要定义回调define方式

• es6 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量 es6还可以导出类、方法，自动适用严格模式

模块化（AMD、CMD、CommonJS、ES6）

模块化的演进过程

• 1.文件划分的方式 污染全局作用域 命名冲突 无法管理模块依赖关系

• 2.命名空间方式 在第一个阶段的基础上 将每个模块只暴露一个全局对象 所有的变量都挂载到这个全局对象上

• 3.IIFE 立即执行函数 为模块提供私有空间

• 以上是早起在没有工具和规范的情况下对模块化的落地方式

模块化规范的出现 模块化规范+模块加载器

1. AMD 异步加载

• require.js的实现 define(‘modle’, [加载资源]， ()=>{})

• 使用起来比较复杂

• 模块js文件请求频繁

• 先加载依赖

// require.js 就是使用的这种风格

define([‘a.js’, ‘b.js’], function(A, B) {

// do something

})

// 实现思路：建一个node节点, script标签

var node = document.createElement(‘script’)

node.type = ‘text/javascript’

node.src = ‘1.js’

// 1.js 加载完后onload的事件

node.addEventListener(‘load’, function(evt) {

// 开始加载 2.js

var node2 = document.createElement(‘script’)

node2.type = ‘text/javascript’

node2.src = ‘2.js’

// 插入 2.js script 节点

document.body.appendChild(node2)

})

// 将script节点插入dom中

document.body.appendChild(node);

2. CMD sea.js

• sea.js

• 按需加载

• 碰到require(‘2.js’)就立即执行2.js

define(function() {

var a = require(‘2.js’)

console.log(33333)

})

3. commonjs 服务端规范

• 一个文件就是一个模块

• 每个模块都有单独的作用域

• 通过module.exports导出成员

• 通过require函数载入模块

• commonjs是以同步的方式加载模块 node的执行机制是在启动时去加载模块 在执行阶段不需要加载模块

• CommonJS 模块输出的是一个值的拷贝，一旦输出一个值，模块内部的变化就影响不到这个值

• CommonJS 模块加载的顺序，按照其在代码中出现的顺序

• 由于 CommonJS 是同步加载模块的，在服务器端，文件都是保存在硬盘上，所以同步加载没有问题，但是对于浏览器端，需要将文件从服务器端请求过来，那么同步加载就不适用了，所以，CommonJS 是不适用于浏览器端的。

• CommonJS 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存

4. ESmodules 浏览器模块化规范

• 在语言层面实现了模块化 通过给script的标签 将type设置成module 就可以使用这个规范了

• 基本特性

• 自动采用严格模式，忽略use strict

• 每个ESM模块都是单独的私有作用域

• ESM是通过CORS去请求外部JS模块的

• ESM中的script标签会延迟执行脚本

• ES6 模块是动态引用，引用类型属性被改变会相互影响

• export import 进行导入导出

• 导出的并不是成员的值 而是内存地址 内部发生改变外部也会改变，外部导入的是只读成员不能修改

• ES module中可以导入CommonJS模块

• CommonJS中不能导入ES module模块

• CommonJS始终只会导出一个默认成员

• 注意import不是解构导出对象

浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下

• 先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；

• 当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；

• 强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源；区别是，强缓存不对发送请求到服务器，但协商缓存会。

• 当协商缓存也没命中时，服务器就会将资源发送回客户端。

• 当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；

• 当 f5刷新网页时，跳过强缓存，但是会检查协商缓存；

强缓存

• Expires（该字段是 http1.0 时的规范，值为一个绝对时间的 GMT 格式的时间字符串，代表缓存资源的过期时间）

• Cache-Control:max-age（该字段是 http1.1的规范，强缓存利用其 max-age 值来判断缓存资源的最大生命周期，它的值单位为秒）

协商缓存

• Last-Modified（值为资源最后更新时间，随服务器response返回，即使文件改回去，日期也会变化）

• If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）

• ETag（表示资源内容的唯一标识，随服务器response返回，仅根据文件内容是否变化判断）

• If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）

浏览器是如何渲染网页的

• 参考：浏览器渲染页面过程[2]

重绘（Repaint）和回流（Reflow）

重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。

• 重绘：当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘

• 回流：布局或者几何属性需要改变就称为回流。

• 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子节点很可能会导致父节点的一系列回流。

以下几个动作可能会导致性能问题：

• 改变 window 大小

• 改变字体

• 添加或删除样式

• 文字改变

• 定位或者浮动

• 盒模型

重绘和回流其实也和 Eventloop 有关。

• 当 Eventloop 执行完 Microtasks 后，会判断 document 是否需要更新，因为浏览器是 60Hz 的刷新率，每 16.6ms 才会更新一次。

• 然后判断是否有 resize 或者 scroll 事件，有的话会去触发事件，所以 resize 和 scroll 事件也是至少 16ms 才会触发一次，并且自带节流功能。

• 判断是否触发了 media query

• 更新动画并且发送事件

• 判断是否有全屏操作事件

• 执行 requestAnimationFrame回调

• 执行 IntersectionObserver 回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好 更新界面

• 以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback回调

如何减少重绘和回流：

1. 使用 transform 替代 top

2. 使用 visibility 替换display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）

3. 不要把节点的属性值放在一个循环里当成循环里的变量

4. 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

5. 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame

6. CSS 选择符从右往左匹配查找，避免节点层级过多

7. 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层。

8. 避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）

9. 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color

10. 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

11. 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示

12. 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document

13. 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流

设置节点为图层的方式有很多，我们可以通过以下几个常用属性可以生成新图层

• will-change

• video、iframe 标签

首屏加载优化方案

1. Vue-Router路由懒加载（利用Webpack的代码切割）

2. 使用CDN加速，将通用的库从vendor进行抽离

3. Nginx的gzip压缩

4. Vue异步组件

5. 服务端渲染SSR

6. 如果使用了一些UI库，采用按需加载

7. Webpack开启gzip压缩

8. 如果首屏为登录页，可以做成多入口

9. 图片懒加载减少占用网络带宽

10. 页面使用骨架屏

11. 利用好script标签的async和defer这两个属性。功能独立且不要求马上执行的js文件，可以加入async属性。如果是优先级低且没有依赖的js，可以加入defer属性。

可利用performance.timing看各个步骤的耗时：白屏时间：performance.timing.responseStart \- performance.timing.navigationStart

二、html

---

html5有哪些新特性、移除了那些元素？

新增功能：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

• 新增选择器 document.querySelector、document.querySelectorAll

• 拖拽释放(Drag and drop) API

• 媒体播放的 video 和 audio

• 本地存储 localStorage 和 sessionStorage

• 离线应用 manifest

• 桌面通知 Notifications

• 语意化标签 article、footer、header、nav、section

• 增强表单控件 calendar、date、time、email、url、search

• 地理位置 Geolocation

• 多任务 webworker

• 全双工通信协议 websocket

• 历史管理 history

• 跨域资源共享(CORS) Access-Control-Allow-Origin

• 页面可见性改变事件 visibilitychange

• 跨窗口通信 PostMessage

• Form Data 对象

• 绘画 canvas

移除的元素：

• 纯表现的元素：basefont、big、center、font、 s、strike、tt、u

• 对可用性产生负面影响的元素：frame、frameset、noframes

viewport

延伸提问：怎样处理 移动端 1px 被 渲染成 2px问题？

• 局部处理

• meta标签中的 viewport属性 ，initial-scale 设置为 1

• rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；

• 全局处理

• mate标签中的 viewport属性 ，initial-scale 设置为 0.5

• rem 按照设计稿标准走即可

html文档解析

• 参考：html文档解析为AST语法树[3]

三、css

---

1. css选择器优先级

!important > inline > id > class > tag > * > inherit > default

• !important：大于其他

• 行内：1000

• id选择器：100

• 类，伪类和属性选择器，如.content：10

• 类型选择器和伪元素选择器：1

• 通配符、子选择器、相邻选择器：0

同级别的后写的优先级高。

相同class样式，css中后写的优先级高，和html中的class名字前后无关

2. 水平垂直居中

• 文本水平居中：text-algin: center

• 文本垂直居中：line-height等于容器height；display: flex; algin-items: center;

• div水平居中：

1. margin: 0 auto;

2. 已知父元素宽度：margin-left: width / 2; transform: tranlateX(-50%)

3. 未知父元素宽度：position: absolute: top: 50%; transform: tranlateY(-50%)

4. display: flex; justify-content: center;

div垂直居中：

1. 已知父元素高度：margin-top: height / 2; transform: tranlateY(-50%)

2. 未知父元素高度：position: absolute: top: 50%; transform: tranlateY(-50%)

3. display: flex; algin-items: center;

3. 移除inline-block间隙

• 移除空格

• 使用margin负值

• 使用font-size:0

• letter-spacing

• word-spacing

4. 清除浮动

浮动的影响：（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素 （2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置 （3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示 清除浮动的3个方法：

1. 使用clear: both清除浮动

在浮动元素后面放一个空的div标签，div设置样式clear:both来清除浮动。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护。

1. 利用伪元素after来清除浮动

给父元素添加了:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

.clearfix:after{

content: “”;

display: block;

visibility: hidden;

clear: both;

}

1. 使用CSS的overflow属性

当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果

• 参考：css清除浮动[4]

5. （外）边距重叠

布局垂直方向上两个元素的间距不等于margin的和，而是取较大的一个

1. 同级相邻元素

现象：上方元素设置margin-bottom: 20px，下方元素设置margin-top: 10px，实际的间隔是20px 避免办法：同级元素不要同时设置，可都设置margin-bottom或margin-top的一个，或者设置padding

1. 父子元素

现象：父元素设置margin-top: 20px，下方元素设置margin-top: 10px，实际的间隔是20px 避免办法：父元素有padding-top，或者border-top。或者触发BFC

6. 三栏布局

要求：左边右边固定宽度，中间自适应

float

左

右

中

  

position

左

中

  

右

flex

左

中

  

右

7. BFC

BFC是Block Formatting Context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。

简单来说，BFC 实际上是一块区域，在这块区域中遵循一定的规则，有一套独特的渲染规则。

文档流其实分为普通流、定位流和浮动流和三种，普通流其实就是指BFC中的FC，也即格式化上下文。

普通流：元素按照其在 HTML 中的先后位置从上到下、从左到右布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行。

格式化上下文：页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用

§ BFC的几条规则： 1）BFC 区域内的元素外边距会发生重叠。

2）BFC 区域内的元素不会与浮动元素重叠。

3）计算 BFC 区域的高度时，浮动元素也参与计算。

4）BFC 区域就相当于一个容器，内部的元素不会影响到外部，同样外部的元素也不会影响到内部。

§ BFC的应用：

1. 清除浮动：父元素设置overflow: hidden触发BFC实现清除浮动，防止父元素高度塌陷，后面的元素被覆盖，实现文字环绕等等。

2. 消除相邻元素垂直方向的边距重叠：第二个子元素套一层，并设置overflow: hidden，构建BFC使其不影响外部元素。

3. 消除父子元素边距重叠，父元素设置overflow: hidden

§ 触发BFC的方式：

1. float 不为 none，浮动元素所在的区域就是一个 BFC 区域。

2. position 的值不是 static 或 relative 的元素所在的区域就是一个 BFC 区域

3. display为 table-cell 的表格单元格元素所在的区域也是一个 BFC 区域

4. overflow 不为 visible 的元素所在的区域也是一个 BFC 区域

• 参考：CSS 中你应该了解的 BFC[5]

8. flex布局

弹性布局，Flex 布局将成为未来布局的首选方案。 兼容性：

1. Webkit 内核的浏览器，必须加上-webkit前缀。

2. ie9不支持

基本概念：

1. 容器&项目：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

2. 主轴&交叉轴：堆叠的方向，默认主轴是水平方向，交叉轴是垂直方向。可通过flex-derection: column设置主轴为垂直方向。

容器属性：

• display: flex

• flex-direction：主轴的方向（即项目的排列方向），row | row-reverse | column | column-reverse;

• flex-wrap：是否换行，nowrap | wrap | wrap-reverse;

• flex-flow：direction 和 wrap简写

• justify-content：主轴对齐方式，flex-start | flex-end | center | space-between | space-around;

• align-items：交叉轴对齐方式，flex-start | flex-end | center | baseline | stretch;

• align-content: 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start | flex-end | center | space-between | space-around | stretch;

项目的属性:

• order：项目的排列顺序，数值越小，排列越靠前，默认为0。

• flex-grow：放大比例，默认为0，指定元素分到的剩余空间的比例。

• flex-shrink：缩小比例，默认为1，指定元素分到的缩减空间的比例。

• flex-basis：分配多余空间之前，项目占据的主轴空间，默认值为auto

• flex：grow, shrink 和 basis的简写，默认值为0 1 auto

• align-self：单个项目不一样的对齐方式，默认值为auto，auto | flex-start | flex-end | center | baseline | stretch;

• 参考：Flex 布局教程：语法篇 \- 阮一峰[6]

9. CSS动画

1. transition过渡 将变化按照设置的时间长度缓慢执行完毕，而不是立即执行。

delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。

transition的值是简写，扩展开依次是：

transition-property：过渡属性

transition-duration：过渡时间长度

transition-delay：延迟几秒执行

transition-timing-function

• linear：匀速

• ease-in：加速

• ease-out：减速

• cubic-bezier函数：自定义速度模式，最后那个cubic-bezier，可以使用工具网站[7]来定制。

/* 变化在1s过渡 */

transition: 1s;

/* 指定过渡属性 */

transition: 1s height;

/* 指定多个属性同时发生过渡 */

transition: 1s height, 1s width;

/* 指定delay延时时间 */

transition: 1s height, 1s 1s width;

/* 指定状态变化速度 */

transition: 1s height ease;

/* 指定自定义移状态变化速度 */

transition: 1s height cubic-bezier(.83,.97,.05,1.44);

transition的局限 transition的优点在于简单易用，但是它有几个很大的局限。

1. transition需要事件触发，所以没法在网页加载时自动发生。

2. transition是一次性的，不能重复发生，除非一再触发。

3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

4. 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

• Transition 强调过渡，Transition ＋ Transform ＝ 两个关键帧的Animation

• Animation 强调流程与控制，Duration ＋ TransformLib ＋ Control ＝ 多个关键帧的Animation

2. animation动画

.element:hover {

animation: 1s rainbow;

/*

animation: 1s rainbow infinite; 关键字infinite让动画无限次播放

animation: 1s rainbow 3; 指定动画播放次数

*/

}

@keyframes rainbow {

0% { background: #c00; }

50% { background: orange; }

100% { background: yellowgreen; }

}

其中animation的值是简写，扩展开依次是：

1. animation-name: 指定一个 @keyframes 的名称，动画将要使用这个@keyframes定义。

2. animation-duration: 整个动画需要的时长。

3. animation-timing-function: 动画进行中的时速控制，比如 ease 或 linear.

4. animation-delay: 动画延迟时间。

5. animation-direction: 动画重复执行时运动的方向。

6. animation-iteration-count: 动画循环执行的次数。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算

时速控制，比如 ease 或 linear.

4. animation-delay: 动画延迟时间。

5. animation-direction: 动画重复执行时运动的方向。

6. animation-iteration-count: 动画循环执行的次数。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-AVsQ7ixK-1712287369920)]
[外链图片转存中…(img-QxgqZ9FN-1712287369920)]
[外链图片转存中…(img-oueSJjRY-1712287369921)]
[外链图片转存中…(img-NFxOfvdL-1712287369921)]
[外链图片转存中…(img-AFcP06qt-1712287369921)]
[外链图片转存中…(img-ZtPadU1k-1712287369922)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-gfKJlCS3-1712287369922)]

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算