web前端常见面试题实例分析

发布时间：2022-07-29 10:13:20 作者：iii
来源：亿速云阅读：148

Web前端常见面试题实例分析

1. HTML/CSS 基础

1.1 HTML5 新特性

HTML5 引入了许多新特性，主要包括：

语义化标签：如 <header>、<footer>、<article>、<section> 等，使得页面结构更加清晰。
多媒体支持：如 <audio> 和 <video> 标签，使得在网页中嵌入音频和视频变得更加简单。
表单增强：新增了 <input> 类型，如 email、date、range 等，以及表单验证功能。
本地存储：localStorage 和 sessionStorage 提供了在客户端存储数据的能力。
Canvas 和 SVG：提供了绘制图形和动画的能力。

实例分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 新特性示例</title>
</head>
<body>
    <header>
        <h1>这是页头</h1>
    </header>
    <section>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </section>
    <footer>
        <p>这是页脚</p>
    </footer>
</body>
</html>

1.2 CSS 盒模型

CSS 盒模型是网页布局的基础，它由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

标准盒模型：width 和 height 只包含内容区域。
IE 盒模型：width 和 height 包含内容、内边距和边框。

实例分析：

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

在标准盒模型中，.box 的实际宽度为 200px + 20px * 2 + 10px * 2 = 260px，而在 IE 盒模型中，宽度为 200px。

1.3 Flexbox 布局

Flexbox 是一种一维布局模型，适用于在单行或单列中排列元素。

容器属性：display: flex;、flex-direction、justify-content、align-items 等。
项目属性：flex-grow、flex-shrink、flex-basis 等。

实例分析：

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

.item {
    flex: 1;
}

1.4 CSS 选择器优先级

CSS 选择器的优先级决定了哪个样式规则会被应用。优先级从高到低依次为：

!important
内联样式
ID 选择器
类选择器、属性选择器、伪类
元素选择器、伪元素
通配符选择器

实例分析：

#id-selector {
    color: red; /* 优先级最高 */
}

.class-selector {
    color: blue;
}

div {
    color: green;
}

1.5 BFC 是什么？

BFC（Block Formatting Context）是块级格式化上下文，它是一个独立的渲染区域，内部的元素不会影响到外部的元素。

触发 BFC 的条件：

float 不为 none
position 为 absolute 或 fixed
display 为 inline-block、table-cell、table-caption、flex、inline-flex
overflow 不为 visible

实例分析：

.container {
    overflow: hidden; /* 触发 BFC */
}

2. JavaScript 基础

2.1 闭包

闭包是指函数能够访问其词法作用域中的变量，即使函数在其词法作用域之外执行。

实例分析：

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}

const counter = outer();
counter(); // 输出 1
counter(); // 输出 2

2.2 原型链

JavaScript 中的每个对象都有一个原型对象，对象通过原型链继承属性和方法。

实例分析：

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('Alice');
person.sayHello(); // 输出 "Hello, my name is Alice"

2.3 事件循环

JavaScript 是单线程的，通过事件循环机制处理异步任务。

实例分析：

console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise');
});

console.log('End');

输出顺序为：Start、End、Promise、Timeout。

2.4 Promise 和 async/await

Promise 是处理异步操作的对象，async/await 是基于 Promise 的语法糖。

实例分析：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
}

async function getData() {
    const data = await fetchData();
    console.log(data);
}

getData(); // 输出 "Data fetched"

2.5 this 的指向

this 的指向取决于函数的调用方式。

实例分析：

const obj = {
    name: 'Alice',
    sayName: function() {
        console.log(this.name);
    }
};

obj.sayName(); // 输出 "Alice"

const sayName = obj.sayName;
sayName(); // 输出 undefined（非严格模式下为全局对象）

3. Vue.js

3.1 Vue 的生命周期

Vue 实例从创建到销毁的整个过程称为生命周期，主要包括以下钩子函数：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

实例分析：

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    beforeCreate() {
        console.log('beforeCreate');
    },
    created() {
        console.log('created');
    },
    beforeMount() {
        console.log('beforeMount');
    },
    mounted() {
        console.log('mounted');
    }
});

3.2 Vue 的响应式原理

Vue 通过 Object.defineProperty 实现数据的响应式。

实例分析：

const data = { message: 'Hello' };

Object.defineProperty(data, 'message', {
    get() {
        console.log('get message');
        return this._message;
    },
    set(newValue) {
        console.log('set message');
        this._message = newValue;
    }
});

data.message = 'World'; // 输出 "set message"
console.log(data.message); // 输出 "get message" 和 "World"

3.3 Vuex 的使用

Vuex 是 Vue 的状态管理库，用于管理全局状态。

实例分析：

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        increment({ commit }) {
            commit('increment');
        }
    }
});

new Vue({
    el: '#app',
    store,
    computed: {
        count() {
            return this.$store.state.count;
        }
    },
    methods: {
        increment() {
            this.$store.dispatch('increment');
        }
    }
});

3.4 Vue Router 的使用

Vue Router 是 Vue 的路由管理器，用于实现单页应用的路由。

实例分析：

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
];

const router = new VueRouter({
    routes
});

