学习记录-前端-面试题

HTML/CSS基础

1.HTML语义化是什么意思？有什么好处？

答案：HTML语义化是指使用具有明确语义的HTML标签来构建页面，使页面结构清晰、内容易于理解。好处包括提高可访问性（如屏幕阅读器能更好解析页面）、利于SEO（搜索引擎更易理解页面内容）、便于维护和团队协作等。

2.CSS盒模型包含哪些部分？

答案：CSS盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分。

3.如何实现网页的居中布局？

答案：水平居中：对于块级元素，设置margin-left: auto; margin-right: auto;，并指定宽度；对于行内元素，父容器设置text-align: center;。
垂直居中：可使用Flexbox布局，父容器设置display: flex; justify-content: center; align-items: center;。

4.清除浮动有哪些方法？

答案：使用clear: both;的空元素清除法。父元素设置overflow: hidden;或auto;。使用:after伪元素清除法，给父元素添加content: “”; display: table; clear: both;。

5.JavaScript中的this指向如何确定？

答案：this指向在函数调用时确定，普通函数调用指向全局对象（浏览器中是window），作为对象方法调用指向该对象，构造函数调用指向新创建的实例，箭头函数则没有自己的this，继承外层函数的this。

6.闭包是什么？有什么作用？

答案：闭包是能够读取其他函数内部变量的函数。作用包括可以读取函数内部变量，实现数据封装和私有变量，以及保存函数执行时的状态等。

7.如何实现数组的去重？

答案：使用for循环结合indexOf方法，遍历数组并保留未重复的元素。使用Set数据结构，let uniqueArray = […new Set(array)];。

8.Promise的基本使用和状态有哪些？

答案：Promise是一个对象，用于异步计算。状态包括待定（pending）、已实现（fulfilled）和已拒绝（rejected）。基本使用包括创建Promise实例，通过.then()处理成功情况，.catch()处理错误情况，以及async/await语法糖简化异步代码。

9.如何优化网页的加载速度？

答案：减少HTTP请求，如合并文件、使用CSS Sprites。压缩资源，如压缩JS、CSS、图片等。使用浏览器缓存，设置合理的缓存头。优化代码，避免不必要的渲染和计算。

10.如何优化前端代码的执行性能？

答案：避免使用全局变量，减少作用域链查找时间。使用事件委托优化事件处理。使用requestAnimationFrame优化动画性能。对大量数据操作进行分批处理，避免阻塞UI线程。

11.如何实现一个简单的响应式布局？

答案：使用媒体查询（@media）针对不同屏幕宽度设置不同样式。采用弹性布局（Flexbox）或网格布局（Grid Layout）实现自适应结构。使用相对单位（如%、rem）代替固定单位。

12.你如何保持对前端技术的学习和更新？

答案：可通过关注技术博客、参加线上线下活动、参与开源项目、定期学习新技术文档等方式持续学习。

13.什么是 HTML5 的语义化标签？举例说明。

答案：HTML5 的语义化标签是指那些具有明确语义的标签，如header、nav、main、footer等，它们使页面结构更加清晰，有利于SEO和可访问性。

14.CSS3 的新特性有哪些？

o答案：CSS3 引入了许多新特性，包括媒体查询、灵活的盒模型、多列布局、动画和过渡效果、渐变背景等。

15.如何使用 CSS 实现一个响应式图片？

o答案：可以使用max-width: 100%; height: auto;来确保图片在不同屏幕尺寸下自动调整大小。

16.浮动布局和 Flexbox 布局有什么区别？

答案：浮动布局需要清除浮动，布局较为复杂；Flexbox 布局更灵活，可以轻松实现复杂布局，如对齐、分布空间等。

17.JavaScript 中的事件冒泡和事件捕获是什么？

o答案：事件冒泡是指事件从最具体的元素开始，然后逐级向上转播至最外层的节点；事件捕获则是相反，从最外层节点开始，逐级向下传递到目标节点。

18.如何在 JavaScript 中实现一个简单的继承？

o答案：可以通过原型链继承，将子类的原型设置为父类的实例，或者使用Object.create()方法。

19.如何避免 JavaScript 中的内存泄漏？

答案：内存泄漏是指内存中的一些数据被分配出去，但无法被程序再次使用。避免内存泄漏的方法包括及时解除事件监听、清理定时器、避免闭包中保存大对象等。

20.浏览器的存储机制有哪些？它们的区别是什么？

答案：浏览器存储机制包括 Cookie、localStorage、sessionStorage 和 IndexedDB。Cookie 大小有限且会随请求发送，localStorage 和 sessionStorage 提供更大的存储空间且持久保存，IndexedDB 适用于存储大量结构化数据。

21.如何实现浏览器的本地存储？

答案：可以使用 localStorage 或 sessionStorage，通过setItem()、getItem()、removeItem()等方法进行数据存储和读取。

22.你如何评估和选择一个新的前端技术或框架？

答案：可通过研究技术文档、查看社区活跃度、评估学习曲线、进行小规模试点项目等方式综合评估。

来源

作者：时雨h
链接：https://www.nowcoder.com/discuss/730841995765121024?sourceSSR=users
来源：牛客网