HTML

link和@import有什么区别？

link是HTML标签，@import是css提供的
link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载
link没有兼容性问题，@import不兼容ie5以下
link可以通过js操作DOM动态引入样式表改变样式，而@import不可以

块元素，内联元素，内联块元素

块元素：
- 常用的块元素：ul、li、div、p、dl、dt、dd、h1~h6
- 块元素支持所有的样式
- 盒子独占据一行，即使设置了宽度
- 如果没有设置宽度，默认宽度为父元素的100%
内联元素：
- 常用的内联元素：span、a、em、i、b、strong。
- 只支持部分样式，比如说，不支持宽、高、margin上下、padding上下。
- 盒子并在一行。
- 宽高由内容挣开。
- 如果代码换行，盒子之间会产生间距。(解决：将这个内联元素的父元素的font-size值设为0，内联元素自身再设置font-size。)
- 子元素是内联元素的话，可以通过设置这个子元素的父元素的text-align属性来设置水平对齐方式。
内联块元素：
- 支持所有的样式。
- 盒子并在一行。
- 代码换行，盒子会产生间距。
- 子元素是内联元素的话，可以通过设置这个子元素的父元素的 text-align 属性来设置水平对齐方式。
从某种程度上可以说内联块元素结合了块元素和内联元素的优点，虽然现有元素没有归于此类别的，但是可以通过 display 属性来实现块元素、内联元素、内敛块元素的相互转化。

H5优化

前端H5性能优化（超详细）

CSS

（前端面试）CSS

JS

（前端面试）JavaScript

ES6

（前端面试）ES6

vue

（前端面试）100题拿下 Vue

手写题

手写防抖

手写节流

冒泡排序

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle.

核心概念:入口(entry)、输出(output)、加载(loader)、插件(plugins)、模式(mode)

参考自：www.jianshu.com/p/a2c646416…

算法

其它

url输入到渲染全过程

SEO

响应式页面解决方案

node 代理转发

跨域的原因和解决方案

从输入 URL 到浏览器渲染发生了什么

进程和线程

ES6 和 CommonJS区别

localStorage、sessionStorage、cookie

localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。简言之，cookie是服务器端发给客户端的文本文件；目的是用于辨别用户身份。

前端性能优化

Google 在今年五月提出了网站用户体验的三大核心指标，分别为：

LCP
FID
CLS LCP 代表了页面的速度指标，虽然还存在其他的一些体现速度的指标，但是上文也说过 LCP 能体现的东西更多一些。一是指标实时更新，数据更精确，二是代表着页面最大元素的渲染时间，通常来说页面中最大元素的快速载入能让用户感觉性能还挺好。

FID 代表了页面的交互体验指标，毕竟没有一个用户希望触发交互以后页面的反馈很迟缓，交互响应的快会让用户觉得网页挺流畅。

CLS 代表了页面的稳定指标，尤其在手机上这个指标更为重要。因为手机屏幕挺小，CLS 值一大的话会让用户觉得页面体验做的很差。

通过安装 Lighthouse 插件来获取指标。

资源优化

该项措施可以帮助我们优化 FP、FCP、LCP 指标。

压缩文件、使用 Tree-shaking 删除无用代码
服务端配置 Gzip 进一步再压缩文件体积
资源按需加载
通过 Chrome DevTools 分析首屏不需要使用的 CSS 文件，以此来精简 CSS
内联关键的 CSS 代码
使用 CDN 加载资源及 dns-prefetch 预解析 DNS 的 IP 地址
对资源使用 preconnect，以便预先进行 IP 解析、TCP 握手、TLS 握手
缓存文件，对首屏数据做离线缓存
图片优化，包括：用 CSS 代替蹄片、裁剪适配屏幕的图片大小、小图使用 base64 或者 PNG 格式、支持 WebP 就尽量使用 WebP、渐进式加载图片

网络优化

该项措施可以帮助我们优化 FP、FCP、LCP 指标。

这块内容大多可以让后端或者运维帮你去配置，升级至最新的网络协议通常能让你网站加载的更快。

比如说使用 HTTP2.0 协议、TLS 1.3 协议或者直接拥抱 QUIC 协议~

优化耗时任务

该项措施可以帮助我们优化 TTI、FID、TBT 指标。

使用 Web Worker 将耗时任务丢到子线程中，这样能让主线程在不卡顿的情况下处理 JS 任务
调度任务 + 时间切片，这块技术在 React 16 中有使用到。简单来说就是给不同的任务分配优先级，然后将一段长任务切片，这样能尽量保证任务只在浏览器的空闲时间中执行而不卡顿主线程

