前端面试高频50题,嘎嘎香

目录

  1. HTML相关问题
  2. CSS相关问题
  3. JavaScript相关问题
  4. Vue.js相关问题
  5. React相关问题
  6. 浏览器相关问题
  7. 性能优化相关问题

1. HTML相关问题

1. 什么是Doctype?有什么作用?

Doctype(文档类型声明)是一种标准通告,它告诉浏览器当前文档的类型及版本。它的作用是使浏览器以正确的模式(标准模式或兼容模式)渲染页面内容。

<!DOCTYPE html>

2. HTML5有哪些新特性?

HTML5增加了一些新的语义元素(如 <article><section><header><footer>),新的表单控件(如 <date><email><url>),新的API(如本地存储、音视频支持、Canvas绘图)。

3. 行内元素和块级元素的区别?

行内元素(inline element)不占据整个宽度,仅占据自身的内容宽度;而块级元素(block element)占据其父容器的整个宽度。行内元素不能包含块级元素,但块级元素可以包含行内元素。

4. 如何在HTML中嵌入SVG?

可以使用 <svg> 标签直接嵌入SVG代码,或者使用 <img> 标签引用外部SVG文件。

<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

5. HTML5中的自定义数据属性是什么?

自定义数据属性可以使用 data- 前缀在HTML元素上定义,这些属性可以通过JavaScript轻松访问。

<div data-user-id="12345">User Info</div>

2. CSS相关问题

6. CSS选择器有哪些?请举例说明。

常见的CSS选择器包括:

  • 元素选择器:div
  • 类选择器:.className
  • ID选择器:#idName
  • 属性选择器:[type="text"]
  • 伪类选择器::hover
  • 伪元素选择器:::before

7. CSS的盒模型是什么?

CSS的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。这些属性共同决定了元素的总大小和布局。

.box {width: 100px;padding: 10px;border: 5px solid black;margin: 20px;
}

8. 如何实现一个水平居中的div?

可以使用 margin: auto 或者使用 flexbox

.center {width: 200px;margin: 0 auto;
}

9. 什么是Flexbox布局?它有哪些优点?

Flexbox是一种用于一维布局的CSS布局模式,它使得盒子在容器中可以根据可用空间动态排列和调整大小。优点包括:便捷的水平和垂直对齐、简单的元素排序、适应不同屏幕尺寸等。

.container {display: flex;justify-content: center;align-items: center;
}

10. 如何使用CSS实现响应式设计?

可以使用媒体查询(media queries)来针对不同屏幕尺寸应用不同的样式。

@media (max-width: 600px) {.responsive {font-size: 14px;}
}

3. JavaScript相关问题

11. JavaScript的数据类型有哪些?

JavaScript的基本数据类型包括:undefinednullbooleannumberstringsymbolobject

12. 如何判断一个变量的类型?

可以使用 typeof 运算符和 instanceof 运算符。

typeof 42; // "number"
typeof "hello"; // "string"
[] instanceof Array; // true

13. 什么是闭包(closure)?

闭包是指一个函数可以记住并访问其词法作用域,即使这个函数在其词法作用域之外执行。闭包使得函数拥有私有变量。

function outerFunction() {let outerVariable = 'I am outside!';function innerFunction() {console.log(outerVariable);}return innerFunction;
}
const closureFunction = outerFunction();
closureFunction(); // 输出 "I am outside!"

14. JavaScript中的事件循环(Event Loop)是什么?

事件循环是JavaScript处理异步操作的机制。它不断检查调用堆栈和消息队列,如果调用堆栈为空,就将消息队列中的第一个任务推入调用堆栈执行。

15. 什么是Promise?如何使用?

Promise 是一种用于处理异步操作的对象。它有三种状态:pendingfulfilledrejected。可以通过 thencatch 方法链式调用。

const promise = new Promise((resolve, reject) => {if (success) {resolve('Success');} else {reject('Error');}
});
promise.then(result => console.log(result)).catch(error => console.log(error));

16. 如何实现深拷贝一个对象?

可以使用递归函数或者第三方库如 lodash 来实现深拷贝。

function deepClone(obj) {if (obj === null || typeof obj !== 'object') {return obj;}const clone = Array.isArray(obj) ? [] : {};for (let key in obj) {clone[key] = deepClone(obj[key]);}return clone;
}

