2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新7

简介: 2023年最新前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新

30.DOM常见的操作有哪些?

创建节点

createElement 创建新元素,接受一个参数,即要创建元素的标签名

查询节点

querySelector 传入任何有效的css 选择器,即可选中单个 DOM元素(首个) 如果页面上没有指定的元素时,返回 null

querySelectorAll 返回一个包含节点子树内所有与之相匹配的Element节点列表,如果没有相匹配的,则返回一个空节点列表

更新节点

innerHTML 不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树

innerText

style dom对象.style.样式属性 = ‘’

添加节点

innerHTML

appendChild 把一个子节点添加到父节点的最后一个子节点

insertBefore(新dom,指定dom对象) 把子节点插入到指定的位置的前面

setAttribute 在指定元素中添加一个属性节点,如果元素中已有该属性改变属性值

删除节点

removeChild 拿到父节点,要删除的节点dom对象。父.removeChild(子)

31.说说你对BOM的理解,常见的BOM对象你了解哪些?

BOM (Browser Object Model),浏览器对象模型,提供了独立于内容与浏览器窗口进行交互的对象 。


浏览器的全部内容可以看成DOM,整个浏览器可以看成BOM。


BOM对象:


window: Bom的核心对象是window,它表示浏览器的一个实例 。 在浏览器中,window对象有双重角色,即是浏览器窗口的一个接口,又是全局对象

location:获取url地址信息

navigator: 对象主要用来获取浏览器的属性,区分浏览器类型

screen: 保存的纯粹是客户端能力信息,也就是浏览器窗口外面的客户端显示器的信息,比如像素宽度和像素高度

history: 主要用来操作浏览器URL的历史记录,可以通过参数向前,向后,或者向指定URL跳转

32.BOM和DOM区别?

BOM(浏览器对象):与浏览器交互的方法和对象

BOM是浏览器对象模型,它指的是将浏览器当作一个对象来对待,这个对象主要定义了与浏览器进行交互的方法和接口

BOM的核心是window,而window对象具有双重角色,它既是js访问浏览器窗口的一个接口,又是一个全局对象(Global)

这就意味着网页中定义的任何对象、变量和函数,都会作为全局对象的一个属性或者方法存在

DOM(文档对象模型):处理网页内容的方法和接

DOM是文档对象模型,它指的是把文档当作一个对象来对待,这个对象主要定义了处理网页的内容和接口

33.如何解决跨域问题?

了解同源策略: 同源是指"协议+域名+端口"三者相同,它是浏览器最核心也最基本的安全功能如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击


通过jsonp跨域

nginx代理跨域

nodejs中间件跨域

后端在头部信息中设置安全域名

前端代理

34.异步加载js方式?

设置``属性 async="async" (一旦脚本可用,则会异步执行)

动态创建 script DOM:document.createElement('script');

XmlHttpRequest 脚本注入

异步加载库 LABjs

模块加载器 Sea.js

35.哪些操作会导致内存泄漏?

内存泄漏: JavaScript 内存泄露指对象在不需要使用它时仍然存在,导致占用的内存不能使用或回收


未使用 var 声明的全局变量

闭包函数(Closures)

循环引用(两个对象相互引用)

控制台日志(console.log)

移除存在绑定事件的DOM元素(IE)

setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏

垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收

36.XML和JSON的区别?

数据体积:JSON数据体积更小

数据交互:JSON与JavaScript得交互更加方便,更容易被解析,更好的数据传输

传输速度:JSON传输速度快

数据描述:JSON对数据的描述相比XML较差

37.说说你对递归得理解?

递归: 在数学与计算机科学中,是指在函数的定义中使用函数自身的方法


38.说说你对函数式编程的理解?优缺点?纯函数,高阶函数,柯里化

主要的编程范式有三种:命令式编程,声明式编程和函数式编程


函数式编程: 更加强调程序执行的结果而非执行的过程,简单来讲,就是要把过程逻辑写成函数,定义好输入参数,只关心它的输出结果


