前端核心知识点系统梳理与解析

前端核心知识点系统梳理与解析 | 极客日志

<!-- 非语义化 -->
<div class="header">
  <div class="logo">MySite</div>
  <div class="nav">
    <a href="/">首页</a>
    <a href="/about">关于</a>
  </div>
</div>
<!-- 语义化 -->
<header>
  <h1 class="logo">MySite</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>

/* 标准盒模型 */
.box-standard {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  /* 实际占据宽度 = 100 + 10*2 + 5*2 = 130px */
}
/* IE 盒模型（常用） */
.box-border {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  /* 实际占据宽度 = 100px（包含 padding 和 border） */
}

<div class="container clearfix">
  <div class="float-left">浮动元素</div>
  <div class="float-left">浮动元素</div>
</div>
<style>
.float-left {
  float: left;
  width: 100px;
  height: 100px;
  background: lightblue;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>

<div class="parent" style="position: relative;height: 200px;background: #eee;">
  <div class="child" style="position: absolute;bottom: 10px;right: 10px;">绝对定位</div>
</div>
<div class="sticky" style="position: sticky;top: 0;">粘性头部</div>

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
}
.item {
  flex: 1; /* 等分剩余空间 */
  margin: 10px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
  gap: 10px;
}
.item {
  background: lightcoral;
}
.item:first-child {
  grid-column: 1 / 3; /* 跨两列 */
}

<img srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
     sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
     src="large.jpg" alt="响应式图片">
<style>
.container {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}
</style>

$primary: #007bff;
$spacing: 1rem;

@mixin rounded($radius: 4px) {
  border-radius: $radius;
}

.button {
  background: $primary;
  padding: $spacing/2 $spacing;
  @include rounded(8px);
  &:hover {
    background: darken($primary, 10%);
  }
}

<div class="card">
  <div class="card__header">
    <h2 class="card__title">标题</h2>
  </div>
  <div class="card__body">内容</div>
  <div class="card__footer card__footer--highlighted">底部高亮</div>
</div>
<style>
.card__footer--highlighted {
  background: yellow;
}
</style>

<div style="position: relative;z-index: 1;">
  <div style="position: absolute;z-index: 999;">这个 999 受父级 1 限制</div>
</div>
<div style="position: relative;z-index: 2;">
  <div style="position: absolute;z-index: 1;">这个 1 比上面的 999 大，因为父级 z-index=2 更高</div>
</div>

console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (历史遗留)
console.log(typeof {}); // "object"
console.log(typeof function() {}); // "function"
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object.prototype.toString.call(null)); // "[object Null]"

// 闭包封装私有变量
function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    decrement: () => --count,
    getCount: () => count
  };
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

function Dog(name, breed) {
  Animal.call(this, name); // 借用构造函数
  this.breed = breed;
}

// 原型链继承
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(`${this.name} barks.`);
};

const d = new Dog('Rex', 'Husky');
d.speak(); // Rex makes a sound.
d.bark(); // Rex barks.
console.log(d instanceof Dog); // true
console.log(d instanceof Animal); // true

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };
greet.call(person, 'Hello', '!'); // Hello, Alice!
greet.apply(person, ['Hi', '?']); // Hi, Alice?
const bound = greet.bind(person, 'Hey');
bound('!!'); // Hey, Alice!!

function fetchData(callback) {
  setTimeout(() => {
    callback('data');
  }, 1000);
}
fetchData((result) => {
  console.log(result);
});

function asyncTask(shouldResolve) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      shouldResolve ? resolve('成功') : reject('失败');
    }, 1000);
  });
}

asyncTask(true).then(result => console.log(result)).catch(error => console.error(error));
Promise.all([asyncTask(true), asyncTask(true)]).then(results => console.log('全部成功', results)).catch(err => console.error('至少一个失败', err));

async function fetchData() {
  try {
    const result = await asyncTask(true);
    console.log(result);
    const data = await asyncTask(true);
    console.log(data);
  } catch (error) {
    console.error('捕获错误:', error);
  }
}
fetchData();

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 输出顺序：1, 4, 3, 2

console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise1'));
Promise.resolve().then(() => {
  console.log('promise2');
  setTimeout(() => console.log('timeout inside promise'), 0);
});
console.log('end');
// 输出：start, end, promise1, promise2, timeout, timeout inside promise

