前端面试题汇总笔记01

HTML/CSS基础

什么是HTML5？有哪些新特性？

HTML5是HTML的第五个版本，它引入了许多新特性，包括语义化标签（如

、

）、多媒体元素（、）、Canvas绘图功能、本地存储等。

请解释盒模型是什么？如何使用CSS框定模型？

盒模型指的是在网页中，每个元素都被看作一个矩形的盒子，由内容、内边距、边框和外边距组成。可以使用CSS的width、height、padding、border和margin属性来控制盒模型的布局。

什么是响应式设计？如何实现响应式网页布局？

响应式设计是一种能够适应不同设备和屏幕尺寸的网页设计方式。实现响应式布局可以使用媒体查询、弹性网格布局、相对单位等技术。

请介绍一下Flexbox布局和Grid布局，以及它们的用途和区别。

Flexbox是一种灵活的布局模型，能够方便地进行网页布局和对齐。Grid布局则是一种二维网格系统，能够更精确地控制网页布局。它们都是现代CSS布局的关键技术。

什么是CSS预处理器？你熟悉的CSS预处理器有哪些？

CSS预处理器是一种用来简化和优化CSS编写过程的工具，比如Sass、Less等。它们提供了变量、嵌套规则、Mixin等功能，能够让CSS代码更加模块化和易维护。

JavaScript基础

请解释事件冒泡和事件捕获的区别。

事件冒泡是指事件从最内层元素开始向外层元素传播，而事件捕获则相反。在DOM树上从事件目标开始，逐级向上或向下传播事件。

什么是闭包？请举一个闭包的示例并解释其工作原理。

闭包是指函数和其词法环境的组合，可以捕获外部函数中的变量，并将其保存在内部函数的作用域中。这样即使外部函数执行完毕，内部函数仍然可以访问这些变量。

请解释同步和异步JavaScript的区别，以及如何处理异步操作。

同步操作是按顺序执行的，而异步操作是不按顺序执行的，通常会以回调函数、Promise或async/await的方式进行处理。

什么是ES6？你熟悉的ES6新特性有哪些？

ES6是ECMAScript 2015的简称，引入了许多新特性，比如箭头函数、let和const声明、模板字符串、解构赋值、类和模块等。

请描述一下JavaScript中的this关键字的工作原理。

在JavaScript中，this关键字的指向取决于函数的调用方式，可以是默认绑定、隐式绑定、显式绑定或new绑定。

前端框架和库

请解释一下React/Vue/Angular框架的核心概念和特点。

React:

React是一个由Facebook开发的用于构建用户界面的JavaScript库。 核心概念包括组件化、虚拟DOM、单向数据流等。
使用JSX语法编写组件，通过状态(state)和属性(props)管理数据。 Vue:

Vue是一套用于构建用户界面的渐进式框架，也可用作单页面应用程序。 核心概念包括响应式数据、组件化、指令等。
模板语法可以让开发者更容易地进行页面渲染。 Angular:

Angular是由Google开发的一款前端框架，用于构建大型单页应用。 核心概念包括模块化、依赖注入、指令等。
使用TypeScript语言，提供了完整的解决方案。

你在项目中如何处理组件之间的通讯？

父子组件通讯：父组件通过props将数据传递给子组件，子组件通过事件将数据传递给父组件。
兄弟组件通讯：可以使用共享的父组件状态或者使用事件总线或状态管理工具（如Redux、Vuex）来实现兄弟组件之间的通讯。
跨层级组件通讯：可以使用上下文(Context)、自定义事件、全局事件总线等方式来实现跨层级组件的通讯。

什么是虚拟DOM？它的作用是什么？

虚拟DOM是指一个虚拟的DOM树，它是真实DOM的轻量级拷贝。当数据发生变化时，框架会先对虚拟DOM进行操作，然后将虚拟DOM和之前的虚拟DOM树进行比对，找出差异并只更新差异部分到真实DOM，从而提高性能。

虚拟DOM的作用包括：

提高性能：通过差异比对，减少了对真实DOM的操作次数，从而提高了性能。
简化复杂操作：开发者可以直接操作虚拟DOM，而无需关心底层的DOM操作。

请解释一下单向数据流和双向数据绑定的区别。

单向数据流:

单向数据流指的是数据只能从一个方向流向视图层，即从父组件到子组件的数据传递。
React和Vue都采用了单向数据流的概念，通过props将数据自上而下地传递到子组件。 双向数据绑定:

