前端面试宝典

简介: 前端面试宝典

题目一


1:javasprite 的深浅拷贝,可以用代码简述一下区别吗?

2:你会采用什么方式来优化项目?


考点


1:Javasprite的深浅拷贝


答案


浅拷贝:Object.assign

深拷贝:可以通过 JSON.parse(JSON.stringify(object)) 来解决


let a = {
 age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1


一般情况下,浅拷贝可以解决大部分问题,但是如果当浅拷贝只解决了第一层的问题,但是接下来的值还是有对象的话,浅拷贝就不能运行出正确结果,这时候就需要深拷贝来解决问题。深拷贝可以运用JSON.parse(JSON.stringify(object)) 来实现


let a = {
    age: 1,
    jobs: {
        first: 'FE'
    }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE


但是深拷贝还是有一定的局限性的,比如:不能序列化函数,会忽略undefined,不能解决循环引用对象。


题目二


js的性能优化


考点


影响javasprite性能的因素


答案


影响js的性能的因素主要有:代码松散、缺乏组织,事件处理性质量差,依赖过多,迭代时间长。


我们可以从一下方面提高js的性能,进行优化:


减少 HTTP 请求数

减少 DNS 查询

使用 CDN

避免重定向

图片懒加载

减少 DOM 元素数量

减少 DOM 操作

使用外部 JavaScript 和 CSS

压缩 JavaScript、CSS、字体、图片等

优化 CSS Sprite

使用 iconfont多域名分发划分内容到不同域名

尽量减少 iframe 使用避免图片 src 为空

把样式表放在 link 中

把 JavaScript 放在页面底部


扩展


浅拷贝:如果原型对象的成员变量是值类型,将复制一份给克隆对象,也就是说在堆中拥有独立的空间;如果原型对象的成员变量是引用类型,则将引用对象的地址复制一份给克隆对象,也就是说原型对象和克隆对象的成员变量指向相同的内存地址。换句话说,在浅克隆中,当对象被复制时只复制它本身和其中包含的值类型的成员变量,而引用类型的成员对象并没有复制。


深拷贝:是一种完全拷贝,无论是值类型还是引用类型都会完完全全的拷贝一份,在内存中生成一个新的对象,简单点说就是拷贝对象和被拷贝对象没有任何关系,互不影响。

相关文章
|
4月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
3月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
4月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
4月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
58 2
|
4月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
45 0
|
4月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
4月前
|
存储 JavaScript 前端开发
|
4月前
|
Web App开发 存储 缓存