文章目录
- 1. 浏览器篇
- 1.1 常用那几种浏览器测试？主流浏览器的内核有哪些？
- 1.2 说说你对浏览器内核的理解？
- 1.3 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- 1.4 浏览器缓存
- 1.5. HTTP
- 1.5.1 http状态码
- 1.5.2 URL和URI有什么区别？
- 1.5.3 HTTP和HTTPS的区别
- 2. HTML篇
- 2.1 Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型
- 2.2 说说你对语义化的理解？
- 2.3 HTML与XHTML有什么区别?
- 2.4 页面导入样式时，使用link和@import有什么区别？
- 2.5 HTML5有哪些新特性？
- 2.6 iframe的优缺点？
- 2.7 img中的alt与title属性
- 2.8 HTML 的中，如何写一个值为 “a”=‘b’ 的属性值？
- 3. CSS篇
- 3.1 行内元素有哪些？块级元素有哪些？CSS的盒模型？
- 行内元素（Inline Elements）:
- 块级元素（Block Elements）:
- CSS盒模型（CSS Box Model）:
- 3.2 清除浮动有哪些方式？
- 3.3 CSS选择符都有哪些？哪些属性可以继承？优先级算法如何计算？
- CSS选择符（选择器）类型：
- 可继承的CSS属性：
- CSS优先级算法：
- 3.4 CSS3新增伪类有哪些？
- 3.5 CSS3中的伪类：:not() 有什么特别的用途吗？
- 3.6 如何居中div？
- 水平居中
- 垂直居中
- 水平和垂直居中
- 3.7 为什么要初始化CSS?
- 3.8 说说你对BFC规范的理解？
- 3.9 讲讲 position float display 各有哪些取值，它们互相之间会如何影响？
- 1. position 属性
- 2. float 属性
- 3. display 属性
- 互相影响
- 3.10 纯CSS实现三角形
- 3.11 CSS Reset 和 有什么区别，我应该如何选择？
- 4. JS篇
- 4.1 面向对象
- 4.2 什么是闭包？闭包的特性是什么？
- 4.3 继承
- 4.4 DOM操作（添加、移除、移动、复制、创建和查找节点）
- 4.5 介绍一下new 操作符。New操作符具体干了什么？
- 4.6 HTML5离线存储
- 4.7 JS的数据类型
- 4.8 null和undefined的区别
- 4.9 call()和apply()的区别
- 4.10 深拷贝和浅拷贝
- 4.11 ajax
- 4.12 数组去重
- 4.13 this对象
- 4.14 eval()
- 4.15 什么是UA?
- 4.16 什么是事件委托？
- 4.17 promise
- 4.18 和的区别？哪一个先执行？
- 4.19 var、let和const有什么区别
- 4.20 JavaScript 启动后，内存中有多少个对象？如何用代码来获得这些信息？
- 5. 前端安全问题
- 5.1 XSS
- 5.2 CSRF
- 6. 跨域
- 6.1 什么是跨域？
- 6.2 什么是同源策略？
- 6.3 解决跨域的方法有哪些？
- 7. 性能优化
- 7.1 你都用过那种性能优化的方法？
- 7.2 CSS Sprite是什么，谈谈这个技术的优缺点
- 8. Vue篇
- 8.1 是什么？
- 8.的核心特性有哪些？
- 8.3 请简述Vue的响应式数据绑定原理。
- 8.4 Vue组件间通信有哪些方式？
- 8.5 Vue的生命周期钩子有哪些？
- 8.6 什么是Vue的计算属性（computed properties）？
- 8.7 Vue的v-model指令如何工作？
- 8.8 Vue的指令有哪些，它们是如何被解析和执行的？
- 8.9 请解释Vue的slot元素及其作用。
- 8.10 Vue CLI是什么？它提供了哪些功能？
- 8.11 Vue Router是什么？它是如何实现页面路由的？
- 8.12 Vuex是什么？它如何帮助管理应用的状态？
- 8.13 请描述Vue中的虚拟DOM和实际DOM的区别。
- 8.14 Vue的keep-alive指令是做什么用的？
- 8.15 如何优化Vue应用的性能？
- 8.16 Vue 3.0带来了哪些新特性？
- 8.17 请解释什么是组件的v-if和v-for指令，以及它们的区别。
- 8.18 Vue的SSR（服务端渲染）是如何工作的？
- 8.19 请解释Vue组件的props和事件。
- 8.20 Vue的自定义指令如何创建和使用？
- 篇
- 什么是Hook?
- 为什么在 React 中加入 Hook?
- 10. Angular篇
- 11.其他
- 11.1 后台系统的权限控制与管理
写在最开始：
工作以来，感觉自己会的东西还算多，但是面试时就答不出来、答不全面，究其原因，则是自己从来没有认真深挖、整理所有的知识点，每个知识点，都只是了解了皮毛，所以还是决定从今天开始，重新学习，并记录重要的知识点。
1. 浏览器篇
1.1 常用那几种浏览器测试？主流浏览器的内核有哪些？
Q1：IE、Safari、Chrome、Mozilla Firefox、Opera
Q2:
1、Trident内核
代表产品为Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎 。
2、Gecko内核
代表作品为Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎，是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox。
3、WebKit内核
代表作品有Safari、Chrome。WebKit是一个开源项目，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。
4、Presto内核
代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
1.2 说说你对浏览器内核的理解？
浏览器内核主要包括以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其他。
排版渲染引擎：主要负责取得网页的内容(HTML、XML、图像等)、整理信息，以及计算网页的显示方式，然后输出至显示器
JavaScript引擎：是用来渲染JavaScript的，JavaScript的渲染速度越快，动态网页的展示也越快
1.3 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；
2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手
a.客户端向服务器发送一个建立连接的请求
b.服务器接到请求后发送同意连接的信号
c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功
3.浏览器发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：
a…服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
b.服务器将得到的 HTML 文件发送给浏览器；
c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。
5.断开连接
1.4 浏览器缓存
优点：可以临时存储，关闭页面标签自动回收，不支持跨页面交互
缺点：只能作为临时存储，不能存储持久化
优点：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
缺点：存在大小限制，IE8以上的IE版本才支持这个属性；目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
优点：兼容性最好，几乎所有的浏览器都支持
缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法性验证都是用cookie验证的
优点：出现的时间比sessionStorage要早
缺点：IE专门的存储方式，存储大小有限，单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB
1.5. HTTP
1.5.1 http状态码
- 以
2xx为开头的都表示请求成功响应.
| 状态码 | 含义 |
|---|---|
| 200 | 请求成功 |
| 204 | 请求处理成功，但是没有资源可以返回 |
| 206 | 对资源某一部分进行响应，由Content-Range 指定范围的实体内容。 |
- 以
3xx为开头的都表示需要进行附加操作以完成请求
| 状态码 | 含义 |
|---|---|
| 301 | 永久性重定向，该状态码表示请求的资源已经重新分配 URI，以后应该使用资源现有的 URI |
| 302 | 临时性重定向。该状态码表示请求的资源已被分配了新的 URI，希望用户（本次）能使用新的 URI 访问。 |
| 303 | 该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。 |
| 304 | 该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。 |
| 307 | 临时重定向。该状态码与 302 Found 有着相同的含义。 |
- 以 4xx 的响应结果表明客户端是发生错误的原因所在。
| 状态码 | 含义 |
|---|---|
| 400 | 该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。 |
| 401 | 该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息。 |
| 403 | 该状态码表明对请求资源的访问被服务器拒绝了。 |
| 404 | 该状态码表明服务器上无法找到请求的资源。 |
- 以 5xx 为开头的响应标头都表示服务器本身发生错误
| 状态码 | 含义 |
|---|---|
| 500 | 该状态码表明服务器端在执行请求时发生了错误。 |
| 503 | 该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。 |
1.5.2 URL和URI有什么区别？
URI是统一资源标识符，相当于一个人身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。
URL 是统一资源定位符，相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等
1.5.3 HTTP和HTTPS的区别
- HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用
- HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
- HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
- HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
2. HTML篇
2.1 Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型
1. Doctype作用
告知浏览器的解析器用什么文档标准解析这个文档。
2. 标准模式与兼容模式各有什么区别?标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。
3. 你知道多少种Doctype文档类型
HTML 4.01中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）
2.2 说说你对语义化的理解？
语义化的优点有:
- 代码结构清晰，易于阅读，利于开发和维护
- 提高用于体验，在样式加载失败时，页面结构清晰
- 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
- 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
语义化标签主要有
title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark
2.3 HTML与XHTML有什么区别?
-
其基础语言不同
1、XHTML是基于du可扩展标记语言（XML）。
2、HTML是基于标准通用标记语言（SGML）。 -
语法严格程度不同
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。 -
可混合应用不同
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。 -
大小写敏感度不同
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。 -
公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。
2.4 页面导入样式时，使用link和@import有什么区别？
1 属性差别。link属于XHTML标签，而@import完全是CSS提供的语法规则。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.
3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
2.5 HTML5有哪些新特性？
- 语义化标签
语义化标签使得页面的内容结构化，见名知义
| 标签 | 描述 |
|---|---|
<header></header> |
定义了文档的头部区域 |
<footer></footer> |
定义了文档的尾部区域 |
<nav></nav> |
定义文档的导航 |
<section></section> |
定义文档中的节（section、区段） |
<article></article> |
定义页面独立的内容区域 |
<aside></aside> |
定义页面的侧边栏内容 |
<detailes></detailes> |
用于描述文档或文档某个部分的细节 |
<summary></summary> |
标签包含 details 元素的标题 |
<dialog></dialog> |
定义对话框，比如提示框 |
- 增强型表单
新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
| 输入类型 | 描述 |
|---|---|
| color | 主要用于选取颜色 |
| date | 从一个日期选择器选择一个日期 |
| datetime | 选择一个日期（UTC 时间） |
| datetime-local | 选择一个日期和时间 (无时区) |
| 包含 e-mail 地址的输入域 | |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 一定范围内数字值的输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话号码字段 |
| time | 选择一个时间 |
| url | URL 地址的输入域 |
| week | 选择周和年 |
| 新增表单元素： |
| 表单元素 | 描述 |
|---|---|
<datalist> |
元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定 |
<keygen> |
提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。 |
<output> |
用于不同类型的输出 |
| 新增表单属性 |
- placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
- required 属性，是一个 boolean 属性。要求填写的输入域不能为空
- pattern 属性，描述了一个正则表达式用于验证 元素的值。
- min 和 max 属性，设置元素最小值与最大值。
- step 属性，为输入域规定合法的数字间隔。
- height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
- autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
- multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。
- 新增视频 和音频 标签
- Canvas绘图
- SVG绘图
- 地理定位
- 拖放API
- Web Worker
- Web Storage
- WebSocket
2.6 iframe的优缺点？
优点：
能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。缺点：
1.会产生很多页面，不容易管理。
框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
框架页面会增加服务器的http请求，对于大型网站是不可取的。
2.7 img中的alt与title属性
alt是图片加载失败时，显示在网页上的替代文字；
title是鼠标放在图片上面时显示的文字，title是对图片的描述与进一步说明；
alt是img必要的属性，而title不是；
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要的文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里进一步对图片说明。
2.8 HTML 的中，如何写一个值为 “a”=‘b’ 的属性值？
在HTML中，属性值应该被引号包围。等号“=”用于分隔属性名和属性值。当属性值本身包含引号时，你可以使用不同类型的引号来避免冲突。例如，你可以使用单引号包围属性值，其中属性值本身包含双引号：
<element attribute-name='"a"="b"'></element>
或者，使用双引号包围属性值，其中属性值本身包含单引号：
<element attribute-name="'a'='b'"></element>
如果你需要在HTML中表示一个等于 a=‘b’ 的属性，你可以这样写：
<element attribute-name="'a'='b'"></element>
请注意，这种做法不符合HTML规范，并且可能会导致浏览器解析错误或在使用某些库解析此HTML时产生错误。通常，应避免在HTML属性中包含复杂的JavaScript表达式。
3. CSS篇
3.1 行内元素有哪些？块级元素有哪些？CSS的盒模型？
行内元素（Inline Elements）:
行内元素不会以新行开始，也不会扩展其父元素的整个宽度。它们通常用于文本内容的一小部分，如强调或小范围的格式化。一些常见的行内元素包括：
-
<span>：用于对文本的一小部分进行标记。 -
<a>：定义超链接。 -
<strong>：表示文本内容的强烈重要性。 -
<em>：表示文本内容的强调。 -
<img>：嵌入图像。 -
<input>：定义输入字段。 -
<label>：定义标签。 -
<script>：定义客户端脚本。 -
<textarea>：定义文本区域。
块级元素（Block Elements）:
块级元素开始于新行，并且其宽度默认填满父元素的宽度。它们通常用于定义页面的结构或大块内容的布局。一些常见的块级元素包括：
-
<div>：块级容器，用于组织内容或布局。 -
<p>：定义段落。 -
<header>：定义文档或部分的页眉。 -
<footer>：定义文档或部分的页脚。 -
<section>：定义文档中的一个区段。 -
<article>：定义独立的自包含内容。 -
<aside>：定义与页面内容略微相关的侧边栏内容。 -
<nav>：定义导航链接的容器。 -
<ul>、<ol>和<li>：定义无序列表、有序列表和列表项。 -
<table>：定义表格。 -
<fieldset>：定义一组相关表单元素。
CSS盒模型（CSS Box Model）:
CSS盒模型是CSS中用于设计和布局的基本概念，它描述了元素在页面上是如何被渲染的。盒模型包括以下几个部分：
- 内容（Content）：元素的实际内容，显示文本或图片等。
- 内边距（Padding）：内容与边框之间的空间，它是透明的并包含在元素的宽度和高度中。
- 边框（Border）：围绕内边距和内容的线，可以设置其粗细、样式和颜色。
- 外边距（Margin）：元素与其他元素之间的空间，位于边框的外围。
盒模型的总宽度可以通过以下公式计算：
总宽度=内容宽度+左内边距+右内边距+左边框宽度+右边框宽度+左外边距+右外边距
3.2 清除浮动有哪些方式？
-
使用额外的清除元素：
在浮动元素后面添加一个额外的块级元素，并使用clear属性来清除浮动。这个属性可以设置为left、right、both，表示清除左浮动、右浮动或两边的浮动。.clear { clear: both; } -
使用父元素的
overflow属性：
给包含浮动元素的父容器设置overflow属性为hidden或auto。这种方法在某些情况下可以清除浮动，但在IE6中可能有问题。.parent { overflow: auto; /* 或 hidden */ } -
使用伪元素（CSS3方法）：
使用:after或:before伪元素和clear属性来清除浮动。这种方法不需要添加额外的元素。.parent::after { content: ""; display: table; clear: both; } -
使用块级格式化上下文（BFC）：
创建一个新的块级格式化上下文（BFC），可以阻止浮动元素的外边距合并。这可以通过设置overflow为非visible值来实现。.parent { overflow: auto; /* 或 hidden */ } -
使用
clearfix类：clearfix是一个常用的技巧，通过在父元素上添加一个clearfix类来清除浮动。这个类通常使用伪元素来实现。.clearfix::after { content: ""; display: table; clear: both; } -
使用Flexbox：
如果布局允许，可以使用Flexbox布局来避免浮动。Flexbox提供了更灵活的布局方式，可以很容易地对齐和分布元素。.parent { display: flex; } -
使用Grid布局：
CSS Grid布局是一种新的布局系统，也可以用于避免浮动。它提供了一种在二维空间内对齐和分布元素的方法。.parent { display: grid; } -
使用浮动的父元素：
在某些情况下，将父元素也设置为浮动可以解决问题，但这可能会影响其他布局。
3.3 CSS选择符都有哪些？哪些属性可以继承？优先级算法如何计算？
CSS选择符（选择器）类型：
CSS 提供了多种类型的选择器来指定样式的应用目标：
-
元素选择器（Type Selector）：根据HTML元素类型选择元素，例如
p选择所有<p>标签。 -
类选择器（Class Selector）：使用
.后跟类名选择具有特定类的元素，例如.important选择所有具有class="important"的元素。 -
ID选择器（ID Selector）：使用
#后跟ID名选择页面上具有特定ID的单一元素，例如#header选择的元素。 -
属性选择器（Attribute Selector）：根据元素属性和属性值选择元素，例如
[type="text"]选择所有type属性为"text"的元素。 -
后代选择器（Descendant Selector）：选择作为某元素后代的所有元素，例如
div p选择所有在<div>内的<p>元素。 -
子选择器（Child Selector）：使用
>选择某个元素的直接子元素，例如ul > li选择所有直接在<ul>内的<li>元素。 -
兄弟选择器（Sibling Selector）：
- 相邻兄弟选择器（Adjacent Sibling Selector）：使用
+选择紧接在另一元素后的元素，例如h1 + p选择直接跟在<h1>后的<p>元素。 - 通用兄弟选择器（General Sibling Selector）：使用
~选择所有先前元素的同级元素，例如h1 ~ p选择所有在<h1>之后的所有<p>元素。
- 相邻兄弟选择器（Adjacent Sibling Selector）：使用
-
伪类选择器（Pseudo-class Selector）：选择处于特定状态的元素，例如
:hover、:active、:focus等。 -
伪元素选择器（Pseudo-element Selector）：选择元素的特定部分，例如
::before和::after可用于在元素内容前后插入内容。 -
通配符选择器（Universal Selector）：使用
*选择所有元素。
可继承的CSS属性：
一些CSS属性可以被子元素继承，包括但不限于：
colorfont-familyfont-sizefont-weightfont-styleline-heightletter-spacingtext-aligntext-indentvisibilitywhite-space
CSS优先级算法：
CSS选择符的优先级（也称为特异性）决定了当多个样式规则应用于同一元素时，哪个规则将被应用。以下是决定优先级的规则：
- 内联样式：直接在HTML元素上设置的样式具有最高优先级。
- ID选择器：每个ID选择器计为 0,0,1。
- 类选择器、属性选择器和伪类：每个类选择器、属性选择器或伪类计为 0,1,0。
- 元素选择器和伪元素：元素选择器和伪元素不增加前两个数字，只增加第三个数字。
- 继承：继承的样式没有优先级，如果存在冲突，将被其他规则覆盖。
-
!important规则：如果样式规则包含
!important声明，它将覆盖其他所有规则，除非另一个!important规则具有更高的优先级。
优先级计算方法通常是比较每个选择器的ID、类/属性/伪类和元素/伪元素的数量。选择器越具体，其优先级就越高。如果优先级相同，则最后定义的规则将被应用。
此外，来自同一来源的样式（例如，同一样式表）将根据它们在文档中出现的顺序解析，后面的规则将覆盖前面的规则。如果样式来自不同的来源（如外部样式表和内联样式），则通常内联样式的优先级高于外部样式表。
3.4 CSS3新增伪类有哪些？
- :nth-child(n)：选择作为其父元素的第n个子元素的元素。
- :nth-last-child(n)：选择作为其父元素的倒数第n个子元素的元素。
- :nth-of-type(n)：选择作为特定类型元素的第n个兄弟元素。
- :nth-last-of-type(n)：选择作为特定类型元素的倒数第n个兄弟元素。
- :first-of-type：选择作为其父元素中第一个特定类型元素的元素。
- :last-of-type：选择作为其父元素中最后一个特定类型元素的元素。
- :only-of-type：选择作为其父元素中唯一的特定类型元素的元素。
- :only-child：选择作为其父元素中唯一的子元素的元素。
- :empty：选择没有子元素的元素。
- :target：选择当前活动的URL片段标识符对应的元素。
- :enabled：选择可用的表单元素。
- :disabled：选择禁用的表单元素。
- :checked：选择被选中的radio或checkbox元素。
- :not(selector)：否定伪类，选择不匹配给定选择器的元素。
- :root：选择文档的根元素，通常是HTML元素。
- :indeterminate：选择一个不确定状态的复选框或单选按钮。
- :default：选择默认的按钮元素，如提交按钮。
- :in-range 和 :out-of-range：选择输入值在指定范围内或范围外的输入元素。
- :required 和 :optional：选择表单中需要或不需要填写的输入元素。
- :valid 和 :invalid：选择输入值有效或无效的输入元素。
3.5 CSS3中的伪类：:not() 有什么特别的用途吗？
CSS3中的伪类 :not() 是一个否定伪类，它具有独特的用途，主要表现在以下几个方面：
-
排除特定选择器：
:not()允许开发者指定一个选择器，然后从一组元素中排除掉匹配该选择器的元素。这意味着你可以对几乎所有元素应用样式，但同时排除那些你不想影响的元素。 -
简化CSS选择：在没有
:not()的情况下，要实现类似的效果可能需要编写多个选择器和使用多个否定符号。:not()的存在简化了这些情况，使得CSS更简洁、更易于阅读和维护。 -
提高样式的灵活性：
:not()提供了一种灵活的方式来定义样式规则，特别是当你想要对一个元素组中的大多数元素应用样式，但需要对其中的一小部分元素进行特殊处理时。 -
组合使用其他伪类：
:not()可以与其他伪类结合使用，如:nth-child()、:first-child、:last-child等，来创建更具体的选择器，实现更复杂的样式规则。 -
实现复杂的布局：在一些复杂的布局设计中，
:not()可以帮助开发者排除某些元素，以便它们不受全局样式的影响，这对于实现特定的设计效果非常有用。 -
增强可访问性：在某些情况下，
:not()可以用来增强网页的可访问性，例如，通过排除某些对屏幕阅读器用户不友好的元素。 -
响应动态内容变化：
:not()可以用于响应由JavaScript或其他客户端脚本动态添加或修改的类，因为它允许开发者根据元素的当前状态来应用样式。
使用:not()伪类时，你可以将其放在任何标准CSS选择器之前，以排除那些你不想匹配的元素。例如：
/* 选择所有的段落，除了类名为"highlight"的段落 */
p:not(.highlight) {
color: #333;
}
这个例子中，所有没有 highlight 类的 <p> 元素都将应用 color: #333; 样式，而具有 highlight 类的 <p> 元素则不会被这个规则影响。
3.6 如何居中div？
水平居中
-
使用文本对齐（Inline Block）:
如果你的div显示为内联块（display: inline-block;），你可以使用text-align: center;来居中它的文本内容。.parent { text-align: center; } .child { display: inline-block; } -
使用Flexbox:
使用CSS的Flexbox布局模型，可以很容易地实现水平居中。.parent { display: flex; justify-content: center; } -
使用绝对定位和负边距:
如果你知道div的宽度，你可以使用绝对定位和负边距来居中它。.parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); }
垂直居中
-
使用Flexbox:
同样使用Flexbox，可以很容易地实现垂直居中。.parent { display: flex; align-items: center; justify-content: center; /* 如果同时需要水平居中 */ } -
使用绝对定位和transform:
使用绝对定位和transform属性也可以实现垂直居中。.parent { position: relative; height: 100vh; /* 父元素高度 */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
水平和垂直居中
结合上述方法，你可以同时实现水平和垂直居中：
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保父元素有一个高度 */
}
.child {
/* 子元素的宽度和高度根据需要设置 */
}
3.7 为什么要初始化CSS?
初始化CSS（也称为CSS Reset或）是前端开发中常见的做法，它具有以下几个主要目的：
-
一致的样式表现：不同的浏览器对HTML元素有不同的默认样式，这可能导致在不同浏览器中页面显示不一致。初始化CSS通过定义统一的样式规则，确保所有浏览器中元素的样式表现一致。
-
减少冗余代码：通过预先设置一些通用的样式规则，开发者可以减少在其他CSS文件中重复编写这些规则的次数，从而提高开发效率。
-
避免意外的继承：CSS的继承机制可能导致子元素意外地继承了父元素的样式，这可能不是开发者所期望的。初始化CSS可以清除或统一这些默认样式，避免意外继承。
-
提高页面性能：通过减少浏览器的渲染时间，初始化CSS有助于提高页面加载和渲染的性能。
-
简化开发流程：使用初始化CSS可以简化开发流程，因为开发者可以依赖一套预定义的样式规则，而不需要每次都从零开始。
-
增强可维护性：初始化CSS为项目提供了一个统一的起点，使得代码更加整洁和可维护。
-
适应不同的布局需求：有些布局技术（如Flexbox或Grid）可能需要特定的盒模型设置，初始化CSS可以确保这些布局技术能够按预期工作。
-
避免全局样式污染：在大型项目中，多个组件或模块可能会使用不同的样式，初始化CSS有助于避免全局样式影响到这些局部样式。
-
提供样式的默认基线：初始化CSS为页面上的元素提供了一个样式的默认基线，开发者可以在此基础上添加或修改样式，而不必担心浏览器默认样式的干扰。
常见的CSS初始化方法包括使用CSS Reset（将元素样式重置为默认值）或（在不同浏览器中提供一致的样式基线）。
3.8 说说你对BFC规范的理解？
一、什么是BFC？
BFC全称：块级格式化上下文（block formatting context），简单来说它就是一种属性，这种属性会影响元素与元素之间的位置、间距
二、形成BFC的条件
1、float：给元素添加浮动（属性值为left、right，但none除外）
2、position：给元素添加定位（属性值为absolute或fixed）
3、display：给元素添加display属性（属性值为 inline-block、table-cell或table-caption）
4、overflow：给元素添加overflow 属性（属性值为hidden、auto或scroll，但visible除外）
三、BFC形成后出现的常见问题
1、margin重叠问题
2、浮动相关问题
3.9 讲讲 position float display 各有哪些取值，它们互相之间会如何影响？
1. position 属性
position 属性指定了元素的定位方式，主要有以下取值：
-
static：默认值，元素按照正常的文档流进行排列。 -
relative：元素相对于其正常位置进行定位。 -
absolute：元素相对于其最近的已定位（非 static）祖先元素进行定位。如果没有这样的祖先元素，则相对于文档的<html>元素定位。 -
fixed：元素相对于浏览器窗口进行定位，即使滚动页面，元素也会停留在窗口的固定位置。 -
sticky：元素根据用户的滚动位置进行定位。它结合了relative和fixed的特点，当元素在视口中达到某个阈值时，它会变成固定位置。
2. float 属性
float 属性用于将元素放置在文档流中的一行，使其围绕其他元素（通常是文本）进行定位。float 的主要取值有：
-
left：元素浮动到包含块的左边缘。 -
right：元素浮动到包含块的右边缘。 -
none：默认值，元素不浮动。
浮动元素会脱离文档流，但仍然保留其在文档流中的宽度，影响其他元素的布局。
3. display 属性
display 属性定义了元素的显示类型，影响元素在页面上的布局和可见性。一些常见的取值包括：
-
block：元素显示为块级元素，独占一行，可设置宽度和高度。 -
inline：元素显示为内联元素，和其他元素在同一行显示。 -
inline-block：元素保持内联特性，但可以设置宽度和高度。 -
flex：元素使用Flexbox布局，其子元素可以进行弹性布局。 -
grid：元素使用Grid布局，可以创建复杂的网格布局。 -
none：元素不显示，不占据空间。
互相影响
- 当
position设置为absolute或fixed时，元素会脱离文档流，不受float影响，且不会影响其他元素的布局。 -
float元素可以被position为relative的元素包含，但不会被子元素的position: absolute或position: fixed包含。 -
display属性可以改变元素的布局类型，这会影响元素是否可以设置宽度和高度，以及它如何与其他元素一起布局。例如，display: none会移除元素及其子元素，而display: block会使其占据整行。 -
float元素通常与display: block结合使用，因为内联元素不支持浮动。 -
position和float都可以使元素脱离文档流，但position: absolute或position: fixed的元素不会影响其他元素的布局，而浮动元素会影响周围元素的布局。
3.10 纯CSS实现三角形
.box {
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid red;
border-left:50px solid rgba(0,0,0,0);
}
/* 或者用transparent */
.div{
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
}
3.11 CSS Reset 和 有什么区别，我应该如何选择？
CSS Reset和都是用来解决浏览器默认样式不一致问题的，但它们采用的方法和目标有所不同：
-
CSS Reset：
- 目的是将所有元素的样式重置为一个空白状态，即样式表中通常使用
margin、padding、border等属性的0值来重置。 - 它通过覆盖HTML元素的默认样式，提供一个完全中性的起点，让开发者从头开始定义页面样式。
- 由于它移除了所有的默认样式，开发者可能需要重新定义一些基本的样式，比如列表的符号、表单元素的内边距等。
- 目的是将所有元素的样式重置为一个空白状态，即样式表中通常使用
-
：
- 不是重置所有样式，而是旨在修复浏览器的默认样式中的bug和不一致性，同时保留语义化和可访问性。
- 它通过修复常见的跨浏览器兼容性问题，提供一个更加一致的起点，同时保留一些有用的默认样式，如列表项的符号、标题的大小等。
- 的目标是减少工作量，避免不必要的全局样式重置。
如何选择：
-
项目大小和复杂性：对于大型或复杂的项目，可能是更好的选择，因为它提供了一个更加细致和平衡的重置，保留了一些有用的默认样式。
-
个人或团队偏好：如果你或你的团队更喜欢从一个完全空白的画布开始工作，CSS Reset可能更合适。
-
浏览器兼容性要求：如果你需要支持非常古老的浏览器，可能提供了更好的兼容性保证。如果你主要关注现代浏览器，CSS Reset提供了更多的控制权。
-
维护和更新：作为一个流行的项目，定期接收更新以修复新发现的浏览器兼容性问题。如果你需要确保样式表随着浏览器更新而更新，选择可能更合适。
-
开发速度：如果你希望快速开发并且不想处理浏览器默认样式的不一致性，提供了一个快速的解决方案。
最终，选择哪一种取决于你的具体需求、项目要求以及个人偏好。有些开发者甚至会选择结合使用两者，或者在的基础上进行一些额外的重置。
4. JS篇
4.1 面向对象
面向对象（Object-Oriented，OO）是一种编程范式，它基于“对象”这一概念来设计软件。对象可以包含数据（属性）和代码（方法或函数），它们共同描述了现实世界中的实体及其行为。面向对象的核心思想是通过将数据和处理数据的函数结合在一起，来模拟现实世界中的对象和它们之间的交互。
面向对象编程（OOP）具有以下基本特征：
-
封装（Encapsulation）：封装是将对象的实现细节隐藏起来，只暴露出一个可以被外界访问的接口。这有助于减少代码间的依赖，提高安全性和易于维护。
-
继承（Inheritance）：继承是一种机制，允许一个类（子类）继承另一个类（父类或基类）的属性和方法。这支持了代码的复用，并可以创建出一个类的层次结构。
-
多态（Polymorphism）：多态性允许同一个接口或方法名用于不同的数据类型。在运行时，程序会根据对象的实际类型来调用相应的方法，这使得同一个操作可以作用于不同的对象上。
-
抽象（Abstraction）：抽象是简化复杂的现实世界问题的过程，通过提取关键特征来创建模型。在面向对象中，这通常通过定义抽象类和接口来实现。
面向对象编程的优势包括：
- 提高代码的可维护性：通过封装和模块化，代码更易于理解和维护。
- 促进代码复用：继承允许现有代码的重用，减少了重复编写相同功能的需要。
- 增强代码的灵活性和扩展性：通过继承和多态，可以轻松扩展现有系统的功能。
- 提高开发效率：面向对象的方法可以加快开发过程，尤其是在团队协作的环境中。
4.2 什么是闭包？闭包的特性是什么？
闭包是能够读取其他函数内部变量的函数
要理解闭包，首先必须理解Javascript特殊的变量作用域
闭包的特性：
1.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
2.持久性：一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。
4.3 继承
4.4 DOM操作（添加、移除、移动、复制、创建和查找节点）
4.5 介绍一下new 操作符。New操作符具体干了什么？
1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2.属性和方法被加到this引用的对象中。
3.新创建的对象由this所引用，并且最后隐式的返回this。
4.6 HTML5离线存储
4.7 JS的数据类型
基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），
引用数据类型：Object(在JS中除了基本数据类型以外都是对象)详细请查看：typeof操作符检测变量的数据类型
4.8 null和undefined的区别
4.9 call()和apply()的区别
传参方式不同
fun.call(thisArg,arg1,arg2,arg3,...);
fun.apply(thisArg,[arg1,arg2,arg3,...])
4.10 深拷贝和浅拷贝
4.11 ajax
4.12 数组去重
4.13 this对象
4.14 eval()
的功能是把对应的字符串解析成JS代码并运行
2.应该避免使用eval，不安全，而且非常消耗性能（2次，一次是解析成js语句，一次是执行）
3.由JSON字符串转换为JSON对象的时候可以用eval()
let obj = eval('(' + str + ')');
4.15 什么是UA?
4.16 什么是事件委托？
4.17 promise
Promise 是 JavaScript 语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过 Promise 的 then 方法的回调）。
4.18 和的区别？哪一个先执行？
一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
是在DOM文档树加载完和所有文件加载完之后执行一个函数，也就是在页面响应加载的顺序中的“加载图片等其他信息”之后，可以操作DOM。只能执行一次，如果有多个，那么第一次的执行会被覆盖
是在DOM加载完成后就可以可以对DOM进行操作，也就是在在“加载js和css”和“加载图片等其他信息”之间，就可以操作DOM了。可以执行多次
所以，函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快
4.19 var、let和const有什么区别
定义的变量可以跨块作用域访问，不可以跨函数作用域访问。
定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问；不允许在相同作用域内，重复声明同一个变量。
定义的常量，初始化时必须赋值，只能在块作用域里使用，不能修改。详细请查看：var、let、const三者的区别
4.20 JavaScript 启动后，内存中有多少个对象？如何用代码来获得这些信息？
5. 前端安全问题
5.1 XSS
跨站脚本攻击（XSS）通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
常用的XSS攻击手段和目的有：
1、盗用cookie，获取敏感信息。
2、利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。
3、利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。
4、利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。
5、在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。
5.2 CSRF
跨站请求伪造（CSRF）是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。
防御CSRF攻击：
目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。
跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。
6. 跨域
6.1 什么是跨域？
6.2 什么是同源策略？
6.3 解决跨域的方法有哪些？
7. 性能优化
7.1 你都用过那种性能优化的方法？
1.尽可能的减少http请求
使用CSS Sprites；JS、CSS源码压缩；图片大小控制合适；启用Gzip压缩，CDN托管，data缓存；图片服务器
2.避免在CSS中使用 Expression
Expression（css表达式)又称Dynamic properties(动态属性)
3.添加expire/Cache-Control头
4.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
5.图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
6.当需要设置的样式很多时设置className而不是直接操作style。
7.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
8.前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
7.2 CSS Sprite是什么，谈谈这个技术的优缺点
8. Vue篇
8.1 是什么？
是一个用于构建用户界面的渐进式框架，它从核心功能出发，易于学习和集成，同时提供丰富的生态系统支持。
8.的核心特性有哪些？
的核心特性包括响应式数据绑定、组件系统、声明式渲染以及易于上手的API。
8.3 请简述Vue的响应式数据绑定原理。
Vue的响应式数据绑定原理基于MVVM模式，通过来劫持数据的getter和setter，当数据变化时，自动更新DOM。
8.4 Vue组件间通信有哪些方式？
Vue组件间通信方式包括props、事件、slot、provide/inject以及Vuex。
8.5 Vue的生命周期钩子有哪些？
Vue的生命周期钩子包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。
8.6 什么是Vue的计算属性（computed properties）？
Vue的计算属性是基于它们的依赖进行缓存的属性，只有当依赖发生变化时，计算属性才会重新计算。
8.7 Vue的v-model指令如何工作？
Vue的v-model指令在表单输入和应用状态之间创建双向绑定。
8.8 Vue的指令有哪些，它们是如何被解析和执行的？
Vue的指令包括v-bind、v-model、v-on、v-if、v-for、v-else、v-else-if、v-show、v-cloak等，它们在编译阶段被解析并在渲染时应用。
8.9 请解释Vue的slot元素及其作用。
slot元素用于组件内容的分发，允许在组件的模板中预留一个或多个位置，这些位置可以被组件的使用者填充。
8.10 Vue CLI是什么？它提供了哪些功能？
Vue CLI是一个基于的前端项目构建工具，提供项目脚手架、依赖管理、开发服务器、构建工具等功能。
8.11 Vue Router是什么？它是如何实现页面路由的？
Vue Router是一个专为应用程序设计的路由管理器，它使用HTML5 history API来实现单页面应用的页面路由。
8.12 Vuex是什么？它如何帮助管理应用的状态？
Vuex是一个专为应用程序开发的状态管理模式和库，它集中存储和管理所有组件的状态。
8.13 请描述Vue中的虚拟DOM和实际DOM的区别。
Vue中的虚拟DOM是一个轻量级的DOM树的JavaScript对象，它作为实际DOM的代理，只有当虚拟DOM和实际DOM不同步时，才会更新实际DOM。
8.14 Vue的keep-alive指令是做什么用的？
Vue的keep-alive指令用于缓存不活动的组件实例，避免重复创建和销毁组件，提高性能。
8.15 如何优化Vue应用的性能？
优化Vue应用性能的方法包括使用v-show代替v-if、使用事件的防抖和节流、使用计算属性和侦听器、避免不必要的数据监听、使用Vuex进行状态管理等。
8.16 Vue 3.0带来了哪些新特性？
Vue 3.0的新特性包括Composition API、更好的TypeScript支持、更小的体积、更快的虚拟DOM重写、新的组件定义方式等。
8.17 请解释什么是组件的v-if和v-for指令，以及它们的区别。
v-if是条件渲染指令，用于根据条件渲染元素；v-for是列表渲染指令，用于根据源数据多次渲染元素。
8.18 Vue的SSR（服务端渲染）是如何工作的？
Vue的SSR通过在服务器上渲染Vue组件，然后将HTML发送到客户端，客户端再激活这些静态标记为Vue组件。
8.19 请解释Vue组件的props和事件。
Vue组件的props是父组件向子组件传递数据的方式；事件允许子组件向父组件发送消息。
8.20 Vue的自定义指令如何创建和使用？
Vue的自定义指令允许你向元素添加特殊的行为，通过定义钩子函数来拦截元素的原生事件。
篇
什么是Hook?
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。
为什么在 React 中加入 Hook?
1.在无需修改组件结构的情况下复用状态逻辑
将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分
3.在非 class 的情况下可以使用更多的 React 特性
10. Angular篇
11.其他
11.1 后台系统的权限控制与管理
答案：后台管理系统的权限控制------前端权限管理