17. 什么是this关键字?它在不同场景下的值分别是什么?

this 是一个特殊的关键字,它的值取决于函数的调用方式。在全局环境中,它指向 window 对象;在方法调用中,它指向调用该方法的对象;在构造函数中,它指向新创建的实例对象。

18. JavaScript中的作用域链(Scope Chain)是什么?

作用域链是指在函数执行时,沿着函数声明的位置向上查找变量的过程。每个函数都会形成一个新的作用域,当前作用域没有找到的变量,会沿着作用域链依次向上查找。

19. 如何实现继承?

可以使用 class 语法和 extends 关键字,或者通过构造函数和 prototype 实现继承。

class Parent {constructor(name) {this.name = name;}sayName() {console.log(this.name);}
}class Child extends Parent {constructor(name, age) {super(name);this.age = age;}
}const child = new Child('John', 25);
child.sayName(); // 输出 "John"

20. JavaScript中的原型链(Prototype Chain)是什么?

原型链是指对象的原型对象的链条。当访问对象的属性时,如果属性不存在于对象本身,会沿着原型链向上查找,直到找到属性或达到原型链的顶端(null)。

4. Vue.js相关问题

21. 什么是Vue的双向绑定?

Vue的双向绑定是指数据模型和视图之间的同步更新。通过 v-model 指令,表单输入元素可以与数据进行双向绑定。

22. Vue组件的生命周期有哪些?

Vue组件的生命周期分为四个阶段:创建、挂载、更新和销毁。常用的钩子函数包括 beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed

23. Vue中的计算属性(computed)和侦听属性(watch)有什么区别?

计算属性用于基于其他属性的值计算新值,并且具有缓存特性。侦听属性用于观察和响应数据变化,但不会缓存值。

computed: {fullName() {return `${this.firstName} ${this.lastName}`;}
}
watch: {firstName(newVal, oldVal) {console.log(`firstName changed from ${oldVal} to ${newVal}`);}
}

24. Vue中的指令有哪些?请举例说明。

常用的Vue指令包括:

  • v-if: 条件渲染
  • v-for: 列表渲染
  • v-bind: 动态绑定属性
  • v-on: 事件绑定
  • v-model: 双向绑定

  1. Vue中的v-for指令中使用key有什么作用?
    key 属性用于在 v-for 循环中为每个节点提供唯一标识,帮助Vue更高效地更新和复用节点,避免不必要的重渲染。

26. 如何在Vue中实现父子组件通信?

可以通过 props 向子组件传递数据,通过 $emit 向父组件发送事件。

// 父组件
<template><child-component :message="parentMessage" @child-event="handleEvent"></child-component>
</template>
<script>
export default {data() {return {parentMessage: 'Hello from parent'};},methods: {handleEvent(data) {console.log('Received event from child:', data);}}
};
</script>// 子组件
<template><div><p>{{ message }}</p><button @click="sendEvent">Send Event</button></div>
</template>
<script>
export default {props: ['message'],methods: {sendEvent() {this.$emit('child-event', 'Hello from child');}}
};
</script>

27. Vue中如何使用插槽(slots)?

插槽用于在组件模板中嵌入父组件的内容。

// 父组件
<template><child-component><template v-slot:header><h1>Header Content</h1></template><p>Main Content</p></child-component>
</template>// 子组件
<template><div><header><slot name="header"></slot></header><main><slot></slot></main></div>
</template>

28. Vue中的动态组件是什么?

动态组件是指根据条件动态加载和渲染不同的组件。可以使用 component 组件和 :is 属性实现动态组件。

<template><component :is="currentComponent"></component>
</template>
<script>
export default {data() {return {currentComponent: 'componentA'};},components: {componentA,componentB}
};
</script>

29. Vue中的混入(mixins)是什么?

混入是指将可复用的代码片段分离出来,在多个组件中共享。混入对象可以包含任意组件选项,混入时会与组件自身的选项合并。

const myMixin = {created() {console.log('Mixin hook called');}
};export default {mixins: [myMixin],created() {console.log('Component hook called');}
};

30. Vue Router的基本使用方法是什么?

