字节前端面试题

在田野的田田

已于 2024-04-03 10:25:42 修改

阅读量879

点赞数 25

文章标签：前端

于 2024-03-29 16:13:55 首次发布

本文链接：https://blog.csdn.net/qingqing37/article/details/137148965

版权

文章目录

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的优势如下
1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3. 可以监听数组，不用再去单独的对数组做特异性操作 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

技术栈限制

在田野的田田

关注

25
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
字节前端面试题

（解释下CDN：CDN是内容分发网络，是一种通过位于全球各地的服务器节点，将网站的静态资源（图片、样式表、脚本文件）缓存到离用户最近的服务器上，并且通过就近访问提高访问速度和性能的技术解决方案，这种项目一般有网站和博客、电子商务平台、移动应用、开源项目框架等）Proxy及Reflect: vue3使用es6中的Proxy对象来代理JavaScipt对象的访问，从而实现对数据的劫持和监听，当数据对象发生变化时，会触发相应的hander，进而更新视图。（js是单线程的，Web Workers是多线程）
复制链接

扫一扫