前端面试必备：单位转换与适配技巧详解

版权申诉

21 浏览量更新于2024-06-16 收藏 528KB PDF 举报

在前端面试中，面试官通常会考察候选人的基础知识和技术理解深度。以下是几个关键的Web知识点，这些内容可能会出现在前端面试中： 1. **CSS单位选择**: - `rem`, `em`, `vw`, `vh` 是CSS中的相对单位。`rem` 是相对于根元素（通常是`<html>`）的字体大小计算，适合全局统一；`em` 则依赖于自身的字体大小或者父元素的字体大小；`vw` 和 `vh` 分别表示视口宽度和高度的百分比，视口是指浏览器窗口可见部分，不包含滚动条。百分比则基于父元素的尺寸。 2. **设计稿与单位转换**: - 当处理设计稿时，如iPhone 6/7/8的750设计图（实际尺寸375px * 667px），开发者需要了解不同设备的物理像素与CSS像素的比例（如2倍图）。例如，20px在2倍图中转换为`rem`时，需要考虑默认字体大小16px以及`1rem = 16px`的关系，计算出`1.25rem`。 3. **移动应用适配**: - 原生应用（iOS/Android）会根据设备特性自动适配，而Web应用可通过`meta`标签设置`width=device-width`和`initial-scale=1.0`来限制缩放。媒体查询和响应式设计用于根据设备屏幕尺寸调整布局，但可能增加维护复杂性。使用像`flexible.js`这样的库可以简化移动端适配，它基于视口和设备像素比调整布局。 4. **BFC (块级格式化上下文)**: - BFC是布局中的一个重要概念，它定义了元素之间的隔离，使它们独立于其他元素布局。BFC的触发条件包括根元素、浮动元素、`position`值为`absolute`或`fixed`、某些`display`属性（如`inline-block`, `table-*`, `flex`, `inline-flex`）以及`overflow`属性非`visible`。BFC规则包括内部元素独立布局，不受外部干扰，以及清除浮动的影响。掌握这些知识点对于前端开发者来说至关重要，它们不仅关乎代码实现，还关系到性能优化和跨平台兼容性。在面试中展示对这些概念的理解和实践经验，能够体现应聘者的专业技能和准备程度。

JavaScript 面试题

1、解释一下什么是闭包 ?

闭包：就是能够读取外层函数内部变量的函数。

闭包需要满足三个条件：

1.访问所在作用域；2.函数嵌套；3.在所在作用域外被调用。

优点:可以重复使用变量，并且不会造成变量污染。

缺点:会引起内存泄漏

使用闭包的注意点：

1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在 IE

中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果把父函数当作对象（object）使用，把闭包当作它的公用方法

（Public Method），把内部变量当作它的私有属性（ private value），这时一定要小心，不要随便改变父函数内部变量的值。

2、解释一下原型和原型链 ?

原型:就是一个为对象实例定义了一些公共属性和公共方法的对象模板。

原型链：对象之间的继承关系通过构造函数的 prototype 指向父类对象，直到指向 Object 对象为止形成的指向链条。

通俗讲：原型链是原型对象创建过程的历史记录。

注：在 javascript 中，所有的对象都拥有一个__proto__属性指向该对象的原型（prototype) 。

3、说一下 ES6 中你熟悉的一些内容 ?

1.class 类的继承 ES6 中不再像 ES5 一样使用原型链实现继承，而是引入 Class 这个概念

2.async、await 使用 async/await, 搭配 promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读

性 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

3.Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

4.Symbol 是一种基本类型。Symbol 通过调用 symbol 函数产生，它接收一个可选的名字参数，该函数返回的 symbol 是唯一的

5.Proxy 代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

6.Set 是类似于数组的数据集合，无序，插入删除速度快，元素不重复，查找速度快。

7.Map 是类似对象数据结构，和对象不同在于它的 key 是任意类型，但对象只用 string 和 symbol 类型，Map 存储关联性更强

8.生成器函数可以进行阻断函数执行的过程，通过传参可以传入新的值进入函数继续执行，可以用于将异步变为阻塞式同步

5、什么是事件轮询(EventLoop) ?

一个用来等待和发送消息和事件的程序结构。

1、所有任务都在主线程上执行，形成一个执行栈。

2、主线程发现有异步任务，如果是微任务就把他放到微任务的消息队列里，如果是宏任务就把他放到宏任务的消息队列里。

3、执行栈所有同步任务执行完毕。

4、执行微任务队列，之后再执行宏任务队列。

5、轮询第 4 步。

6、数组的一些 API, 哪些能够改变原数组, 那些不能 ?

改变原数组的方法：shift() unshift() pop() push() reverse() sort() splice()

不改变原数组的方法：concat() every() filter() forEach() indexOf() join() lastIndexOf() map() some() every()

slice() reduce() reduceRight() flat() flatMap() find()

7、for 循环与 forEach 的区别 ?

1.for 循环可以使用 break 跳出循环，但 forEach 不能。

2.for 循环可以控制循环起点（i 初始化的数字决定循环的起点），forEach 只能默认从索引 0 开始。

3.for 循环过程中支持修改索引（修改 i），但 forEach 做不到（底层控制 index 自增，无法左右它）。

8、深浅拷贝 ?

深拷贝：

浅拷贝：

1、Object.assign(目标对象，源对象)

2、var obj1={} for(var key in obj){ obj1[key]=obj[key]}

3、obj1={...obj};

9、url 的组成 ?

http:/https: 协议 www.baidu.com 域名 :8080 端口 /sf/vsearch 路径 ?wd=百度热搜查询(可有可无) #a=1&b=2 哈希值

10、常见的跨域方式 ?

JSONP：是利用外链脚本，没有跨源限制的特点，来实现跨源请求的一种技术。

CORS：跨域资源共享，是一种实现跨源请求数据的技术。这就是跨源问题的解决方案之一。也是广泛的解决方案。

11、Promise 的使用场景 ?

场景 1：获取文件信息。

场景 2：配合 AJAX 获取信息

场景 3：解决回调地狱，实现串行任务队列。

场景 4: node 中进行本地操作的异步过程

12、let, const, var 的区别 ?

声明方式

变量提升

暂时性死区

重复声明

初始值

作用域

var

允许

不存在

允许

不需要

非块级

let

不允许

存在

不允许

不需要

块级

const

不允许

存在

不允许

需要

块级

13、对 this 的理解, 三种改变 this 的方式 ?

1.任何情况下直接在 script 中写入的 this 都是 window。

2.函数中的 this 非严格模式：this 指向 window，严格模式时：this 指向 undefined。

3.箭头函数的 this this 都指向箭头函数外上下文环境的 this 指向

4.对象中 this

对象属性的 this 指向对象外上下文环境的 this

对象方法(普通函数)中的 this，指向当前对象(谁执行该方法，this 就指向谁)

5.回调函数的 this 指向

剩余29页未读，继续阅读

小沈曰

粉丝: 660
资源: 61

前端面试必备：单位转换与适配技巧详解

Web前端面试题集锦与面试技巧

2021前端面试必备用题大全

全面覆盖Java技术栈的面试题集锦

程序员5个刷题网站-web-frontend-interview-questions:Web前端面试题集合

2021 年9 月整理：互联网技术岗--笔试面试题集合.zip

前端面试题集合

前端面试题大集合

.net/java/人力 -- 面试题

Python-前端笔试面试简答题汇总

web前端面试题总结

最新资源