Vue Router 是 Vue.js 的官方路由管理器,用于创建SPA(单页应用)。基本使用包括定义路由、创建路由实例并挂载到Vue实例。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';Vue.use(VueRouter);const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = new VueRouter({routes
});new Vue({el: '#app',router,render: h => h(App)
});

5. React相关问题

31. React的生命周期有哪些阶段?

React组件的生命周期分为挂载、更新和卸载三个阶段。主要的生命周期方法包括 componentDidMountcomponentDidUpdatecomponentWillUnmount

32. 什么是React Hooks?举例说明如何使用useState和useEffect。

React Hooks是React 16.8引入的一种全新API,允许在函数组件中使用state和其他React特性。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

33. React中的虚拟DOM(Virtual DOM)是什么?

虚拟DOM是React中的一种轻量级的JavaScript对象表示,它与真实DOM保持同步。在状态变化时,React会先更新虚拟DOM,再通过diff算法找到最小的变更并更新真实DOM。

34. 如何在React中实现组件通信?

可以通过props在父子组件之间传递数据和回调函数,或者使用Context在深层嵌套组件中传递数据。

35. React中高阶组件(Higher-Order Component, HOC)是什么?

高阶组件是一个函数,它接受一个组件并返回一个新的组件。HOC通常用于组件逻辑的复用。

function withLogging(WrappedComponent) {return class extends React.Component {componentDidMount() {console.log('Component mounted');}render() {return <WrappedComponent {...this.props} />;}};
}

36. 什么是React中的Context API?

Context API用于在组件树中传递数据,而无需通过props逐层传递。它包括React.createContextProviderConsumer

const MyContext = React.createContext();function Parent() {return (<MyContext.Provider value="Hello from context"><Child /></MyContext.Provider>);
}function Child() {return (<MyContext.Consumer>{value => <p>{value}</p>}</MyContext.Consumer>);
}

37. React中的Ref是什么?如何使用?

Ref用于访问DOM节点或React实例。可以通过React.createRef创建Ref,并在组件中通过ref属性使用。

class MyComponent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef();}componentDidMount() {this.myRef.current.focus();}render() {return <input ref={this.myRef} />;}
}

38. React中的Fragment是什么?它有什么作用?

Fragment允许将多个子元素分组,而不在DOM中添加额外的节点。可以使用<React.Fragment><>语法。

function MyComponent() {return (<><p>First paragraph</p><p>Second paragraph</p></>);
}

39. React中的Portals是什么?如何使用?

Portals用于将子节点渲染到父组件以外的DOM节点中。可以使用ReactDOM.createPortal方法。

ReactDOM.createPortal(<div>Portal Content</div>,document.getElementById('portal-root')
);

40. 如何在React中处理异步请求?

可以使用useEffect钩子(在函数组件中)或componentDidMount生命周期方法(在类组件中)来处理异步请求。

useEffect(() => {async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();setData(data);}fetchData();
}, []);

6. 浏览器相关问题

41. 浏览器的渲染过程是什么?

浏览器的渲染过程包括以下几个步骤:解析HTML生成DOM树、解析CSS生成CSSOM树、将DOM树和CSSOM树合并生成渲染树、布局计算和绘制。

42. 什么是重绘(Repaint)和重排(Reflow)?

重绘是指元素外观的改变(如颜色),不会影响布局。重排是指布局的改变,会影响到部分或整个页面的布局,需要重新计算布局。

43. 浏览器的同源策略是什么?

同源策略是一种安全机制,限制来自不同源(协议、域名、端口)的脚本对当前网页资源的访问。不同源的请求会受到限制,以防止跨站脚本攻击。

44. 如何解决跨域问题?

常见的跨域解决方案包括:JSONP、CORS、服务器代理。

45. 浏览器缓存有哪些类型?

浏览器缓存包括:强缓存和协商缓存。强缓存通过Cache-ControlExpires头实现,协商缓存通过Last-ModifiedETag头实现。

7. 性能优化相关问题

46. 如何优化网页加载速度?

优化网页加载速度的方法包括:减少HTTP请求、使用CDN、压缩资源、延迟加载(lazy loading)、使用缓存等。

47. 如何优化CSS性能?

