楼主会持续更新下去，技术栈也由浅入深的介绍（以及相关的面试题）-优快云博客

本文链接：https://blog.youkuaiyun.com/dndhcjdks/article/details/109446020

前言：说来惭愧，从业一年半还是第一次发博客。主要内容是一个由浅入深的介绍前端相关知识点，面试点

html

1. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

五大浏览器内核
•Trident （MSHTML）（三叉戟；三叉线；三齿鱼叉）
•Gecko （壁虎）
•Presto （迅速的）
•Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
•Blink (由Google和Opera Software开发的浏览器排版引擎)
五大浏览器内核代表作品
*Trident:IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。
*Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
*Webkit :代表作品Safari、Chrome ，是一个开源项目。
*Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

2. h5新增了哪些内容

语义化标签
header，footer，nav，section，article，aside等
媒体标签
audio，video
功能性标签
svg，canvas
智能表单
一些input的type类型，和新的input属性
本地存储
localstorage和sessionstorage
api
websocket, fetch(浏览器自带的数据请求方式)和requestAnimationFrame（动画定时器）等等
新事件
onrisize, ondrag, onscroll, onmousewheel, onerror, onplay, onpause等

3. 语义化的理解？

用正确的标签做正确的事情！ html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式 CCS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

4. 什么是响应式

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

5. localStorage, sessionStorage和cookie之间的区别

特性	cookie	localStorage	sessionStorage	IndexDB
数据生命周期	一般由服务器生成，可以设置过期时间	持久化本地存储，除非被主动删除，否则一直存在	页面关闭就清理	持久化本地存储，除非被主动删除，否则一直存在
数据存储大小	4K	5M	5M	无限
与服务端通信	每次都会携带在 header 中，对于请求性能影响	不参与	不参与	不参与

作用域不同：sessisionStorage不能在不同的浏览器窗口中共享，即使是同一个页面；localStorage和cookie在同一个浏览器的所有的同源窗口中都是共享的。
cookie的存取方法需要自己封装，本地存储的存取的方法更直接

6. websocket协议和http协议的区别

http协议：每次http请求都需要创建一次tcp连接，通信只能由客户端发起，做不到服务器主动向客户端推送信息。
websocket协议： websocket是保持长连接，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种

7. 前端优化做过哪些

网页内容

- 减少http请求次数
  - 将js和css文件捆绑下载
  - 使用雪碧图
- 减少DNS查询次数
- 避免在页面的主体布局使用table
- 减少DOM元素数量
- 减少iframe

服务器端

- 使用cdn加速
- 多使用GET请求
- 避免空的src的图片，因为空的也会进行请求

CSS

- 样式表写在head的里面
- 用link代替@import
- 少嵌套

JavaScript

- 写在body的最下面，让网页渲染内容尽快加载给用户
- 使用h5新增的async关键字，可以让js异步执行
- 将js和css外部引入，并且精简并压缩

减少DOM操作

图片

- 图片预加载/懒加载
- 不要在html中缩放图片，如果有小图片，直接值用小图片

CSS

1. 元素水平垂直居中的方式

弹性盒：
父元素： display: flex;
子元素： margin: auto;
弹性盒2：
父元素：display:flex;
justify-content: center;
align-item: center;
定位1：
父元素：position: relative;
子元素：position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
定位加2d变形
父元素： position:relative;
子元素：position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

2. 清除浮动的方式

给高度塌陷的元素添加overflow: hidden
里面的最下面加一个空的div，并添加clear: both

万能清除法

  .clearfix::after {
    content: '.';
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    clear: both;
  }

display:flow-root
- 新出来的，没有副作用，但是还存在兼容性问题

3. display有哪些属性值

block: 块状元素
inline-block：行内块元素
inline：行内元素
none：隐藏元素
flex：弹性盒
inline-flex: 行内的弹性盒
list-item: li的默认属性值
table: table的默认值
table-row: tr的默认值
table-cell: rd的默认值
inherit: 继承

