33道面向初中级前端的基础面试题(持续更新中），web开发入门经典

最新推荐文章于 2024-04-12 02:18:10 发布

2401_84091468

最新推荐文章于 2024-04-12 02:18:10 发布

阅读量453

点赞数 4

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84091468/article/details/137308790

版权

程序员专栏收录该内容

296 篇文章 1 订阅

订阅专栏

const result2 = await sum(3, 4, 9, 2, 5, 3, 2, 1, 7);

const result3 = await sum(1, 6, 0, 5);

console.log([result1, result2, result3]); // [25, 36, 12]

})();

要求 sum 能在最短的时间里返回以上结果

实现

function asyncAdd(a, b, cb) {

setTimeout(() => {

cb(null, a + b);

}, Math.floor(Math.random()*100))

}

function sum(…args) {

const result = []

function _sum(resolve, reject) {

new Promise((r, j) => {

let a = args.pop()

let b = args.pop()

a = a !== undefined? a : 0

b = b !== undefined? b : 0 // 如果访问的元素超出了数组范围，则转为 0

asyncAdd(a, b, (err, res) => {

if (err) j(err)

r(res)

})

if (args.length) {

_sum(resolve, reject)

}

})

.then(val => {

result.push(val)

setTimeout(() => {

if (args.length <= 0) {

resolve(sum(…result))

}

}, 100)

})

}

return new Promise((resolve, reject) => {

if (!args || !args.length) resolve(0)

if (args.length == 1) resolve(args[0])

_sum(resolve, reject)

})

}

(async () => {

const result1 = await sum(1, 4, 6, 9, 1, 4)

const result2 = await sum(3, 4, 9, 2, 5, 3, 2, 1, 7)

const result3 = await sum(1, 6, 0, 5)

console.log([result1, result2, result3]) // [25, 36, 12]

})()

13.CommonJS，ES module 是什么，有什么区别？

它们都是一种模块规范，例如 Node 使用的就是 CommonJS 规范。ES module 则是语言标准上的模块规范。

区别：

CommonJS 模块使用 require() 和 module.exports，ES6 模块使用 import和 export。
CommonJS 模块输出的是一个值的浅拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
CommonJS 模块的 require() 是同步加载模块，ES6 模块的 import 命令是异步加载，有一个独立的模块依赖的解析阶段。
ES6 模块之中，顶层的 this 指向 undefined；CommonJS 模块的顶层 this 指向当前模块，
对于循环加载的处理方法不同

第 3 个差异是因为 CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成。

而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

参考资料：

Module 的加载实现

14.preload和prefetch

preload

preload 是 <link> 标签 rel 属性的属性值，同时需要配合 as 属性使用。

as 指定将要预加载的内容的类型，使得浏览器能够：

更精确地优化资源加载优先级。
匹配未来的加载需求，在适当的情况下，重复利用同一资源。
为资源应用正确的内容安全策略。
为资源设置正确的 Accept 请求头。

看一下这个示例：

这种做法将把 <link> 标签塞入一个预加载器中。

这个预加载器在不阻塞页面 onload 事件的情况下，去加载资源。

我们可以通过以下两个示例来作一个对比：

Document

上面这个示例从加载到触发 onload 事件需要大概 1400 ms 的时间。再看一下使用 preload 预加载的时间：

window.onload = () => {

console.timeEnd(‘load’) // load: 10.8818359375ms

}

用 preload 来加载资源，只需要 10 ms 就触发了 onload 事件。

说明同样是下载文件，使用 preload 不会阻塞 onload 事件。

prefetch

prefetch 和 preload 不同，使用 prefetch 属性指定的资源将在浏览器空闲时间下下载。

在资源的请求头如果发现有下面这个属性，就代表它是通过 prefetch 加载的：

purpose: prefetch

另外，空闲时间是如何确定、如何获取的，目前还没有相关 API。

15.preload 和 defer 的区别

preload 和 defer 的相同点是异步下载。那它们的不同点是什么呢？

preload 下载的资源只有在遇到同样的 script 标签时，才会执行对应的脚本。例如下面预加载的 vue.js：

只有在遇到下面的标签时，才会执行加载的 vue.js：

defer 则是异步下载资源，在所有元素解析完成后，触发 DOMContentLoaded 事件前执行。

16.window.onload 和 DOMContentLoaded 的区别

当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。

它与 DOMContentLoaded不同，当纯HTML被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。

17.Object 与 Map 的区别

Object 只能选择字符、数值、符号作为 key，Map 则可以使用任何类型的数据作为 key。
Map 实例会维护键值对的插入顺序，因此可以根据插入顺序执行迭代操作。Chrome Opera 中使用 for-in 语句遍历 Object 属性时会遵循一个规律：它们会先提取所有 key 的 parseFloat 值为非负整数的属性，然后根据数字顺序对属性排序首先遍历出来，然后按照对象定义的顺序遍历余下的所有属性。其它浏览器则完全按照对象定义的顺序遍历属性。

选择 Object 还是 Map

对于多数Web开发任务来说，选择 Object 还是 Map 只是个人偏好问题，影响不大。不过，对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著的差别。

1. 内存占用

Object 和 Map 的工程级实现在不同浏览器间存在明显差异，但存储单个键/值对所占用的内存数量都会随键的数量线性增加。批量添加或删除键/值对则取决于各浏览器对该类型内存分配的工程实现。

