文章目录

• 一、html 系列 ⭐⭐⭐⭐⭐
• • • 1、H5新增特性和css3新增特性？
    • 2、什么是HTML5，以及和HTML的区别是什么？
    • 3、说说你对 Dom 树的理解？
    • 4、跨域时怎么处理 cookie？
    • 5、说说你对 SSG 的理解？
    • 6、从输入url，到页面的画面展示的过程？
    • 7、导致页面加载白屏时间长的原因有哪些，怎么进行优化？
    • 8、了解过渐进式jpg吗？
    • 9、前端跨页面通信，你知道哪些方法？
    • 10、src和href的区别？
    • 11、前端跨页面通信，你知道哪些方法？
    • 12、前端跨页面通信，你知道哪些方法？
    • 13、前端跨页面通信，你知道哪些方法？
    • 14、前端跨页面通信，你知道哪些方法？
• 二、css 系列 ⭐⭐⭐⭐⭐
• • • 1、BFC的理解？
    • 2、说说你对盒模型的理解？
    • 3、如何实现元素⽔平垂直居中？
    • 4、CSS如何画⼀个三⻆形？原理是什么？
    • 5、说说em/px/rem/vh/vw区别？
• 三、javaScript 系列 ⭐⭐⭐⭐⭐
• 四、vue 系列 ⭐⭐⭐
• 五、react 系列 ⭐⭐⭐
• 六、webpack 系列 ⭐⭐⭐
• • • 1、webpack的构建流程以及属性？
• 七、uniapp 系列 ⭐⭐
• 七、jquery 系列 ⭐⭐
• • • 1、jquery中 $ .get()提交和$.post()提交有区别吗？
    • 2、
• 八、微信小程序 系列 ⭐⭐
• • • 1、简单描述下微信小程序的相关文件类型？
    • 2、⼩程序怎么跟随事件传值？
    • 3、⼩程序WXSS与CSS 的区别？
    • 4、⼩程序的双向绑定和Vue哪⾥不⼀样?
    • 5、请谈谈小程序的生命周期函数？
    • 6、⼩程序怎么实现下拉刷新？
    • 7、bindtap和catchtap区别？
    • 8、⼩程序有哪些传递数据的⽅法？
    • 9、微信小程序中的路由及其区别？
    • 10、简述一下wx:if和hidden的区别？
    • 11、app.json全局配置⽂件描述
    • 12、如何封装⼩程序请求
    • 13、简述微信小程序的运行机制？
    • 14、⼩程序什么时候会主动销毁？
• 九、网络相关系列 ⭐
• • • 1、tcp为什么三次握手和四次挥手？
    • 2、GET和POST的区别？
• 九、其他 ⭐⭐

一、html 系列 ⭐⭐⭐⭐⭐

1、H5新增特性和css3新增特性？

1. ⾸先 html5 为了更好的实践 web 语义化，增加了 header，footer，
   nav,aside,section 等语义 化标签，

2. 在表单⽅⾯，为了增强表单，为 input 增加了 color，email,data ,range 等类型，还有一些属性，

3. 在存储⽅⾯，提供了 sessionStorage，localStorage,和离线存储，通过这些存储⽅式
   ⽅便数 据在客户端的存储和获取，

4. 在多媒体⽅⾯规定了⾳频和视频元素 audio 和 vedio，另外还 有地理定位，canvas 画
   布，拖放，多线程编程的 web worker 和 websocket协议

1. 新的选择器：引入了多种新的选择器，如属性选择器、伪类选择器、伪元素选择器等，使样式选择更加灵活。
2. CSS3 边框如 border-radius，box-shadow 等;
3. CSS3 背景如 background-size，background-origin 等;
4. CSS3 2D，3D 转换如 transtion,transform 等;
5. CSS3 动画如 animation 等；

2、什么是HTML5，以及和HTML的区别是什么？

区别:

1. 从文档声明类型上看：

2. 从语义结构上看：

3、说说你对 Dom 树的理解？

1. 什么是 DOM？

在渲染引擎中，DOM 有三个层面的作用：

• 从页面的视角来看，DOM 是生成页面的基础数据结构。
• 从 JavaScript 脚本视角来看，DOM 提供给 JavaScript 脚本操作的接口，通过这套接口，JavaScript 可以对 DOM 结构进行访问，从而改变文档的结构、样式和内容。
• 从安全视角来看，DOM 是一道安全防护线，一些不安全的内容在 DOM 解析阶段就被拒之门外了。

简言之，DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。

2. DOM树如何生成？

那么网络进程是如何将数据传给HTML解析器的呢？

从图中我们可以知道，网络进程和渲染进程之间有一个共享数据通道，网络进程加载了多少数据， 就将数据传给HTML解析器进行解析。