纯函数: 纯函数是对给定的输入返还相同输出的函数,并且要求你所有的数据都是不可变的,即纯函数=无状态+数据不可变


函数内部传入指定的值,就会返回确定唯一的值

不会造成超出作用域的变化,例如修改全局变量或引用传递的参数

高阶函数: 是以函数作为输入或者输出的函数被称为高阶函数


柯里化: 把一个多参数函数转化成一个嵌套的一元函数的过程


优点:


更好的管理状态

更简单的复用

减少代码量,提高维护性

缺点:


性能:函数式编程相对于指令式编程,性能绝对是一个短板,因为它往往会对一个方法进行过度包装,从而产生上下文切换的性能开销

资源占用:在 JS 中为了实现对象状态的不可变,往往会创建新的对象,因此,它对垃圾回收所产生的压力远远超过其他编程方式

递归陷阱:在函数式编程中,为了实现迭代,通常会采用递归操作

39.Javascript中如何实现函数缓存?函数缓存有哪些应用场景?

函数缓存,就是将函数运算过的结果进行缓存


实现方式: 实现函数缓存主要依靠闭包、柯里化、高阶函数


应用场景:


对于昂贵的函数调用,执行复杂计算的函数

对于具有有限且高度重复输入范围的函数

对于具有重复输入值的递归函数

对于纯函数,即每次使用特定输入调用时返回相同输出的函数

40. JSON 的了解?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

{‘age’:‘12’, ‘name’:‘back’}


41. document.write 和 innerHTML 的区别?

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分


42. 请解释一下 JavaScript 的同源策略?

概念:同源策略是客户端脚本(尤其是Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。


43. 介绍一下闭包和闭包常用场景?

闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包常见方式,就是在一个函数的内部创建另一个函数

使用闭包主要为了设计私有的方法和变量,闭包的优点是可以避免变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。在js中,函数即闭包,只有函数才会产生作用域的概念。

闭包有三个特性:

函数内再嵌套函数

内部函数可以引用外层的参数和变量

参数和变量不会被垃圾回收机制回收

闭包的好处: 能够实现封装和缓存等;

闭包的缺点就是常驻内存,会增大内存使用量,使用不当会造成内存泄漏

应用场景:

常见的防抖节流

使用闭包可以在 JavaScript 中模拟块级作用域

闭包可以用于在对象中创建私有变量

44. javascript的内存(垃圾)回收机制?

垃圾回收器会每隔一段时间找出那些不再使用的内存,然后为其释放内存

标记清除方法(mark and sweep),

这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了

引用计数方法(reference counting)

在低版本IE中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为0的时 候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收,但BOM与DOM对象却是通过引用计数回收垃圾的, 也就是说只要涉及BOM及DOM就会出现循环引用问题。

45. 用js递归的方式写1到100求和?

function add(num1, num2) {
  const num = num1 + num2;
    if(num2 === 100) {
        return num;
  } else {
      return add(num, num2 + 1)
    }
}
var sum = add(1, 2);              

46. 事件队列(宏任务微任务)

可以分为微任务(micro task)队列和宏任务(macro task)队列。


微任务一般比宏任务先执行,并且微任务队列只有一个,宏任务队列可能有多个。另外我们常见的点击和键盘等事件也属于宏任务。


下面我们看一下常见宏任务和常见微任务。


常见宏任务:


setTimeout()

setInterval()

setImmediate()

常见微任务:


promise.then()、promise.catch()

new MutaionObserver()

process.nextTick()

微任务和宏任务的本质区别。


宏任务特征:有明确的异步任务需要执行和回调;需要其他异步线程支持。

微任务特征:没有明确的异步任务需要执行,只有回调;不需要其他异步线程支持。

setTimeout(function () {
 console.log("1");
}, 0);
async function async1() {
 console.log("2");
 const data = await async2();
 console.log("3");
 return data;
}
async function async2() {
 return new Promise((resolve) => {
     console.log("4");
     resolve("async2的结果");
 }).then((data) => {
     console.log("5");
     return data;
 });
}
async1().then((data) => {
 console.log("6");
 console.log(data);
});
new Promise(function (resolve) {
 console.log("7");
resolve()
}).then(function () {
 console.log("8");
});
// 2 4 7 5 8 3 6 async2的结果 1

43.async/await, Generator

async 是一个通过异步执行并隐式返回 Promise 作为结果的函数。是Generator函数的语法糖,并对Generator函数进行了改进。

改进:


内置执行器,无需手动执行 next() 方法。

更好的语义

更广的适用性:co模块约定,yield命令后面只能是 Thunk 函数或 Promise 对象,而async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)。