new Vue({
    el: '#app',
    router
});

3.5 Vue 组件通信

Vue 组件通信方式包括：

Props 和 Events：父组件通过 props 传递数据给子组件，子组件通过 $emit 触发事件。
Vuex：通过全局状态管理实现组件通信。
Event Bus：通过事件总线实现组件通信。

实例分析：

// 父组件
Vue.component('parent', {
    template: `
        <div>
            <child :message="message" @update="updateMessage"></child>
        </div>
    `,
    data() {
        return {
            message: 'Hello'
        };
    },
    methods: {
        updateMessage(newMessage) {
            this.message = newMessage;
        }
    }
});

// 子组件
Vue.component('child', {
    props: ['message'],
    template: `
        <div>
            <p>{{ message }}</p>
            <button @click="changeMessage">Change Message</button>
        </div>
    `,
    methods: {
        changeMessage() {
            this.$emit('update', 'World');
        }
    }
});

4. React

4.1 React 的生命周期

React 组件的生命周期主要包括以下阶段：

挂载阶段：constructor、render、componentDidMount
更新阶段：shouldComponentUpdate、render、componentDidUpdate
卸载阶段：componentWillUnmount

实例分析：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    componentDidMount() {
        console.log('Component mounted');
    }

    componentDidUpdate() {
        console.log('Component updated');
    }

    componentWillUnmount() {
        console.log('Component will unmount');
    }

    render() {
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                    Increment
                </button>
            </div>
        );
    }
}

4.2 React Hooks

React Hooks 是 React 16.8 引入的新特性，允许在函数组件中使用状态和其他 React 特性。

实例分析：

import React, { useState, useEffect } from 'react';

function MyComponent() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('Component mounted or updated');
    }, [count]);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

4.3 Redux 的使用

Redux 是 React 的状态管理库，用于管理全局状态。

实例分析：

import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        default:
            return state;
    }
}

const store = createStore(reducer);

store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // 输出 { count: 1 }

4.4 React Router 的使用

React Router 是 React 的路由管理器，用于实现单页应用的路由。

实例分析：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function Home() {
    return <h1>Home</h1>;
}

function About() {
    return <h1>About</h1>;
}

function App() {
    return (
        <Router>
            <Switch>
                <Route path="/" exact component={Home} />
                <Route path="/about" component={About} />
            </Switch>
        </Router>
    );
}

4.5 React 组件通信

React 组件通信方式包括：

Props 和 Callback：父组件通过 props 传递数据给子组件，子组件通过回调函数传递数据给父组件。
Context：通过 React.createContext 实现跨组件通信。
Redux：通过全局状态管理实现组件通信。

实例分析：

// 父组件
function Parent() {
    const [message, setMessage] = useState('Hello');

    return (
        <div>
            <Child message={message} onChangeMessage={setMessage} />
        </div>
    );
}

// 子组件
function Child({ message, onChangeMessage }) {
    return (
        <div>
            <p>{message}</p>
            <button onClick={() => onChangeMessage('World')}>Change Message</button>
        </div>
    );
}

5. 性能优化

5.1 前端性能优化策略

前端性能优化策略包括：

减少 HTTP 请求：合并文件、使用 CSS Sprites。
使用 CDN：加速静态资源的加载。
压缩资源：压缩 HTML、CSS、JavaScript 文件。
使用缓存：合理使用浏览器缓存和 CDN 缓存。
懒加载：延迟加载非关键资源。

实例分析：

<!-- 使用 CDN 加载 jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

5.2 懒加载与预加载

懒加载是延迟加载非关键资源，预加载是提前加载关键资源。

实例分析：

<!-- 懒加载图片 -->
<img data-src="image.jpg" class="lazyload" />

<!-- 预加载关键资源 -->
<link rel="preload" href="critical.css" as="style" />

5.3 代码分割与 Tree Shaking

代码分割是将代码拆分成多个小块，按需加载。Tree Shaking 是移除未使用的代码。

实例分析：

// 使用动态导入实现代码分割
import('lodash').then(({ default: _ }) => {
    console.log(_.chunk([1, 2, 3, 4], 2));
});

5.4 缓存策略

合理使用缓存策略可以提升页面加载速度。

**实例分析

web前端常见面试题实例分析

Web前端常见面试题实例分析

目录

1. HTML/CSS 基础

1.1 HTML5 新特性

1.2 CSS 盒模型

1.3 Flexbox 布局

1.4 CSS 选择器优先级

1.5 BFC 是什么？

2. JavaScript 基础

2.1 闭包

2.2 原型链

2.3 事件循环

2.4 Promise 和 async/await

2.5 this 的指向

3. Vue.js

3.1 Vue 的生命周期

3.2 Vue 的响应式原理

3.3 Vuex 的使用

3.4 Vue Router 的使用

3.5 Vue 组件通信

4. React

4.1 React 的生命周期

4.2 React Hooks

4.3 Redux 的使用

4.4 React Router 的使用

4.5 React 组件通信

5. 性能优化

5.1 前端性能优化策略

5.2 懒加载与预加载

5.3 代码分割与 Tree Shaking

5.4 缓存策略

相关阅读