前端面试八股-06-11

不爱编程的孙

已于 2024-06-12 10:12:42 修改

阅读量1.9k

点赞数 28

文章标签：前端

于 2024-06-11 23:15:02 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58344319/article/details/139607383

版权

1、CSS垂直水平居中方法

下面的方法中，“子”代表元素自身

标准盒子—水平居中

margin: 0 auto //水平居中

定位—垂直水平居中

父：position: relative;

子：position：absolute；

        top：0；

        right：0；

        bottom：0；

        left：0；

        margin：auto

表格—垂直水平

父：display：table-cell；

vertical-align:middle； //垂直

子：margin：0 auto； //水平

弹性盒子—垂直水平

方法一：

父：display: flex;
justify-content: center; //水平
align-items: center; //垂直

方法二：

父：display: flex;

子：margin: auto;

文字在div里—垂直水平

子：line-height: xxx; //xxx为盒子的高度垂直

text-align：center //水平

定位+变形

子：position: absolute;

   left: 50%;

   top: 50%;

   transform: translateX(-50%) translateY(-50%);

或者

子：position: absolute;

   left: 50%;

   top: 50%;

   margin-top: -50px;
       margin-left: -50px;

网格—垂直水平

父：display: grid;
justify-items: center;
align-items: center;

2、微任务和宏任务（先宏后微）

js属于单线程，也就是说对于一段js代码片段，只会顺序依次执行，都是同步执行的。而实际使用过程中有些任务执行时间长，有些任务执行时间短，这会导致页面加载时间过长并且出现空白页面的现象，非常影响用户体验。为了解决这个问题产生了宏任务和微任务。

宏任务包含：script(整体代码块)、setTimeOut、setInterval、setImmediate、I/O、UI rendering
微任务包含：promise、Object.observe、MutationObserver

执行顺序看这篇博文，感觉很清晰（虽然我绕晕了但是不妨碍代码示例本身讲的是明白的）

js宏任务和微任务（异步和同步执行的顺序）探究_宏任务与微任务执行顺序详情图-优快云博客

3、js闭包

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境（长期占用内存）。（来自菜鸟）
普通闭包：普通function；严格闭包：函数1内写函数2，然后return函数2（自己理解）
闭包是将函数内部和函数外部连接起来的桥梁。
使得外部函数可以读取局部变量（比如将内部函数作为返回值来实现）。
闭包就是能够读取其他函数内部变量的函数。
闭包的作用：①读取函数内部的变量；②让变量适中保持在内存中
参考下面这个博文，感觉讲的很好：

学习Javascript闭包（Closure） - 阮一峰的网络日志

4、get和post的区别

get：

url参数可见（长度限制2048字符）；

通过拼接url传递参数；

get请求可以缓存；

请求页面后退时，不产生影响；

产生一个TCP数据包（浏览器把header和data一起发，服务器相应200）

post：

url参数不可见（长度无限制）；

通过body体传递参数；

post请求不可缓存；；

请求页面后退时，重新提交请求；

产生两个TCP数据包（浏览器先发header 服务器响应100 浏览器再发data 服务器响应200）

注意：

网络好：一次包和两次包时间差别可无视；

网络差：两次包更好；

Firefox中POST只发一次包。

5、http响应状态码

1xx（信息性状态码）：请求继续，请求正在处理，一般看不到，比如上面的100

2xx（成功状态码）：请求成功

200：请求成功

204：服务端成功处理了请求，但返回信息为空

3xx（重定向状态码）：重定向，表示需要进一步操作才能完成请求

301：请求资源已经永久转移至新的url，返回信息包括新的URI，浏览器自动定向到新URI

302：临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

4xx（客户端错误状态码）：表示请求包含语法错误或无法完成

400：客户端请求语法错误，服务器不理解

401：请求页面需要用户名和密码

403：服务器拒绝客户端请求

404：服务器找不到请求的网页

405：客户端请求中的方法被禁止

5xx（服务器错误状态码）：服务器在处理请求的过程中发生了错误

