文章目录
- 1. CSS有哪些优化方式
- 2. 如何复制变量
- 3. concat的原理是什么
- 4. 如何实现深拷贝
- 5. 判断变量类型的方式
- 6. 如何判断一个数字类型
- 7. 如何判断一个变量是否能转化为数字
- 8. 说一下前端性能优化
- 9. 你做图片懒加载时优化遇到的坑
- 10. 你认为哪三个是可以最大提升性能优化的
- 11. 说一下vue3和vue2的区别
- 12. cookie为什么限制大小为4k
- 13. 前端的请求方式有哪些
- 14. axios ajax fetch的区别及关系
- 15. get post的安全性的区别 (抓包方面安全性的区别)
- 16. HTTPS如何保证数据安全的 (TLS三次握手)
- 17. 前端攻击的类型以及如何防范
- 18. 如何隐藏一个元素
- 19. 隐藏元素几种方式的区别
- 20. vue diff算法的实现原理 patchVnode的原理
- 21. 双向绑定原理
- 22. 说一下盒模型
- 23. IE盒模型能用在其他浏览器中吗
- 24. 为什么项目中不用ts
1. CSS有哪些优化方式
- 合并和压缩css文件
- 使用雪碧图(css sprites)减少http请求次数
- 减少css文件大小,避免不必要的样式
- 避免使用过多的嵌套和复杂选择器
- 使用外部样式表和缓存css文件
2. 如何复制变量
-
复制基本类型变量
//直接复制变量 let json=10 let newJson = json
-
复制引用类型变量
-
复制数组:使用slice和展开运算符
slet originalArray = [1, 2, 3]; let newArray=originalArray.slice() let newArray2=[...originalArray]
-
复制对象:用Object.assign()方法或者展开运算符…来复制对象
let originalObj = { name: 'Alice', age: 30 }; let newObj=Object.assign({},originalObj) let newobj2={...originalObj}
-
深拷贝对象/数组:使用第三方库Lodash的
**_.cloneDeep()**
方法进行深拷贝const _=require('lodash') let originalNestedObj = { name: 'Bob', details: { age: 25 } }; let newobj=_.cloneDeep(originalNestedObj)
-
3. concat的原理是什么
- 将多个数组连接起来,构成一个新数组返回
4. 如何实现深拷贝
function deepCopy(obj)
{
let newobj=null
if( typeof(obj) ==='object' && obj !==null )
{
newobj=Array.isArray(obj) ? [ ]: {}
for(let key of obj)
newobj[key]=deepCopy(obj[key])
}
else
newobj=obj
return newobj
}
let newobj = JSON.Parse(JSON.Stringify(obj))
5. 判断变量类型的方式
- 基本类型 typeof(element)
- 对象 element instanceOf Array
- Object,prototype.toString.call(element).slice(8,-1)
6. 如何判断一个数字类型
- typeof(element)===‘number’
7. 如何判断一个变量是否能转化为数字
- Number.isNaN(Number(element))
(如果为true 则是字符串,false 为数字) - typeof value === ‘number’ && !isNaN(value)
- 单独的isNaN()
// 不好使因为null 空格会被识别为0
8. 说一下前端性能优化
-
减少http请求次数:可以使用雪碧图、图片压缩等方法,减少静态资源的http请求次数。
-
使用浏览器缓存:在合适的情况下,使用浏览器缓存可以显著减少请求时间,提高页面加载速度。
-
使用CDN加速:使用CDN加速可以将静态资源发到多个节点,减少请求延迟,提高页面加载速度。(解释下CDN:CDN是内容分发网络,是一种通过位于全球各地的服务器节点,将网站的静态资源(图片、样式表、脚本文件)缓存到离用户最近的服务器上,并且通过就近访问提高访问速度和性能的技术解决方案,这种项目一般有网站和博客、电子商务平台、移动应用、开源项目框架等)
-
延迟加载组件:对于一些毕竟耗时的组件,开源使用懒加载的方式,等到用户需要使用的时候再加载,避免在页面加载的时一次性请求过多资源导致页面卡顿。
-
使用webpack进行打包和压缩:webpack可以将多个js、css文件打包成一个文件,减少http请求次数,进行代码压缩,减少文件大小,提高页面加载速度。
-
使用Web Workers:对于一些计算密集任务,可以使用Web Workers将任务分发到多个线程中,提高运算效率,避免页面卡顿。(js是单线程的,Web Workers是多线程)
-
优化Js代码:避免使用全局变量,减少DOM操作,减少不必要的循环。
-
使用响应式布局,使页面适应不同大小的屏幕,提高用户体验,避免出现滚动条等不必要的元素。
-
使用css动画
-
使用服务端渲染,减少客户端渲染
9. 你做图片懒加载时优化遇到的坑
10. 你认为哪三个是可以最大提升性能优化的
11. 说一下vue3和vue2的区别
-
双向绑定原理:
- vue2:基于ES5的一个API Object.defineProperty() 对数据进行劫持 结合 发布订阅 模式的方式实现。
- vue3: 使用ES6中的Proxy API 对数据代理。
相比于vue2.x,使用proxy的优势如下
- defineProperty只能监听某个属性,不能对全对象监听
- 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
- 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化。
-
vue3支持碎片(Fragments): 组件可以拥有多个根节点。
-
Vue2使用选择类型API(Options API),Vue3使用组合式API(Composition API)
-
Vue2把数据放入data属性中,vue3就需要使用setup()方法,此方法在组件初始化的时候触发。
- 从vue引入reactive
- 使用reactive()方法声明数据为响应式数据
- 使用setup()方法返回我们的响应式数据
-
生命周期钩子
vue2--------------------vue3 beforeCreated setup() created setup() beforeMount onBeforeMount mounted onMounted beforeUpdate onDeforeUpdate updated onUpdated beforeDestroy onBeforeUnmount destroyed onUnmounted activated onActivated deactivated onDeactivated
-
v-if 和 v-for 优先级不同:vue2 v-for>v-if ; vue3 v-if > v-for
12. cookie为什么限制大小为4k
因为Http cookie的大小限制通常为4kb是由浏览器引起的,这个限制是由于浏览器对于同一域名下的所有cookie总大小有限制,一般是4-8kb之间,这是为了确保请求头不会过大,从而影响网络传输效率和性能。
13. 前端的请求方式有哪些
(1). Fetch API
- get请求
fetch('https://api.example.com/data')
.then(response=>{
if(!response.ok)
throw new Error('请求错误!')
return response.json()
})
.then(data=>
{
console.log(data)
})
.catch(err=>
{
console.log(err)
})
- post请求
fetch('https://api.example.com/postData',{
method:'POST',
headers:{
'Content-type':'application/json'
},
body:JSON.stringify({key:'value'})
})
.then(response=>
{
if(!response.ok)
throw new Error('错误')
return response.json()
})
.then(data=>{
console.log(data)
})
(2) XMLHttpRequest
用于在后台与服务器进行异步通信,它可以在不重新加载整个页面的情况下与服务器交换数据。
let xhr=new XMLHttpRequest()
xhr.open('GET','/users')
xhr.onload=function()
{
}
xhr.send()
(3) axios
axios.get('http...')
.then(res=>{
console.log(res)
})
(4) WebSoket : 双向通信
const socket=new WebSocket('ws://localhost:3000')
socket.onopen=()=>
{
console.log('onopen')
}
socket.onclose=(event)=>
{
console.log(event)
}
socket.onerror=(error)=>
{
console.log(error)
}
socket.onmessage=(message)=>
{
//执行获取到实时信息的回调
console.log(message)
}
最后组件销毁(beforeUnmount)时关闭通信:socket.close()
14. axios ajax fetch的区别及关系
- 相同点
- axios ajax fetch都是用于发起http请求的工具。
- 不同点
- ajax是通过原生的XMLHttpRequest或者库(jquery)实现
- axios是一个基于Promise和HTTP客户端,可以用于浏览器和Node.js环境
- fetch是浏览器提供的新的网络请求接口,它基于Promise,并且提供了一种现代化的方式来发起网络请求。
15. get post的安全性的区别 (抓包方面安全性的区别)
- get和post都是网络请求的方法,post安全性更高
- get请求
- 用来请求数据的,参数附在url中,显示在地址栏以明文的显示参数信息,容易被中间人窃取。
- post 请求
- 一般用来提交数据,参数放在请求体中,不会暴露在地址栏,在请求抓包时,相对于get请求更难获取到明文数据,提升了数据的安全性。
16. HTTPS如何保证数据安全的 (TLS三次握手)
HTTPS是通过使用SSL/TLS协议来保证数据的传输安全,其中TLS握手是建立安全连接的关键过程。TLS握手通常包括三个阶段:
-
客户端Hello:客户端向服务器发送一个随机数、支持的加密算法和其他必要信息,并请求服务器建立安全连接。
-
服务器hello:服务器收到客户端的请求后,回复一个随机数、选择的加密算法和数字证书给客户端。
-
密钥协商和建立安全连接:
-
客户端收到服务器的响应
-
客户端验证服务器的数字证书是否有效,
-
生成一个随机数,利用服务器的公钥加密该随机数,发送给服务器
-
服务器收到随机数,利用自己的私钥解密,拿到随机数。
-
客户端和服务器根据自己拿到的随机数、计算出对话密钥(session key),用于后续的数据加密和解密。
-
通过以上三次握手,TLS实现了以下安全保障:
- 数据加密传输 :客户端和服务器之间的通信经过加密处理,第三方无法直接获取敏感信息。
- 身份认证 :服务器会提供数字证书,客户端可以验证证书的合法性,确保正在通信的是目标服务器,而非中间人攻击。
- 数据完整性 :TLS 使用消息摘要算法(如 HMAC)来确保数据在传输过程中没有被篡改。
17. 前端攻击的类型以及如何防范
18. 如何隐藏一个元素
- display:none;
- visbility:hidden;
- opacity:0;
- height:0;widht:0;
- clip-path: inset(100%);(类似于将元素裁剪至不可见区域)
19. 隐藏元素几种方式的区别
- display:none; 完全从渲染树中移除元素,元素不会被显示,并且不占据页面空间,相当于元素不存在文档流中。
- visbility:hidden;
- opacity:0;
- height:0;widht:0;
- clip-path: inset(100%);
20. vue diff算法的实现原理 patchVnode的原理
vue中的虚拟DOM算法主要是通过比较新旧的虚拟DOM树的节点来找出最小变更,并将这些变更应用直真实DOM中。
patchVnode是用来对比和更新同一节点的,原理步骤如下:
- 比较节点类型:如果新旧节点类型不同,则新节点直接替换旧节点。
- 比较节点内容:比较节点的文本内容或者子节点是否相同,不同则更新。
- 比较节点属性和属性值
- 递归比较子节点
- 处理新增、删除、移动的节点
21. 双向绑定原理
MVVM:Model-View-ViewModel是一种设计思想
Model:代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View:代表的是ui组件,负责将数据模型转化成ui展示出来。
ViewModel是一个同步View和Model的对象
主要职责:
- 数据变化后更新视图
- 视图变化后更新数据
组成:
-
监听器(Observer): 对所有数据的属性进行监听
-
解析器(Compiler): 对每个元素的节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
vue2的双向绑定实现步骤
-
创建vue实例的时候,在data属性中定义需要双向绑定的数据。
-
在模板中用v-model指令将输入控件绑定到数据属性上。在vue内部,使用Object.defineProperty()方法将数据属性转换为getter\setter形式,从而实现数据的响应式变化。
-
当输入控件的值发生变化时,vue会自动调用属性的setter方法,从而更新数据的值。
-
当数据的值发生变化,vue会自动更新相关的Dom元素,从而实现数据与视图的更新。
vue3的双向绑定原理
-
Proxy及Reflect: vue3使用es6中的Proxy对象来代理JavaScipt对象的访问,从而实现对数据的劫持和监听,当数据对象发生变化时,会触发相应的hander,进而更新视图。
-
响应式系统:基于Proxy实现,通过代理对象的get和set操作,在访问和修改数据时触发相应的更新操作。
-
Reactivity API: vue3提供了一系列的Reactivity Api,例如reactive、ref,用于创建响应式对象,这些API在内部利用Proxy进行数据劫持和监听,实现了数据与视图之间的双向绑定。
-
v-medel指令
总体来说,vue3是通过Proxy进行数据劫持和监听机制,结合响应式系统和Reactivity API,实现了 数据与视图的更新。
22. 说一下盒模型
- content
- padding
- border
- margin
- 怪异盒模型:width=content+padding+border
box-sizing:border-box;
23. IE盒模型能用在其他浏览器中吗
- 虽然IE盒模型在较早期的IE浏览器中被广泛使用,但随着现代浏览器对W3C标准的更好支持,大多数现代浏览器都默认采用W3C盒模型。因此,通常情况下在其他现代浏览器中无法直接使用IE盒模型。
24. 为什么项目中不用ts
- 技术栈限制