HTML解析器接收到数据（字节流）之后，字节流将转化成DOM，过程如下：

有三个阶段：

• 通过分词器将字节流转化为Token。 分词器先将字节流转换为一个个 Token，分为 Tag Token 和文本 Token。
  注意，这里的Token并不是我们之前理解的Token，这里就是一个片段。

• Token解析为DOM节点。

• 将 DOM节点添加到DOM树中。

3. JavaScript影响DOM的生成？

• 内嵌 JavaScript 脚本 比如我们嵌入了一段标签的代码，之前的解析过程都一样，但是解析到script标签时， 渲染引擎判断这是一段脚本，此时 HTML 解析器就会暂停 DOM 的解析， 因为接下来的 JavaScript 可能要修改当前已经生成的 DOM 结构。
  暂停解析之后，JavaScript 引擎介入，并执行标签中的这段脚本。 脚本执行完成之后，HTML 解析器恢复解析过程，继续解析后续的内容，直至生成最终的 DOM。

• 引入 JavaScript 文件 基本上跟之前是一致的，不同点在于，暂停解析之后执行JavaScript 代码，需要先下载这段 JavaScript 代码。

4、跨域时怎么处理 cookie？

1. 普通跨域

我有一个朋友，叫小王。前端小王和后端同事小马准备联调一个登录的api。假设是/login;小王在把登录账号和密码都准备好之后，愉快的发起了post提交。结果很意外，请求的响应被浏览器拦截了，浏览器还贴心的在console上抛出了一个错误。

小王翻译了一下，原来是被CORS策略拦截掉了。这个策略大概意思是说，服务端如果允许不同origin的请求，那就需要在返回的response header里面带上Access-Control-Allow-Origin这个header。否则浏览器在拿到响应并发现响应头里没有这个header时，就会把响应给吞掉，而不会交给js进行下一步处理。

小王把这个事情告诉了小马，然后小马在返回的header中加上了

1Access-Control-Allow-Origin: *

现在小王终于可以拿到返回的结果了。

2. 非简单请求的跨域

后来小王觉得在post中发送表单格式的body太麻烦，希望使用JSON格式的请求体提交。小马觉得就是几行代码的事，就同意了。但是小王改成JSON的消息体之后发现又被CORS拦截了，并抛出了下面的错误：

在上面的报错中，我们看到了 preflight 的单词。那这又是怎么回事呢？原来，修改请求体之后，这个跨域请求不再是简单请求了，需要在发起请求之前先进行 preflight 请求。那么什么是简单请求呢？

• 请求方法包括GET, HEAD, POST
• response header里面不能包含cors安全header以外的header。
• Content-Type 只限于text/plain, multipart/form-data, application/x-www-form-urlencoded

由于json数据的content-type导致这个post请求不再是简单请求，而对于非简单请求，之前允许所有域名跨域访问是被禁止的。所以还是要修改Access-Control-Allow-Origin为特定的请求域名。在开发模式下，可能是http://localhost:3000之类的。

小马在重新修改Access-Control-Allow-Origin，小王又拿到了登录成功的结果。可以联调下一个api了。

3. 带cookie的跨域

登录是基于session的，也就是说，登录成功后，server会通过set-cookie，将cookie设置到浏览器中，这样，下次访问同源下的api时，cookie就会被带上。

然而，奇怪的是，小王发现登录成功后，调用别的接口，cookie并没有被带上，导致server无法识别出用户信息，最终返回错误（状态码为401）。

4. withCredentials

原来，浏览器发起跨域请求的时候，是不会主动带上cookie的，如果一个请求需要cookie，需要开发者设置一个选项，以fetch api为例：

fetch('http://baidu.com:3000', {
    // ...
	credentials: 'include'
})

如果使用xhr api来请求，则需要这样写：

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/credentialed-content/';

function callOtherDomain(){
  if(invocation) {
    invocation.open('GET', url, true);
    invocation.withCredentials = true; // 带上cookie
    invocation.onreadystatechange = handler;
    invocation.send();
  }
}

小王在设置请求之后又发起了一次请求。却发现cookie还是没有带上去。小王只好在MDN继续查看资料，发现在set-cookie时需要带一个sameSite的属性。

5. sameSite

sameSite是为了防止csrf攻击而产生的属性，如果不知道啥是CSRF攻击，可以自己先去查一下。

由于我们需要在请求中带上cookie，所以需要在set-cookie时将cookie的sameSite设置为none；又由于将sameSite设置为none时，也需要将Secure设置上，所以请求需要基于https;

小王最后一次请求小马对api进行了上诉更改，服务器终于认出请求来自谁，并返回了正确的结果，跨域的踩坑之旅算是告一段落。

6. 总结