双向数据绑定允许数据在视图层和模型之间进行双向的绑定，即视图的变化会影响模型，模型的变化也会影响视图。
Angular采用了双向数据绑定的概念，通过NgModel指令实现双向数据绑定。 区别:

单向数据流可以使数据流向更加清晰和可控，但需要通过事件来实现子组件向父组件的通讯。
双向数据绑定简化了表单等输入控件的使用，但可能会导致数据流向不清晰，难以追踪和调试。

Web性能优化

以下是一些常见的Web性能优化技巧：

1. 压缩和合并静态资源：对JavaScript、CSS和HTML文件进行压缩和合并，减少文件大小，减少页面加载时间。
2. 使用浏览器缓存：利用适当的缓存策略，如设置Expires和Cache-Control头部，以减少对服务器的请求，并提高页面加载速度。
3. 使用CDN（内容分发网络）：将静态资源部署到CDN上，加速用户对这些资源的访问，降低网络延迟，提高加载速度。
4. 图片优化：使用适当的图片格式、压缩图片大小、懒加载图片等方式来优化图片加载性能。
5. 异步加载资源：通过懒加载、按需加载等技术，延迟加载非关键资源，提高页面的首屏加载速度。
6. 减少重定向和请求次数：优化页面结构和资源引用方式，减少重定向和不必要的HTTP请求，提高页面加载速度。
7. 服务器端性能优化：优化服务器配置、数据库查询、接口响应等，提高后端数据传输速度。
8. 前端框架优化：针对具体的前端框架，优化其渲染性能，减少不必要的重绘和回流。

总的来说，Web性能优化需要综合考虑前端资源加载、网络传输、服务器响应等多个方面，以达到提高网页加载速度和响应速度的目的。

你在项目中如何进行前端性能优化？

在项目中进行前端性能优化通常包括以下几个方面：

1. 压缩和合并资源文件：对JavaScript、CSS、图片等静态资源进行压缩和合并，减小文件大小，减少HTTP请求次数。
2. 使用缓存：利用浏览器缓存和CDN缓存来减少资源加载时间，提高页面加载速度。
3. 异步加载资源：通过懒加载、按需加载等技术，延迟加载非关键资源，提高页面的首屏加载速度。
4. 图片优化：使用适当的图片格式、压缩图片大小、懒加载图片等方式来优化图片加载性能。
5. 前端框架优化：针对具体的前端框架，优化其渲染性能，减少不必要的重绘和回流。
6. 减少重定向和请求次数：优化页面结构和资源引用方式，减少重定向和不必要的HTTP请求，提高页面加载速度。

请解释一下浏览器缓存是如何工作的，以及如何利用浏览器缓存优化 网页加载速度。

浏览器缓存是一种将已经获取的资源保存在本地存储器中，并在下次请求相同资源时直接从本地读取而不是重新发起网络请求的机制。浏览器缓存分为强缓存和协商缓存两种类型：

强缓存：浏览器在请求资源时，会先检查本地是否有缓存副本，并根据缓存策略判断是否可以直接使用缓存，不需要发起网络请求。常见的缓存策略包括Expires和Cache-Control头部。

协商缓存：当强缓存失效时，浏览器会发送一个带有If-Modified-Since或者ETag头部的请求到服务器，服务器会根据资源的最后修改时间或者特定的标识来判断资源是否有更新，如果没有更新则返回304
Not Modified响应，浏览器可以直接使用缓存。

通过合理设置缓存策略，可以有效利用浏览器缓存来优化网页加载速度，减少网络请求次数，降低服务器压力，提升用户体验。

什么是CDN？它对网站性能有什么影响？

CDN（内容分发网络）是一种利用位于全球各地的边缘节点服务器，将网站的静态资源（如图片、CSS、JavaScript等）缓存到就近的服务器上，以降低用户访问这些资源的时延，提高页面加载速度和用户体验的网络架构。

CDN对网站性能有以下影响：

加速静态资源加载：通过将静态资源缓存在全球各地的CDN节点上，加速用户对这些资源的访问，减少网络延迟。
减轻源站压力：CDN可以分担源站的负载，减少源站的带宽消耗和服务器负荷，提高源站的稳定性和安全性。
提升用户体验：加速页面加载速度，提升用户对网站的访问体验，降低跳出率，增加转化率。
综合而言，CDN可以显著提升网站的性能和用户体验，特别是对于全球范围内的用户访问，CDN起到了至关重要的作用。