优化CSS性能的方法包括:减少CSS选择器的复杂度、避免使用低效的选择器、压缩CSS文件、减少重绘和重排等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50536.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式驱动源代码(18):网络编程-原始套接字

目录 3种方式创建原始socket 常用头文件 IP_HDRINCL 三个参数 sockaddr_ll 3种方式创建原始socket socket(AF_INET, SOCK_RAW, IPPROTO_TCP|IPPROTO_UDP|IPPROTO_ICMP)发送接收ip数据包socket(PF_PACKET, SOCK_RAW, htons(ETH_P_IP|ETH_P_ARP|ETH_P_ALL))发送接收以太网数…

大模型:AI领域的下一个风口

一、什么是大模型&#xff1f; 大模型&#xff0c;顾名思义&#xff0c;是指具有超大规模的神经网络模型。它们通常需要海量的数据和计算资源来训练和运行。典型的大模型有 GPT-3、BERT、AlphaFold 等&#xff0c;这些模型在自然语言处理、生物信息学等领域取得了显著的成果。…

常见的 HTTP 状态码分类及说明

HTTP 响应状态码&#xff08;HTTP status code&#xff09;&#xff0c;表示服务器对请求的处理结果。常见的 HTTP 状态码有以下几类&#xff1a; 1xx: 信息响应 (Informational Responses) 100 Continue: 请求已收到&#xff0c;客户端应继续发送请求的其余部分。101 Switch…

商场导航系统:从电子地图到AR导航,提升顾客体验与运营效率的智能解决方案

商场是集娱乐、休闲、社交于一体的综合性消费空间&#xff0c;随着商场规模的不断扩大和布局的日益复杂&#xff0c;顾客在享受丰富选择的同时&#xff0c;也面临着寻路难、店铺曝光率低以及商场管理效率低下等挑战。商场导航系统作为提升购物体验的关键因素&#xff0c;其重要…

黄景仁,笔墨间的一抹清寒

黄景仁&#xff0c;字汉镛&#xff0c;一字仲则&#xff0c;号鹿菲子&#xff0c;生于乾隆十四年&#xff08;公元1749年&#xff09;&#xff0c;卒于乾隆四十八年&#xff08;公元1783年&#xff09;&#xff0c;享年仅35岁。他是宋代大诗人黄庭坚的后裔&#xff0c;出生于常…

deepseek-vl 论文阅读笔记

目录 一、已有模型性能差距分析 二、创新点 数据集构建 模型架构 训练策略 实验与评估 三、细节 数据构建 内部SFT数据的分类体系 模型架构 训练流程包括三个阶段 系统包含三个模块 混合视觉编码器 视觉-语言适配器 语言模型 训练策略 阶段一&#xff1a;训练…

AMQP-核心概念-3

本文参考以下链接摘录翻译&#xff1a; https://www.rabbitmq.com/tutorials/amqp-concepts 队列&#xff08;Queues&#xff09; AMQP 0-9-1模型中的队列和其他消息任务队列系统中的队列非常相似&#xff1a;它们用于存储被应用消费的消息。队列和交换机有一些相同的属性&…

el-date-picker 时间控件校验选择时间必须早于当前时间(带时分秒)

el-date-picker 时间控件校验选择时间必须遭早于当前时间&#xff08;带时分秒&#xff09;&#xff0c;然后监控时间控件&#xff0c;当时间改变的时候&#xff0c;如果不是当天&#xff0c;那时间可以选择全天也就是00-24时&#xff0c;如果是当天&#xff0c;就是当前时间之…

【React】JSX:从基础语法到高级用法的深入解析

文章目录 一、什么是 JSX&#xff1f;1. 基础语法2. 嵌入表达式3. 使用属性4. JSX 是表达式 二、JSX 的注意事项1. 必须包含在单个父元素内2. JSX 中的注释3. 避免注入攻击 三、JSX 的高级用法1. 条件渲染2. 列表渲染3. 内联样式4. 函数作为子组件 四、最佳实践 在 React 开发中…

根据《数字信用在电力行业应用思路及探索》,在实现碳中和目标下,电力产业如何通过绿色金融促进碳减排()