很多时候，我们可能只会关注请求体是什么，响应有没有正确返回，而忽略了header部分。殊不知，header在缓存，web安全，浏览器正确解析结果中发挥了重要的作用，比如本文中的一系列Access-Control-Allow-*的header。

为了让web更安全，CORS还在不断地更新，比如这个提案，规定从公网到私网，或者从私网访问local network时，需要设置跨域头，Access-Control-Allow-Private-Network。

5、说说你对 SSG 的理解？

具体来说，SSG 的实现方式通常包括以下几个步骤：

1. 在开发阶段，使用模板引擎等技术创建静态页面模板；
2. 将需要展示的数据从后台 API 中获取或者通过其他渠道获取，并将其填充到静态页面模板中，生成完整的 HTML 页面；
3. 使用构建工具（例如 Gatsby、Next.js 等）对静态页面进行构建，生成静态 HTML、CSS 和 JavaScript 文件；
4. 部署生成好的静态文件到服务器或者 CDN 上，以供用户访问。

相比于传统的动态网页，SSG 具有如下优势：

1. 加载速度快：由于不需要每次请求都动态地渲染页面，SSG 可以减少页面加载时间，从而提高用户体验和搜索引擎排名；
2. 安全性高：由于没有后台代码和数据库，SSG 不容易受到 SQL 注入等攻击；
3. 成本低：由于不需要动态服务器等设备，SSG 可以降低网站的运维成本和服务器负担。

6、从输入url，到页面的画面展示的过程？

1. 首先，在浏览器地址栏中输入url

2. 浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3. 在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

4. 浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5. 握手成功后，浏览器向服务器发送http请求，请求数据包。

6. 服务器处理收到的请求，将数据返回至浏览器

7. 浏览器收到HTTP响应

8. 读取页面内容，浏览器渲染，解析html源码

9. 生成Dom树、解析css样式、js交互,渲染显示页面

浏览器安全解析策略对解析HTML造成的影响：

7、导致页面加载白屏时间长的原因有哪些，怎么进行优化？

1. 白屏时间

2. 白屏时间的重要性

3. 白屏-性能优化

因为JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。

8、了解过渐进式jpg吗？

9、前端跨页面通信，你知道哪些方法？

10、src和href的区别？

• src

• href

11、前端跨页面通信，你知道哪些方法？

12、前端跨页面通信，你知道哪些方法？

13、前端跨页面通信，你知道哪些方法？

14、前端跨页面通信，你知道哪些方法？

{ behavior: ‘smooth’ }

二、css 系列 ⭐⭐⭐⭐⭐

1、BFC的理解？

• 内部的盒⼦会在垂直⽅向上⼀个接⼀个的放置
• 对于同⼀个BFC的俩个相邻的盒⼦的margin会发⽣重叠，与⽅向⽆关。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的⾼度时，浮动⼦元素也参与计算
• BFC就是⻚⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然
  BFC⽬的是形成⼀个相对于外界完全独⽴的空间，让内部的⼦元素不会影响到外部的元素

• 根元素，即HTML元素
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden
• display的值为inline-block、inltable-cell、table-caption、table、inlinetable、flex、inline-flex、grid、inline-grid
• position的值为absolute或fixed

• 防⽌margin重叠（塌陷）
• 清除内部浮动
• ⾃适应多栏布局

2、说说你对盒模型的理解？

3、如何实现元素⽔平垂直居中？

1. 定位：
绝对定位 top：50%；left；50%；margin负的自身宽高的一半

2. 定位：
绝对定位 top：50%；left；50%；transform（-50%, -50%）负百分之五十

3. grid⽹格布局
设置父元素为display: grid;使用 grid-auto-columns 和 grid-auto-rows 属性将网格单元格大小设置为 auto ，然后使用 justify-content 和 align-content 属性将格子垂直和水平居中。

2. 定位：
元素绝对定位 上下左右（0）margin：auto；

3. 弹性盒子：
父元素设置flex弹性盒,然后使用justify-content: center,align-items: center居中

4. table布局
设置⽗元素为 display:table-cell ，⼦元素设置 display: inline-block 。利⽤ vertical和 text-align 可以让所有的⾏内块级元素⽔平垂直居中

4、CSS如何画⼀个三⻆形？原理是什么？

5、说说em/px/rem/vh/vw区别？

三、javaScript 系列 ⭐⭐⭐⭐⭐

四、vue 系列 ⭐⭐⭐

五、react 系列 ⭐⭐⭐

六、webpack 系列 ⭐⭐⭐

1、webpack的构建流程以及属性？

1. 构建流程：

Webpack主要分为以下几个步骤：