不同浏览器的情况不同，但给定固定大小的内存， Map 大约可以比 Object 多存储50%的键/值对。

2. 插入性能

向 Object 和 Map 中插入新键/值对的消耗大致相当，不过插入Map 在所有浏览器中一般会稍微快一点儿。对这两个类型来说，插入速度并不会随着键/值对数量而线性增加。

如果代码涉及大量插入操作，那么显然 Map 的性能更佳。

3. 查找速度

与插入不同，从大型 Object 和 Map 中查找键/值对的性能差异极小，但如果只包含少量键/值对，则 Object 有时候速度更快。在把 Object 当成数组使用的情况下（比如使用连续整数作为属性），浏览器引擎可以进行优化，在内存中使用更高效的布局。

这对 Map 来说是不可能的。对这两个类型而言，查找速度不会随着键/值对数量增加而线性增加。如果代码涉及大量查找操作，那么某些情况下可能选择 Object 更好一些。

4. 删除性能

使用 delete 删除 Object 属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性值设置为 undefined 或 null 。但很多时候，这都是一种讨厌的或不适宜的折中。

而对大多数浏览器引擎来说， Map 的 delete() 操作都比插入和查找更快。如果代码涉及大量删除操作，那么毫无疑问应该选择 Map 。

参考资料：

18.为什么 WeakMap 和 WeakSet 的键只能使用对象？

是为了保证只有通过键对象的引用来取得值。

const m = new WeakMap()

m.set({}, 100) // 由于 {} 没有在其他地方引用，所以在垃圾回收时，这个值也会被回收。

const a = {}

m.set(a, 100) // 如果使用这种方式，则不会被回收。因为 {} 有 a 变量在引用它。

a = null // 将 a 置为空后，m 里的值 100 在垃圾回收时将会被回收。

如果允许原始值，那就没办法区分初始化时使用的字符串字面量和初始化之后使用的一个相等的字符串了。

所以这句话的意思很明确：

const a = {} // 在创建对象时，分配了一块内存，并把这块内存的地址传给 a

m.set(a, 100) // 执行 set 操作时，实际上是将 a 指向的内存地址和 100 关联起来

const a = ‘abc’ // 由于基本数据类型在传递时，传递的是值，而不是引用。

m.set(a, 100) // 所以执行 set 操作时，实际上是将新的 ‘abc’ 和 100 关联起来，而不是原来 a 变量指向的那个。

// 那这样就会有问题，m 里存储的永远是没有被引用的键，随时都会被回收。

参考资料：

JavaScript高级程序设计（第4版）

HTML

19.HTML5语义化

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

好处

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

20.为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？

把<link>放在<head>中

这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

把<script>标签恰好放在</body>之前

脚本在下载和执行期间会阻止 HTML 解析。把<script>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

如果一定要放在 <head> 中，可以让 <script> 标签使用 defer 属性。

21.什么是渐进式渲染（progressive rendering）？

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

一些举例：

图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在这里找到。

22… viewport

Viewport ：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

在移动端浏览器当中，存在着两种视口，一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。举个例子：如果我们的屏幕是320像素 * 480像素的大小（iPhone4），假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。

为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，简易的理解，就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容（将网页等比例缩小）。

Viewport属性值

width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

23.Reflow和Repaint

Reflow

当涉及到DOM节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描绘相应的元素，此过程叫Reflow（回流或重排）。

Repaint

当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为Repaint（重绘）。因此重排必然会引起重绘。

引起Repaint和Reflow的一些操作

调整窗口大小
字体大小
样式表变动
元素内容变化，尤其是输入控件
CSS伪类激活，在用户交互过程中发生
DOM操作，DOM元素增删、修改
width, clientWidth, scrollTop等布局宽高的计算

Repaint和Reflow是不可避免的，只能说对性能的影响减到最小，给出下面几条建议：

避免逐条更改样式。建议集中修改样式，例如操作className。
避免频繁操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后添加到文档里。设置display:none的元素上操作，最后显示出来。
避免频繁读取元素几何属性（例如scrollTop）。绝对定位具有复杂动画的元素。
绝对定位使它脱离文档流，避免引起父元素及后续元素大量的回流

参考资料：

24. img中的alt和元素的title属性作用

img的alt属性

如果无法显示图像，浏览器将显示alt指定的内容

元素title属性

在鼠标移到元素上时显示title的内容

25.href和src区别

href

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

src

src表示引用资源，替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

当浏览器解析到src ，会暂停其他资源的下载和处理（图片不会暂停其他资源下载和处理），直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

参考资料：

前端面试题-url、href、src

25.浏览器的渲染过程

解析HTML生成DOM树。
解析CSS生成CSSOM规则树。
将DOM树与CSSOM规则树合并在一起生成渲染树。
遍历渲染树开始布局，计算每个节点的位置大小信息。
调用 GPU 绘制，合成图层。
将渲染树每个节点绘制到屏幕。

26.为何会出现浏览器兼容问题

同一产品，版本越老 bug 越多
同一产品，版本越新，功能越多
不同产品，不同标准，不同实现方式

处理兼容问题的思路

要不要做

产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事)

2.做到什么程度

让哪些浏览器支持哪些效果

3…如何做

根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
条件注释、CSS Hack、js 能力检测做一些修补
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

参考资料：