4. 介绍一下em，rem，vw, vh, vmax, vmin

em: em是相对长度单位。相对于当前元素内文本的字体尺寸
rem: rem是CSS3新增的一个相对单位，相对的是HTML根元素的字体大小。除了IE8及更早版本外，所有浏览器均已支持rem。
vw: 视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh: 视窗高度的百分比
vmax: 当前 vw 和 vh 中较大的一个值
vmin: 当前 vw 和 vh 中较小的一个值
视窗(Viewport)是浏览器实际显示内容的区域，是不包括工具栏和按钮的网页浏览器的内容区域。
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

5. 定位有哪些？

static: 默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative: 相对于元素本身正常的位置进行定位，不脱离文档流，“left:20” 会向元素的 LEFT 位置移动20 像素。
absolute: 生成绝对定位元素，相对于第一个static定位以外的父元素进行定位，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定，相对的是父元素border的位置
fixed: 生成固定定位的元素，相当于浏览器窗口进行定位。
sticky: 粘性定位，该定位基于用户滚动的位置。正常情况下，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。
inherit: 规定从父元素继承position属性的值
initial: 设置属性为默认值(static)

6. 浏览器的渲染原理

浏览器将获取的HTML文档解析成DOM Tree（DOM树）
将Css样式表，解析成CSSOM Tree（CSS树）
将DOM和CSSOM合并为渲染树（rendering tree），这个过程称之为attachment
渲染树的每个元素经过精确的计算后，给出坐标，这个过程称之为layout
将渲染树的各个节点绘制到屏幕上，这个过程称之为painting

7. 从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

8. C3新增了哪些内容

过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码
动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码
形状转换 transform:适用于2D或3D转换的元素
rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);
选择器
阴影 box-shadow: 水平阴影的位置垂直阴影的位置模糊距离阴影的大小阴影的颜色阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码
边框 border-image: 图片url 图像边界向内偏移图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0）铺满方式–重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;
背景 background-clip 制定背景绘制（显示）区域 background-origin background-size
1.（background-clip: border-box;）默认情况（从边框开始绘制） 2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！ 3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！
反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
文字换行语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码
渐变
Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)
弹性布局 Flex
栅格布局 grid
多列布局
盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图
媒体查询就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！

9. 过渡和动画

过渡需要用户触发，动画不需要用户触发
过渡不能控制中间过程，动画可以
过渡只能一次，动画可以任意次数

10. 回流和重绘

什么是回流

通过构造render tree，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建时，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。

什么是重绘

当render tree中的一些元素需要更新属性时，而这些属性只是影响元素的外观、风格而不会影响布局的时候，比如background-color，文字颜色、边框颜色等。则就称为重绘。

区别

回流必将引起重绘，重绘不一定引发回流，回流所需的成本比重绘高很多，改变父节点里的子节点很可能会导致父节点的一系列回流。

