admin管理员组文章数量:1606140
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宏任务和微任务(异步和同步执行的顺序)探究_宏任务与微任务执行顺序详情图-CSDN博客
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、前端存储方式(常用)
前端性能优化(三)——浏览器九大缓存方法_前端缓存技术有哪些-CSDN博客
①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 浏览器缓存-CSDN博客
- 可以将文件(例如脚本、样式表和图像)缓存到浏览器中,并在用户离线时提供离线体验
- 必须在Service Worker 脚本中使用(因为需要在后台运行)
- 常见方法:
- cache.put(request或url、response):添加任意缓存
- cache.add(request或url):添加缓存
- cache.addAll(requests[]或url[]):批量添加缓存
- cache.keys(request或url、options):返回所有的key
7、解决跨域问题
前端跨域问题解决_前端跨域报错-CSDN博客
跨域:当一个请求的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垃圾回收机制-CSDN博客
垃圾:没有被引用的对象或变量;无法访问到的对象
垃圾回收机制:执行环境负责管理代码执行过程中使用的内存。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
}
本文标签:
版权声明:本文标题:前端面试八股-06-11 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1728493999a1160697.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论