const original = { a: 1, b: { c: 2 } };
// 浅拷贝
const shallow = { ...original };
shallow.b.c = 3;
console.log(original.b.c); // 3 (相互影响)
// 深拷贝
const deep = JSON.parse(JSON.stringify(original));
deep.b.c = 4;
console.log(original.b.c); // 3 (独立)

function throttle(fn, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

<input id="search" type="text" placeholder="搜索">
<script>
const input = document.getElementById('search');
input.addEventListener('input', debounce(function(e) {
  console.log('发送请求:', e.target.value);
}, 500));
</script>

// 数组
const arr = [1, 2, 3, 4];
const doubled = arr.map(x => x * 2); // [2, 4, 6, 8]
const evens = arr.filter(x => x % 2 === 0); // [2, 4]
const sum = arr.reduce((acc, cur) => acc + cur, 0); // 10

// 对象
const obj = { a: 1, b: 2 };
Object.keys(obj).forEach(key => console.log(key, obj[key]));
const merged = Object.assign({}, obj, { c: 3 }); // { a: 1, b: 2, c: 3 }

<!-- 模拟阻塞 -->
<script src="slow.js"></script> <!-- 会阻塞后续 DOM 解析 -->
<script async src="async.js"></script> <!-- 下载不阻塞，执行可能乱序 -->
<script defer src="defer.js"></script> <!-- 下载不阻塞，在 DOM 解析完后执行 -->

// 避免多次触发回流
const div = document.getElementById('box');
div.style.width = '100px'; // 回流
div.style.height = '100px'; // 再次回流
// 优化：合并修改
div.style.cssText = 'width: 100px; height: 100px;';
// 或使用 class
div.classList.add('big-box');

// JSONP
function jsonp(url, callbackName) {
  const script = document.createElement('script');
  script.src = `${url}?callback=${callbackName}`;
  window[callbackName] = (data) => {
    console.log('接收数据:', data);
    delete window[callbackName];
    document.body.removeChild(script);
  };
  document.body.appendChild(script);
}
jsonp('http://api.example.com/data', 'handleData');

// CORS: 服务器设置响应头 Access-Control-Allow-Origin: *

# HTTP/2 服务器推送示例（需服务器支持）
# 在响应头中推送关键资源 Link:</styles.css>; rel=preload;as=style

<!-- 通过 meta 禁用缓存（不推荐，用 HTTP 头） -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<!-- 服务器设置强缓存：Cache-Control: max-age=31536000 -->
<!-- 资源通过哈希更新：main.a1b2c3.js -->

// 防御：对用户输入进行转义
function escapeHTML(str) {
  return str.replace(/[&<>"']/g, function(m) {
    if (m === '&') return '&amp;';
    if (m === '<') return '&lt;';
    if (m === '>') return '&gt;';
    if (m === '"') return '&quot;';
    if (m === "'") return '&#39;';
    return m;
  });
}
const userComment = '<script>alert(1)</script>';
document.getElementById('comment').textContent = escapeHTML(userComment);

// 设置 SameSite Cookie
document.cookie = "session=abc123; SameSite=Lax; Secure";

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">反转消息</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
};
</script>

<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0);
function increment() {
  count.value++;
}
onMounted(() => {
  console.log('组件已挂载');
});
</script>

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' }
]);
</script>

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

// 组件中使用
<script setup>
import { useCounterStore } from './stores/counter';
const counter = useCounterStore();
</script>
<template>
  <p>{{ counter.count }}*2={{ counter.double }}</p>
  <button @click="counter.increment">增加</button>
</template>

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

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

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
// main.js 中使用 app.use(router);

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>服务端渲染示例</p>
  </div>
</template>
<script setup>
// 在服务端和客户端都会执行
const { data: title } = await useFetch('/api/title');
</script>

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' })
  ]
};

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: '> 0.25%, not dead' }]
  ],
  plugins: ['@babel/plugin-proposal-optional-chaining']
};

// ES Module 导出
export const name = 'module';
export default function sayHi() {
  console.log('Hi');
}

// 导入
import sayHi, { name } from './module.js';

# 创建功能分支
git checkout -b feature/new-button
# 开发后提交
git add .
git commit -m "add new button"
# 合并到主分支
git checkout main
git merge feature/new-button

name: CI/CD
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm test
      - run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