不要动态插入内容

该项措施可以帮助我们优化 CLS 指标。

使用骨架屏给用户一个预期的内容框架，突兀的显示内容体验不会很好
图片切勿不设置长宽，而是使用占位图给用户一个图片位置的预期
不要在现有的内容中间插入内容，起码给出一个预留位置

本块内容来自恺哥的公众号文章

axios 为什么请求两次

两次请求的原因

浏览器发现请求跨域的时候，就会使用CORS通信，自动添加一些附加的头信息，简单请求只会有一次请求，只有非简单请求会附加一次请求。浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求和非简单请求

只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：

HEAD

GET

POST

（2）HTTP的头信息不超出以下几种字段：

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

解决方式

在main.js中，设置axios的默认请求头axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
使用this.$qs.stringify(postData)转换传参的数据格式。

webpack 的基础配置

入口entry：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
输出output：在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为 ./dist。
loader：处理那些非 JavaScript 文件（webpack自身只理解 JavaScript）
插件(plugins)：用于执行范围更广的任务

常见的浏览器内核

Blink 谷歌
Trident IE
Gcko 火狐
Webkit 苹果

get 和 post 的区别

get 是获取数据的，而 post 是提交数据的。

注：HTTP请求，最初设定了八种方法。这八种方法本质上没有任何区别。只是让请求，更加有语义而已。
- OPTIONS 返回服务器所支持的请求方法
- GET 向服务器获取指定资源
- HEAD 与GET一致，只不过响应体不返回，只返回响应头
- POST 向服务器提交数据，数据放在请求体里
- PUT 与POST相似，只是具有幂等特性，一般用于更新
- DELETE 删除服务器指定资源
- TRACE 回显服务器端收到的请求，测试的时候会用到这个
- CONNECT 预留，暂无使用
GET 用于获取信息，是无副作用的，是幂等的，且可缓存，而POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存

forEach、for in、for of 的区别

foreach 方法没办法使用 break 语句跳出循环，或者使用return从函数体内返回

for-in循环实际是为循环”enumerable“对象而设计的


let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
    console.log(o)    //遍历的实际上是对象的属性名称 a,b,c,d
    console.log(obj[o])  //这个才是属性对应的值1，2，3，4
}

forEach更多的用来遍历数组
for in 一般常用来遍历对象或json
for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
for in循环出的是key，for of循环出的是value 参考

列出几项 css3 的特性

新增了一些选择器
新增了三个边框属性：border-radius、box-shadow、border-image
box-shadow
background-clip
文字：word-wrap、text-overflow、text-shadow、text-decoration
transition：CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
transform
- transform: translate(120px, 50%)：位移
- transform: scale(2, 0.5)：缩放
- transform: rotate(0.5turn)：旋转
- transform: skew(30deg, 20deg)：倾斜
animation 动画
渐变：linear-gradient：线性渐变，radial-gradient：径向渐变

列出几项 ES6 特性

箭头操作符
增强的对象字面量
字符串模板
let const
for of
promise
变量的解构赋值

什么是回调地狱？解决方法？

一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套

解决回调地狱有很多方法，比如：Promise 对象、Generator 函数、async 函数

vue-loader

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：

vue 和 react 的区别

共同点

数据驱动视图
组件化
都使用 Virtual DOM

不同点

1. 核心思想不同

vue的主要特点：灵活易用的渐进式框架，进行数据拦截/代理，它对侦测数据的变化更敏感、更精确
React推崇函数式编程（纯组件），数据不可变以及单向数据流

2. 组件写法差异

React推荐的做法是把 HTML 和 CSS 全都写进 JavaScript 中
Vue 推荐的做法是 template 的单文件组件格式

3. diff算法不同

4. 响应式原理不同

Vue 递归监听data的所有属性,直接修改
Vue 当数据改变时，自动找到引用组件重新渲染
React基于状态机，手动优化，数据不可变
React当数据改变时，以组件为根目录，默认全部重新渲染

vuex 中 action 和 mutation 的区别

const store = new Vuex.Store({
　　state: {
　　　　count: 0
　　},
　　mutations: {
　　　　increment (state) {
　　　　　　state.count++
　　　　}
　　},
　　actions: {
　　　　increment (context) {
　　　　　　context.commit('increment')
　　　　}
　　}
})

1. 流程顺序

“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。

2. 角色定位

基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。

3. 限制

角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。

前端兼容性问题

部分内容引用自 juejin.cn/post/694786…

前端面试宝典