500：服务器内部错误，无法完成请求

501：服务器不支持请求的功能，无法完成请求

503：由于超载或系统维护，服务器暂时的无法处理客户端的请求

505：服务器不支持请求的HTTP协议的版本，无法完成处理

当然：

程序员最想看到的：200-OK。

程序员不想看到的：500-Internal-Server-Error。

用户不想看到的：401-Unauthorized、403-Forbidden、408-Request-Time-out、404-not-found。

6、前端存储方式（常用）

前端性能优化(三)——浏览器九大缓存方法_前端缓存技术有哪些-优快云博客

①Cookies

cookie一般通过http请求头发送到服务器
数据可以设置有效期，超出有效期自动清除（删除时将有效期设为过去的时间）
存储数据大小4K以内
只能存储字符串类型
十大属性（见上一篇）
常用操作
- setMaxAge - 设置cookie的有效期，时间单位是秒，负值时表示关闭浏览器后就失效，默认值为-1。
- setDomain - 用于指定，只有请求指定域名才会带上该cookie。
- setPath - 只有访问该域名下的cookieDemo的这个路径地址才会带cookie。
- setValue - 重置 value 。

②localStorage

数据可以长久保存，直到手动删除，不受浏览器窗口关闭影响
存储数据大小5M以内
存储数据不会发送到服务器
常用API：
- localStorage.setItem(key,value) // 保存数据
- localStorage.getItem(key) // 获取数据
- localStorage.removeItem(key) // 删除单个数据
- localStorage.clear() // 删除全部

③sessionStorage

数据在浏览器窗口关闭后清除
存储数据大小5M以内
存储数据不会发送到服务器
常用API：
- sessionStorage.setItem(key,value) // 保存数据
- sessionStorage.getItem(key) // 获取数据
- sessionStorage.removeItem(key) // 删除单个数据
- sessionStorage.clear() // 删除全部

④IndexedDB

存储大量结构化数据
支持索引进行高效查询

⑤Cache Storage（缓存）

CacheStorage 浏览器缓存-优快云博客

可以将文件（例如脚本、样式表和图像）缓存到浏览器中，并在用户离线时提供离线体验
必须在Service Worker 脚本中使用（因为需要在后台运行）
常见方法：
- cache.put（request或url、response）：添加任意缓存
- cache.add（request或url）：添加缓存
- cache.addAll（requests[]或url[]）：批量添加缓存
- cache.keys(request或url、options）：返回所有的key

7、解决跨域问题

前端跨域问题解决_前端跨域报错-优快云博客

跨域：当一个请求的url的协议、域名、端口号三者之间任意一个与页面当前的url不同即为跨域。

常见跨域场景：

解决方式（个人经验非官方）：

在根目录的vue.config.js文件中配置代理：

module.exports = {
    devServer: {
        proxy: {
            'api':{
                target:'http://localhost:8081',  //配置target：后台提供的接口地址
                changeOrigin:true,  // true 允许跨域
                pathRewrite:{
                    '^/api':''  //重写路径，如果后台提供的接口本身就带有api，则无需执行重写路径这个步骤
                }
            },
        }
    }
}

8、JS垃圾回收机制

JavaScript垃圾回收机制_js垃圾回收机制-优快云博客

垃圾：没有被引用的对象或变量；无法访问到的对象

垃圾回收机制：执行环境负责管理代码执行过程中使用的内存。JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，没有被释放，导致该内存无法被使用，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。

垃圾回收方式：标记清除（常用）、引用计数

标记清除：当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

引用计数：跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时，则说明没有办法再访问这个值了，被视为准备回收的对象，每当过一段时间开始垃圾回收的时候，就把被引用数为0的变量回收。引用计数方法可能导致循环引用，类似死锁，导致内存泄露。

function f1(){
    var a ={}//a的引用次数0
    var b=a//a的引用次数1
    var c=a //a的引用次数2
    var b={}//a的引用次数1
    var c=[]//a的引用次数0
}