<!-- 预加载关键样式 -->
<link rel="preload" href="main.css" as="style">
<!-- 预连接第三方域名 -->
<link rel="preconnect" href="https://api.example.com">
<!-- 图片懒加载 -->
<img src="placeholder.jpg" data-src="real.jpg" loading="lazy" alt="...">

/* 使用 will-change */
.animated {
  will-change: transform, opacity;
}

// Vue 路由懒加载
const routes = [{
  path: '/about',
  component: () => import('./views/About.vue')
}];

// Webpack splitChunks
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors'
      }
    }
  }
}

// 使用 Performance API 测量 FCP
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('FCP:', entry.startTime);
  }
}).observe({ type: 'paint', buffered: true });

// 栈应用：括号匹配
function isValid(s) {
  const stack = [];
  const map = { '(': ')', '[': ']', '{': '}' };
  for (let c of s) {
    if (map[c]) {
      stack.push(c);
    } else {
      const top = stack.pop();
      if (map[top] !== c) return false;
    }
  }
  return stack.length === 0;
}
console.log(isValid('()[]{}')); // true

// 快速排序
function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const pivot = arr[0];
  const left = [], right = [];
  for (let i = 1; i < arr.length; i++) {
    arr[i] < pivot ? left.push(arr[i]) : right.push(arr[i]);
  }
  return [...quickSort(left), pivot, ...quickSort(right)];
}
console.log(quickSort([3, 6, 8, 10, 1, 2, 1])); // [1, 1, 2, 3, 6, 8, 10]

// 递归求斐波那契（有大量重复计算，可优化）
function fib(n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
}

// 迭代优化
function fibIter(n) {
  let a = 0, b = 1;
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return n === 0 ? a : b;
}

// 数组扁平化
function flatten(arr) {
  return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}
console.log(flatten([1, [2, [3, 4], 5]])); // [1, 2, 3, 4, 5]

// 函数柯里化
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return (...args2) => curried.apply(this, args.concat(args2));
    }
  };
}
const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6

class EventBus {
  constructor() {
    this.events = {};
  }
  on(event, listener) {
    (this.events[event] || (this.events[event] = [])).push(listener);
  }
  emit(event, data) {
    (this.events[event] || []).forEach(listener => listener(data));
  }
  off(event, listener) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(l => l !== listener);
  }
}

const bus = new EventBus();
bus.on('login', (user) => console.log('登录:', user));
bus.emit('login', { name: 'Alice' });

前端核心知识点系统梳理与解析

前端核心知识点系统梳理与解析

1. HTML & CSS 基础

1.1 语义化 HTML

1.2 盒模型

1.3 布局方式

1.3.1 浮动与清除浮动

1.3.2 定位

1.3.3 Flex 布局

1.3.4 Grid 布局

1.4 响应式设计

1.5 CSS 预处理器

1.6 BEM 命名规范

1.7 层叠上下文与 z-index

2. JavaScript 核心

2.1 数据类型与类型判断

2.2 作用域与闭包

2.3 原型与原型链

2.4 this 指向与 call/apply/bind

2.5 异步编程

2.5.1 回调函数

2.5.2 Promise

2.5.3 async/await

2.6 事件循环与宏任务/微任务

2.7 深拷贝与浅拷贝

2.8 防抖与节流

2.9 数组/对象常用方法

3. 浏览器与网络

3.1 浏览器渲染原理

3.2 回流与重绘

3.3 跨域解决方案

3.4 HTTP 协议

3.5 缓存机制

3.6 Web 安全

3.6.1 XSS（跨站脚本攻击）

3.6.2 CSRF（跨站请求伪造）

4. 前端框架（以 Vue 为例）

4.1 Vue 核心概念

4.2 生命周期与组合式 API

4.3 虚拟 DOM 与 Diff 算法

4.4 状态管理

4.5 路由原理

4.6 服务端渲染（SSR）

5. 工程化与工具

5.1 Webpack 原理与配置

5.2 Babel 原理

5.3 模块化

5.4 Git 工作流

5.5 CI/CD 基础

6. 性能优化

6.1 加载优化

6.2 渲染优化

6.3 打包优化

6.4 性能指标

7. 数据结构与算法（前端常考）

7.1 常见数据结构

7.2 排序算法

7.3 递归与迭代

7.4 常见算法题

8. 设计模式与架构

8.1 常见设计模式

8.2 MVC / MVVM 模式

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具