返回值是 Promise,比 Generator 函数返回的 Iterator 对象方便,可以直接使用 then() 方法进行调用。

async 隐式返回 Promise 作为结果的函数,那么可以简单理解为,await后面的函数执行完毕时,await会产生一个微任务(Promise.then是微任务)。

Generator 是 ES6 引入的新概念,它允许在函数执行过程中暂停和恢复它们的状态。通过 function* 声明一个 Generator 函数,可以在函数体内使用关键字 yield 来生成一个状态,并将函数挂起,等待下一次调用。Generator 函数返回一个可迭代对象,可以通过 next() 方法获取当前生成器的状态值。使用 Generator 函数可以更简单地实现异步操作,避免回调嵌套带来的问题。


48. JavaScript 是单线程的,浏览器是多进程的

每打开一个新网页就会创建一个渲染进程

渲染进程是多线程的

负责页面渲染的 GUI 渲染线程

负责JavaScript的执行的 JavaScript 引擎线程,

负责浏览器事件循环的事件触发线程,注意这不归 JavaScript 引擎线程管

负责定时器的定时触发器线程,setTimeout 中低于 4ms 的时间间隔算为4ms

负责XMLHttpRequest的异步 http 请求线程

GUI 渲染线程与 JavaScript 引擎线程是互斥的

单线程JavaScript是因为避免 DOM 渲染的冲突,web worker 支持多线程,但是 web worker 不能访问 window 对象,document 对象等。

49.说说 Javascript 数字精度丢失的问题,如何解决?

例子:0.1+0.2===0.3 =>false 涉及IEE754标准


问题原因:


计算机存储双精度浮点数需要先把十进制数转换为二进制的科学记数法的形式,然后计算机以自己的规则{符号位+(指数位+指数偏移量的二进制)+小数部分}存储二进制的科学记数法

因为存储时有位数限制(64位),并且某些十进制的浮点数在转换为二进制数时会出现无限循环,会造成二进制的舍入操作(0舍1入),当再转换为十进制时就造成了计算误差

解决:


使用 toFixed() 方法:将浮点数转化为一个指定位数小数的字符串形式

使用第三方库,Math.js、BigDecimal.js

50.说说你对模块化方案的理解,比如 CommonJS、AMD、CMD、ES Module 分别是什么?

CommonJS加载模块同步,主要用于服务器端,它主要依靠require和exports来实现模块化,require用户加载模块,exports用于导出模块

AMD异步模块定义,他解决了在浏览器环境下文件以来管理,模块加载的问题。与commonjs不同,AMD使用异步方式加载模块

CMD通用模块定义,cmd也是为了解决浏览器端模块化出现的,与AMD不同的是它使用同步方式加载模块,主要依赖require和define来实现模块化

ES Module是es6新增的模块化方案,支持在浏览器和node.js使用,并且已经得到了嵌入式运行环境的支持,与commonjs和amd不同,ES Module是静态加载它使用import和export关键字实现模块化

目录
相关文章
|
23小时前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
23小时前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
23小时前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
23小时前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
23小时前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
23小时前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
1天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
2天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
2天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)
|
2天前
|
缓存 编解码 自然语言处理
前端javascript的BOM对象知识精讲
前端javascript的BOM对象知识精讲