• 解析配置文件：Webpack会读取用户提供的配置文件，根据配置信息进行后续操作。
• 解析模块依赖：Webpack会解析所有模块之间的依赖关系，并生成依赖关系图。
• 加载模块：Webpack会根据依赖关系图，加载各个模块。
• 转换代码：Webpack可以通过loader来对各个模块进行转换，比如将ES6代码转换为ES5代码。
• 生成代码块：Webpack会根据代码之间的依赖关系，生成一些代码块，每个代码块包含一个或多个模块的代码。
• 输出文件：Webpack会将所有生成的代码块合并成一个或多个输出文件。

2. 属性：

Webpack的一些常见属性如下:

• entry：入口文件的路径，Webpack会从这个文件开始解析所有的依赖关系。
• output：打包生成文件的配置，其中包含文件名、输出路径等信息。
• module：配置各类模块的处理规则，通常使用不同类型的loader实现文件转换。
• resolve：配置Webpack在查找module时的优先级和缺省文件后缀名等信息。
• plugins：配置Webpack使用的插件，插件可以用于完成各种自动化工作，比如压缩文件、合并代码块等。

七、uniapp 系列 ⭐⭐

七、jquery 系列 ⭐⭐

1、jquery中 $ .get()提交和$.post()提交有区别吗？

都是异步请求的方式来获取服务端的数据；

1. 请求方式不同： $ .get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

2. 参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3. 数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4. 安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

2、

八、微信小程序 系列 ⭐⭐

1、简单描述下微信小程序的相关文件类型？

1. WXML可以构建出页面的结构

2. WXSS 是一套样式语言，用于描述 WXML 的组件样式

3. js逻辑处理，网络请求

4. json小程序配置文件

5. app.json作为配置文件入口，整个小程序的全局配置。

6. app.js必须要有这个文件，没有会报错

7. app.wxss全局页面样式设置，在app.wxss中设置的样式可以在小程序的所有页面生效

2、⼩程序怎么跟随事件传值？

3、⼩程序WXSS与CSS 的区别？

4、⼩程序的双向绑定和Vue哪⾥不⼀样?

5、请谈谈小程序的生命周期函数？

6、⼩程序怎么实现下拉刷新？

⽅案 ⼀ ：

⽅案⼆：

7、bindtap和catchtap区别？

相同点：

不同点：

8、⼩程序有哪些传递数据的⽅法？

方案一:使用全局变量

方案二:使用路由

方案三:使用本地存储

9、微信小程序中的路由及其区别？

10、简述一下wx:if和hidden的区别？

11、app.json全局配置⽂件描述

12、如何封装⼩程序请求

总结：

在src目录中新建一个utils （噢 套死）目录，在目录中新建一个request.js,在request.js中首先获取整个小程序的实例来保证能调用wx所有方法，定义get和post等请求的方法，然后在get或者post请求的方法中设置wx.showToast(头斯特)，然后通过wx.request来实现get或者post请求，在success(森克 赛斯)中，关闭loading （楼顶），然后通过回调的形式来返回获取的数据

最后调用的时候使用require来引入

13、简述微信小程序的运行机制？

14、⼩程序什么时候会主动销毁？

九、网络相关系列 ⭐

1、tcp为什么三次握手和四次挥手？

三次握手：

1. 第一次握手：客户端向服务器端发送一个连接请求报文段（SYN）。

2. 第二次握手：服务器收到请求后，向客户端回送一个收到确认报文段（ACK），并发送一个连接请求报文段（SYN）。

3. 第三次握手：客户端接收到收到确认报文段后，向服务器端回送一个收到确认报文段（ACK）。

这样，双方完成了三次握手，

四次挥手：

1. 第一次挥手：客户端向服务器端发送一个关闭连接的请求报文段（FIN）。

2. 第二次挥手：服务器收到请求后，向客户端回送一个确认报文段（ACK）。

3. 第三次挥手：服务器向客户端发送一个关闭连接的请求报文段（FIN）。

4. 第四次挥手：客户端收到请求后，向服务器端回送一个确认报文段（ACK）。

完成四次挥手之后，TCP连接断开。

2、GET和POST的区别？

1.参数位置：
GET请求的参数是在URL中拼接，而POST请求的参数则是在请求体(body)中传递。

2.请求方式：

GET请求是通过URL向服务器请求数据，在URL中通过问号“？”传参。而POST请求是把数据放在HTTP请求体内提交给服务器。

3.请求长度：

GET请求没有请求体，因此请求长度有限制，目前大部分浏览器限制在2048个字符以内；而POST请求没有限制，但是实际情况一般由于服务器的限制而做出调整。

4.安全性：

GET请求会把参数暴露在URL上，容易受到劫持和攻击；而POST请求因为请求体的存在，相对于GET来说更加安全。

5.缓存：

GET请求可以被浏览器缓存，当下次请求相同的URL时，浏览器直接从缓存中取出数据；而POST请求不会被缓存，每次请求都需要重新传输数据。

九、其他 ⭐⭐