根据《数字信用在电力行业应用思路及探索》&#xff0c;在实现碳中和目标下&#xff0c;电力产业如何通过绿色金融促进碳减排()查看正确答案 A、《数字信用在电力行业应用思路及探索》 B、扩大电力消费C、参与电力碳市场建设&#xff0c;强化市场金融属性 D、电力行业供应链金融…

PHP Filesystem 简介

PHP Filesystem 简介 PHP 是一种广泛使用的开源服务器端脚本语言&#xff0c;特别适用于网页开发。在 PHP 中&#xff0c;Filesystem 是一个功能丰富的库&#xff0c;提供了一系列用于文件系统操作的函数。这些函数允许开发者读取、写入、修改和删除文件和目录&#xff0c;以及…

云计算实训室建设可行性报告

一、建设云计算实训室的目的和意义 随着信息技术的飞速发展&#xff0c;云计算作为一种新型的信息服务模式&#xff0c;已经成为推动信息技术创新和促进信息产业发展的重要力量。中高职院校作为培养高素质技能人才的重要基地&#xff0c;应当紧跟时代步伐&#xff0c;加强云计…

视觉-语言-行动模型:将网络知识迁移至机器人控制(RT-2论文翻译)

RT-2: Vision-Language-Action Models Transfer Web Knowledge to Robotic Control RT-2: 用互联网知识训练的视觉语言模型融入到机器人控制中 RT1 论文翻译&#xff1a; https://blog.csdn.net/weixin_43334869/article/details/135850410 文章目录 RT-2: Vision-Language…

关键词查找【Boyer-Moore 算法】

1、【Boyer-Moore 算法】 【算法】哪种算法有分数复杂度&#xff1f;- BoyerMoore字符串匹配_哔哩哔哩_bilibili BM算法的精华就在于BM(text, pattern),也就是BM算法当不匹配的时候一次性可以跳过不止一个字符。即它不需要对被搜索的字符串中的字符进行逐一比较&#xff0c;而…

AI绘画入门实践 | Midjourney:使用 --tile 制作面料纹理与壁纸背景图

在 Midjourney 中&#xff0c;--tile 生成可以连续平铺的图像&#xff0c;常用于面料墙纸与纹理的无缝图案。 使用格式&#xff1a;提示词 --tile 使用演示 a pink rose, clean background --tile --niji 5 无缝图检查工具&#xff1a;https://www.pycheung.com/checker/ 平铺…

C++学习笔记-函数模版与类模版

模板是C语言中的一个强大特性&#xff0c;它允许程序员编写通用代码以处理不同数据类型的数据&#xff0c;从而实现代码的重用和泛化。 一、C模板的基本概念 C模板是一种泛型编程工具&#xff0c;通过参数化类型来编写通用的函数和类。模板的核心思想是允许程序员编写一次代码…

文件共享功能无法使用提示错误代码0x80004005【笔记】

环境情况&#xff1a; 其他电脑可以正常访问共享端&#xff0c;但有一台电脑访问提示错误代码0x80004005。 处理检查&#xff1a; 搜索里输入“启用或关闭Windows功能”按回车键&#xff0c;在“启用或关闭Windows功能”里将“SMB 1.0/CIFS文件共享支持”勾选后&#xff08;故…

uniapp 实现渐变圆弧进度条,并且根据实际数值,控制进度

在uni-app中实现渐变圆弧进度条可以使用canvas来绘制。下面是一个简单的示例: 在template中添加canvas标签: <canvas canvas-id="progressCanvas" style="width: 200px; height: 200px;"></canvas>在script中添加以下代码: export defau…

STM32智能家居控制系统教程

目录 引言环境准备智能家居控制系统基础代码实现&#xff1a;实现智能家居控制系统 4.1 数据采集模块 4.2 数据处理与分析模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;家居监测与优化问题解决方案与优化收尾与总结 1. 引言 智能家居控制系统通…

“微软蓝屏”事件暴露的网络安全问题

“微软蓝屏”事件暴露的网络安全问题 近日&#xff0c;一次由微软视窗系统软件更新引发的全球性“微软蓝屏”事件&#xff0c;不仅成为科技领域的热点新闻&#xff0c;更是一次对全球IT基础设施韧性与安全性的深刻检验。这次事件源于美国电脑安全技术公司“众击”提供的一个带…