何时发生回流重绘
页面第一次渲染(初始化)
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化(包括外边距，内边距，边框大小，高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代或者字体改变
浏览器窗口尺寸的变化（因为回流是根据视口的大小来计算元素的位置和大小的）
定位或者浮动，盒模型等
获取元素的某些属性
减少重绘和回流
使用transform做形变和位移替代定位top
使用visibility替换display:none, 因为前者只会引起重绘，而后者会引起回流
不要使用table布局，可能很小的一个改动会造成整个table的重新布局
动画实现的速度选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame
CSS选择符会从右往左匹配查找，因此要避免层级过多
将频繁重绘或回流的节点设置为图层，图层能够阻止该节点渲染行为影响别的节点。比如video标签，浏览器会自动将该节点变为图层
避免多次读取某些属性
合并多次对DOM和样式的修改，然后一次处理掉

11. 弹性盒

父元素加

- display
- flex-direction:设置主轴方向
- justify-content：设置主轴对齐方式
- align-item：设置侧轴对齐方式
- flex-wrap 设置是否换行
- align-content : 行与行之间的排列方式

子元素加

- align-self: 设置单独在侧轴对齐方式
- order: 设置排列顺序
- flex-grow: 放大比例
- flex-shrink: 缩小比例
- flex-basis: 分配剩余空间前占据的位置
- flex: flex-grow,flex-shrink,flex-basis的缩写

12. 盒模型有几种

标准盒模型：margin，border，padding，content
宽 = 左border + 左padding + width + 右padding + 右border
怪异盒模型：border和padding算在宽高的里面
宽 = width

13. 移动端适配怎么做

使用手机淘宝之前的方案 flexible.js
使用less或者sass等css预编译的mixin混合功能，带参数进行自动计算
使用最新的postcss的postcss-pxtorem插件和lib-flexible插件

14. rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

15. BFC

BFC: block formatting context(块状格式化上下文)
bfc是一个独立的空间，只有块状元素参与，
它规定了里面的块状元素如何布局，它和外部的坏境毫不相干

触发条件

1. 根元素（html）本身就是一个BFC
2. float不能none的时候
3. position为absolute或者fixed的时候
4. display为inline-block, table-cell, flex, inline-flex等
5. overflow不为visible的时候

特点

1. 内部的元素是从上往下排的
2. 垂直方向的距离有margin来决定的，属于同一个BFC的两个元素的上下margin会重叠
3. 每个元素的margin-left会和父元素的border-left相接触
4. bfc的区域不会和浮动的区域相重叠
5. bfc的区域和外部空间毫不相干
6. 在计算bfc高度的时候，浮动元素也会参与计算

16. Css中哪些属性可以继承

字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
元素可见性：
visibility：控制元素显示隐藏
列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
光标属性：
cursor：光标显示为何种形态

17. 有那些行内元素、有哪些块级元素

行内元素

```
  <a>标签可定义锚
  <abbr>表示一个bai缩写形式
  <acronym>定义只取首字母缩写
  <b>字体du加粗
  <bdo>可覆盖默zhi认的文本方向
  <big>大号字体加粗
  <br>换行
  <cite>引用进行定义
  <code>定义计算机代码文本
  <dfn>定义一个定义项目
  <em>定义为强调的内容
  <i>斜体文本效果
  <img>向网页中嵌入一幅图像
  <input>输入框
  <kbd>定义键盘文本
  <label>标签为
  <input> 元素定义标注（标记）
  <q>定义短的引用
  <samp>定义样本文本
  <select>创建单选或多选菜单
  <small>呈现小号字体效果
  <span>组合文档中的行内元素
  <strong>语气更强的强调的内容
  <sub>定义下标文本
  <sup>定义上标文本
  <textarea>多行的文本输入控件
  <tt>打字机或者等宽的文本效果
  <var>定义变量
```

块状元素

```
  <address>定义地址
  <caption>定义表格标题
  <dd>定义列表中定义条目
  <div>定义文档中的分区或节
  <dl>定义列表
  <dt>定义列表中的项目
  <fieldset>定义一个框架集
  <form>创建 HTML 表单
  <h1>定义最大的标题
  <h2>定义副标题
  <h3>定义标题
  <h4>定义标题
  <h5>定义标题
  <h6>定义最小的标题
  <hr>创建一条水平线
  <legend>元素为 
  <fieldset>元素定义标题
  <li>标签定义列表项目
  <noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部
  <noscript>定义在脚本未被执行时的替代内容
  <ol>定义有序列表
  <ul>定义无序列表
  <p>标签定义段落
  <pre>定义预格式化的文本
  <table>标签定义 HTML 表格
  <tbody>标签表格主体（正文）
  <td>表格中的标准单元格
  <tfoot>定义表格的页脚（脚注或表注）
  <th>定义表头单元格
  <thead>标签定义表格的表头
  <tr>定义表格中的行
```