前端知识点整理

一、HTML 部分

1、HTML 标签语义化优缺点

优点：

1. 使HTML的结构更清晰
2. 代码的可读性较好
3. 代码的可维护性好
4. 搜索引擎可根据标签的语言确定上下文和权重
5. 移动设备的支持度更好 缺点：

• 低版本浏览器存在兼容性问题（例如 IE9 以下浏览器）

2、HTML5 新特性

2.1、新增的常用标签

• header、nav、article、footer、section、aside、audio(音频)、video(视频)、embed、canvas、svg等
• 参考链接：HTML 标签参考手册

2.2、新增的常用属性

• input的属性值：calendar、date、time、email、url、search
• hidden、draggable等
• 参考链接： HTML 5 标准属性

2.3、新增的 API

1. 本地存储:

• localStorage： 永久保存(需要手动清除)，大小5M，不能与服务器进行交互
• sessionStorage： 临时保存(直到浏览器关闭为止)，大小5M，不能与服务器进行交互
• 与cookie的区别： cookie能与服务器进行交互（存在安全问题），存储大小比较小（只有4k），可设置过期时间

1. websocket： 是一种在单个TCP连接上进行全双工通信的协议，让客户端和服务端之间可进行实时通信

• 参考链接：WebSocket 教程

1. Geolocation： navigator的一个属性，可以获取和监听设备的定位信息（经纬度）

• 参考链接：Geolocation 文档

1. webworker：

• 在Javascript单线程执行的基础上，开启一个子线程，进行程序处理，而不影响主线程的执行，当子线程执行完毕之后再回到主线程上，在这个过程中并不影响主线程的执行过程，也相当于在浏览器端实现多线程
• 主要是用于创建一个新线程来加载javascript的文件资源
• 参考链接：Web Worker 详细介绍

二、CSS 部分

1、CSS3 新特性

1. 边框；border-radius(圆角)、border-image(图片)、border-shadow(阴影)等等
2. 文字效果：text-justify(对齐方式)、text-shadow(阴影)、text-wrap(换行)等等
3. 过度(transition)
4. 动画(animation)
5. 计算属性(calc)
6. 伪类：nth-child、nth-of-type等
7. ...

• 参考链接：css3之新增伪类
• 参考链接：css3新增属性有哪些？
• 参考链接：个人总结（css3新特性）

2、常见的布局方式

1. 弹性布局(flex)
2. 流式布局(百分比布局)
3. 响应式布局(使用媒体查询让一套代码适配多种设备终端)
4. rem布局(通过设置html根节点的font-size大小实现)
5. bfc布局
6. 瀑布流布局
7. 双飞翼布局
8. ...

• 参考链接：前端常见的布局方案大全
• 参考链接：超详细常用css布局
• 参考链接：面试常见css布局以及解决方法
• 参考链接： 什么是BFC？看这一篇就够了

3、盒子模型

• W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。

• IE 盒模型：属性width,height包含border和padding，指的是content+padding+border。

参考链接：CSS盒模型详解

三、JS 部分

1、原型

可以通过构造函数，生成一个新的对象的对象，就是原型，即原型的对象

2、原型链

调用原型上定义的属性，会沿着__proto__这条链往上查找，直到查找到 null 为止，这条链就叫原型链

3、作用域

有全局作用域和局部作用域，局部作用域分为块级作用域和函数作用域（函数在定义的时候，不是调用的时候，就已经确定了函数体内部自由变量的作用域，所以自由变量的作用域需要到创建这个函数的作用域下去寻找）

4、作用域链

在局部作用域中使用的自由变量，就是通过一级一级往上找的，这个查找的过程就是作用域链

5、执行上下文环境

在执行代码之前，把将要用到的所有的变量都事先拿出来，有的直接赋值了，有的先用undefined占个空。函数每次调用都会生成一个执行上下文环境

• 全局上下文：变量声明，函数声明，this赋值
• 函数上下文：变量声明，函数声明，this赋值，参数赋值，arguments赋值，自由变量的取值作用域

参考链接：深入理解javascript原型和闭包

6、Promise

// 1、promise 有几种状态？  
// 答：3种，pending、resolved、rejected

// 2、promise 的状态是否可变？
// 不可变

// 3、promise 如何解决地狱回调？
// 通过then链式调用来解决
复制代码

7、类继承

类继承可以使子类的实例使用在父类中定义的属性和方法

参考链接：js类的继承，es5和es6的方法

8、闭包

简单的说，闭包就是定义在函数内部的函数，是将函数内部和函数外部连接起来的桥梁，闭包还包含自由变量，这些自由变量是在闭包的的执行上下文环境中定义的

• 缺点：长时间占用内存可能导致内存泄露
• 优点：可做性能优化，延长外部函数局部变量生命周期，例如：节流、防抖

释放内存的方式：

参考链接：ECMAScript 6 - 阮一峰

9、深拷贝、浅拷贝

• 浅拷贝：是指对象复制的时候只复制一层。
• 深拷贝：是指复制对象的所有层级。

function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if (obj && typeof obj ==="object") {
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                //判断ojb子元素是否为对象，如果是，递归复制
                if (obj[key]&&typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

JSON.parse(JSON.stringify(obj))
复制代码

深拷贝和浅拷贝，主要是对象发生复制的时候，根据复制的层级不同来区分的。很多人在这里经常变量赋值发生混淆。对于JavaScript数组等复杂的数据类型来说，将其赋值给其它变量，其实只是复制了对象的地址给它，两个变量指向的是同一个对象，因此普通的赋值既不是深拷贝也不是浅拷贝。

深拷贝和浅拷贝需要注意的地方就是可变元素的拷贝： 在浅拷贝时，拷贝出来的新对象的地址和原对象是不一样的，但是新对象里面的可变元素（如列表）的地址和原对象里的可变元素的地址是相同的，也就是说浅拷贝它拷贝的是浅层次的数据结构（不可变元素），对象里的可变元素作为深层次的数据结构并没有被拷贝到新地址里面去。

而是和原对象里的可变元素指向同一个地址，所以在新对象或原对象里对这个可变元素做修改时，两个对象是同时改变的，但是深拷贝不会这样，这个是浅拷贝相对于深拷贝最根本的区别。

10、冒泡排序

function handlerSort(arr) { 
    for (let i = 0; i < arr.length - 1; i ++) { 
        for (let j = 0; j < arr.length - i -1; j ++) {
            if (arr[j] > arr[j + 1]) { 
                let tempt = arr[j]; 
                arr[j] = arr[j + 1]; 
                arr[j + 1] = tempt 
            } 
        } 
    } 
    
    return arr; 
}

复制代码

四、浏览器

1、主流浏览器内核

• 谷歌浏览器：以前是Webkit内核，现在是Blink内核。
• 火狐浏览器：Gecko内核，俗称Firefox内核。
• 欧鹏浏览器：最初是自己的Presto内核，后来是Webkit，现在是Blink内核。
• 苹果浏览器：Webkit内核。
• IE浏览器：IE4以上版本都是Trident内核。

2、事件循环（Event loop）

参考链接：事件循环机制（event loop）

参考链接：浏览器事件循环机制——浏览器事件环

参考链接：浏览器事件循环机制

3、输入url后浏览器做了什么工作

参考链接：前端经典面试题之一(浏览器输入url按下回车后发生了什么)

参考链接：「一道面试题」输入URL到渲染全面梳理中-页面渲染篇 - 掘金 (juejin.cn)

参考链接：「自我检验」输入URL发生了啥？希望你顺便懂这15个知识点 - 掘金 (juejin.cn)

4、垃圾回收机制

参考链接：「硬核JS」你真的了解垃圾回收机制吗 - 掘金 (juejin.cn)

参考链接：浏览器中的垃圾回收与内存泄漏 - 掘金 (juejin.cn)

参考链接：前端面试常考题：JS垃圾回收机制 - 掘金 (juejin.cn)

5、跨域方式

参考链接：10种跨域解决方案（附终极大招） - 掘金 (juejin.cn)

6、状态码

1xx：是预留给协议的
2xx：是表示请求成功的
3xx：是表示重定向的
4xx：是客户端错误的
5xx：是服务器端错误的

参考链接：浏览器对于常见HTTP状态码的反应

参考链接：浏览器状态码含义

7、什么是BOM

• BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

参考链接： BOM主要对象属性方法总结

五、vue

1、生命周期

参考链接：Vue生命周期详解

2、路由生命周期

参考链接： Vue - 路由守卫（路由的生命周期）

参考链接：# Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

3、指令和修饰符

参考链接：VUE指令与修饰符

3、组件间传值方式

参考链接：[juejin.cn/post/688439… Vue 总结：组件间的通讯方式（父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参）)

4、双向绑定原理

参考链接：Vue双向绑定原理，教你一步一步实现双向绑定

5、vue3 和 vue2的区别

参考链接：Vue3对比Vue2

参考链接：一文搞懂Vue2和Vue3的Proxy

参考链接：Vue3 的响应式和以前有什么区别，Proxy 无敌？

6、diff算法

参考链接：【Vue原理】Diff - 白话版 参考链接：详解vue的diff算法

7、watch原理

参考链接：【Vue原理】Watch - 白话版

8、computed 原理

参考链接：【Vue原理】Computed - 源码版

六、webpack

1、常用插件

参考链接：面试官常问的那些webpack插件-超详细总结

2、打包速度优化

参考链接：提升webpack打包速度的方法

参考链接：当面试官问Webpack的时候他想知道什么 | 微信开放社区 (qq.com)

参考链接：面试官问 Vue 性能优化，我该怎么回答_程序员黑叔的博客-CSDN博客

参考链接：我在面试时是如何回答“前端性能优化”的 - 七尚 - 博客园 (cnblogs.com)

参考链接：vue项目首屏加载优化实战 - 面包大虾 - 博客园 (cnblogs.com)

七、小程序

1、生命周期

参考链接：小程序（四）小程序生命周期

参考链接：小程序 — 小程序生命周期及页面生命周期

2、分包

参考链接：分包加载-小程序文档

八、docker

1、镜像相关常用命令

• 查看镜像：查看本地所有的镜像 docker images

docker images -q // 查看所有镜像的id

• 搜索镜像：从网络中查找需要的镜像 docker search 镜像名称 // 也可通过 hub.docker.com 查找

• 拉取镜像：从 Docker 仓库下载镜像到本地，镜像名称格式为 名称:版本号，如果版本号不指定则是最新的版本，如果不知道镜像镜像版本，可以去docker hub搜索对应镜像查看 docker pull 镜像名称

• 删除镜像：删除本地镜像 docker rmi 镜像id // 删除指定本地镜像

docker rmi 'docker images -q' // 删除所有本地镜像

2、容器相关常用命令

• 查看容器 docker ps // 查看正在运行的容器

docker ps -a // 查看所有容器

docker ps -q // 查看所有容器id

• 创建并启动容器 docker run 参数

参数说明：

-i：保持容器运行，通常与 -t 同时使用，加入 it 这两个参数后，容器创建后自动进入容器中，退出容器后，容器自动关闭.
-t：为容器分配一个伪输入终端，通常与 -i 同时使用。
-d：以守护（后台）模式运行容器。创建一个容器后在后台运行，需要使用 docker exec 进入容器。退出后，容器不会关闭。
-it：创建的容器一般被称为交互式容器，-id 创建的容器一般被称为守护式容器。
--name：为创建的容器名。

例如：docker run -it --name=c1 centos:7.9.2009 /bin/bash
复制代码

• 进入容器 docker exec 参数 // 进入容器，退出容器后，容器不会关闭

• 停止容器 docker stop 容器名称/容器id

• 启动容器 docker start 容器名称/容器id

• 删除容器：如果容器是运行状态则删除失败，需要停止容器才能删除，可通过 -f 参数强行删除 docker rm 容器名称/容器id

• 查看容器信息 docker inspect 容器名称/容器id

• 绑定数据卷 docker run -id --name=c1 -v 宿主主机目录:容器目录 镜像名:版本号

• 数据卷容器 docker run -id -v 宿主目录 --name=c1 镜像名称:版本号

docker run -id --name=c2 --volumes-from c1 镜像名称:版本号

• 容器转镜像 docker commit 容器id 生成的镜像名:版本号

• 生成镜像压缩文件 docker sava -o 压缩文件名称 镜像名称:版本号

• 安装本地镜像压缩文件 docker load -i 压缩文件名称

• 通过dockerfile生成镜像 docker build -f dockerfile文件地址 -t 生成的镜像名称:版本号

• 创建私有仓库 docker pull registry

docker run -id --name=registry -p 5000:5000 registry

打开浏览器：输入http://ip:5000/v2/_catalog

修改daemon.json

vim /etc/docker/daemon.json

["insecure-registries": ["私有仓库服务器ip:5000"]] // 信任

systemctl restart docker // 重启docker服务

注意：window系统可以在docker可视化软件上操作

• 标记镜像为私有仓库的镜像 docker tag centos:7 私有仓库服务器IP:5000/cento:7

• 上传标记的镜像 docker push 私有仓库服务器IP:5000/centos:7

• 下载标记的镜像
  docker pull 私有仓库服务器IP:5000/centos:7

参考链接：docker run 和 docker exec 的差异

九、jenkins

参考链接: Jenkins简介