前端面试题总结(PS:尊重劳动成果拿或者要原笔记记得滴滴)

前端优化性能的方法

• 压缩字体文件 使用 fontmin-webpack 插件对字体文件进行压缩

• 减少 HTTP 请求

• 使用字体图标 iconfont 代替图片图标

• 使用 webp 格式的图片

• 减少重绘重排

• 使用事件委托

• 使用 Web Workers

html + css

1. HTML和CCS3新增那些内容？

• 广义上的html5指的是最新一代前端开发技术的总称，包括html5，CSS3，新增的webAPI。

• Html中新增了：header,footer,main,nav等语义化标签，新增了video,audio,canvas画布。新增了一些标签属性，例如input的placeholder。

• Css3中新增了：圆角，阴影，滤镜，vwvh单位，flex布局，媒体查询，过度和动画，伪类。线性渐变

• webAPI新增了：localStorage和sessionStorage，querySelector，webSocket，requestAnimationFrame，Worker(类似分线程)，地理位置。

2. 什么是HTML语义化？HTML语义化的好处是什么？

• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

  即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

  搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重;

• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

3. 前端页面中动画都有那些实现方式，各自分别使用那些使用场景

• Transition：简单的动画，只需要在两个状态之间变化的动画。

• keyframeAnimation：适合需要在多个状态连续进行的动画。

• js动画：功能最强的动画，但是效率最低。

4. 怪异和模型和盒模型的区别

• 在标准模式下，块的总宽度= width + margin(左右) + padding(左右) + border(左右)

• 怪异模式下，块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

• box-sizing来设置盒子属性

• • content-box （默认）宽度盒高度即为元素内容区，再内容区之外加padding、border、margin（标准盒模型）

    • box-sizing 属性为border-box时，设置的宽度和高度是元素的边框盒，此时，为元素设置的padding和border也包含其中，content的实际大小为宽高减去内边距和边框的大小。（怪异盒模型）

    • box-sizing属性为inheri时，该元素继承父元素的box-sizing属性。

5. css3中transtion和animation的区别

• transition只有开始和结束两个状态，并且需要通过事件触发

• animation可以通过定义关键帧指定多个动画状态，可以自动播放

6. 页面中常用那些单位，有什么区别

• px 以物理像素为基准

• em以当前元素font-size为基准

• rem以html font-size为基准

• vw/vh以浏览器窗口宽高为基准 100vw=浏览器窗口宽度

• rpx 适用于小程序或uniapp中可以实现自适应 750rpx=屏幕宽度

7. 怎么实现元素上下左右都居中？

• 实现元素本身内容居中：text-align:center+行高。

• 实现子元素在父元素中居中：绝对定位 + 上下左右设置 0 + margin:auto。

8. 网页性能优化方案？

• 减少http请求次数：CSS 精灵图 , JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

• 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

• 当需要设置的样式很多时设置className而不是直接操作style。

• 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

• 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

• 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

9. < link>和@import导入样式的区别

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

• link支持使用Javascript控制DOM去改变样式；而@import不支持。

10. display: flex;

• flex-direction 决定主轴的方向

• • row（默认值）：主轴为水平方向，起点在左端。

    • row-reverse：主轴为水平方向，起点在右端。

    • column：主轴为垂直方向，起点在上沿。

    • column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap 决定换行

• • nowrap（默认）：不换行。

    • wrap：换行，第一行在上方。

    • wrap-reverse：换行，第一行在下方。

• flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

• justify-content 主轴上的对齐方式。

• • flex-start（默认值）：左对齐

    • flex-end：右对齐

    • center： 居中

    • space-between：两端对齐，项目之间的间隔都相等。

    • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• align-items 交叉轴上的对齐方式。

• • flex-start：交叉轴的起点对齐。

    • flex-end：交叉轴的终点对齐。

    • center：交叉轴的中点对齐。

    • baseline: 项目的第一行文字的基线对齐。

    • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• • flex-start：与交叉轴的起点对齐。

    • flex-end：与交叉轴的终点对齐。

    • center：与交叉轴的中点对齐。

    • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

    • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

    • stretch（默认值）：轴线占满整个交叉轴。

• 以下6个属性设置在项目上。

• • order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

    • flex-grow： 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

    • flex-shrink： 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

    • flex-basis： 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

    • flex： flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

    • align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

11. 重绘和回流

• 重绘（repaint）：当元素样式的改变不影响页面布局时，比如元素的颜色，浏览器将对元素进行的更新，称之为重绘。

• • 常见的重绘操作有：改变元素颜色，改变元素背景色 ……

• 回流（reflow）：也叫做重排。当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流，比如元素的宽高、位置，浏览器会重新渲染页面，称为回流，又叫重排（layout）。

• 关系：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。

11. 浏览器渲染的原理

1. 处理 HTML 并构建 DOM 树。

2. 处理 CSS构建 CSSOM 树。

3. 将 DOM 与 CSSOM 合并成一个渲染树。

4. 根据渲染树来布局，计算每个节点的位置。

5. 调用 GPU 绘制，合成图层，显示在屏幕上

12. git 常用的命令

• 查看 git 版本： git --version

• 设置用户签名：git config --global user.name 用户名

• 设置用户签名：git config --global user.email 邮箱

• 初始化本地库：git init

• 查看本地库状态：git status

• 添加到缓存区：git add 文件名

• 提交到本地库：git commit -m “日志信息” 文件名

• 查看历史记录：git reflog

• 版本穿梭：git reset --hard 版本号

• 推送版本：git push origin master 将本地库储存的代码推送到远程库

• 拉取：git pull origin master 将远程库更新拉取到本地库

• 查看提交历史版本：git log

• 查看缓存区文件：git ls-files

• 查看分支：git branch

• 创建分支：git branch 分支名

• 将某个分支合并到当前分支：git merge 分支名

• 查看分支记录：git reflog 分支名

• 从远程仓库拉取代码：git clone 远程库的地址(./1.png)

css 可以继承的属性

行高，color，关于字体的，关于文本的，列表布局，光标属性，元素可见型

JavaScript

1. Js数据类型有那些？

• 数值、字符串、布尔、undefined、null、数组、对象、函数

2. 引用类型和值类型的区别

• 值类型存在于栈中, 存取速度快 引用类型存在于堆,存取速度慢

• 值类型复制的是值本身 引用类型复制的是指向对象的指针

• 值类型结构简单只包含基本数据, 引用类型结构复杂,可以实现多层嵌套

3. 判断数据类型的方法

typeof instanceof constructor Object.prototype.toString.call()

• typeof：只能判断基本数据类型，不能判端引用数据类型

• instanceof ：只能正确判断引用数据类型，而不能判断基本数据类型。instanceof 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

• constructor：有两个作用，一是判断数据的类型，二是对象实例通过 constrcutor 对象访问它的构造函数。需要注意，如果创建一个对象来改变它的原型，constructor就不能用来判断数据类型了：

• Object.prototype.toString.call()：使用 Object 对象的原型方法 toString 来判断数据类型：

4. null 和 undefined 的区别？

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null 主要用于赋值给一些可能会返回对象的变量，作为初始化。

undefined 在 js 中不是一个保留字，这意味着我们可以使用 undefined 来作为一个变量名，这样的做法是非常危险的，它 会影响我们对 undefined 值的判断。但是我们可以通过一些方法获得安全的 undefined 值，比如说 void 0。

当我们对两种类型使用 typeof 进行判断的时候，Null 类型化会返回 “object”，这是一个历史遗留的问题。当我们使用双等 号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。

5. Promise有那些使用场景？

• 在页面打开时,要同时执行多个ajax请求,可以使用promise处理多异步任务并发执行

• 有些ajax请求之间存在依赖关系,需要顺序执行,造成结构嵌套,可以使用promise解决异步任务多层嵌套的问题, 实现链式调用

• 在项目中封装网络请求时,使用peomise封装ajax请求并返回peomise对象

• 两个常用的静态方法：

• • .all 所有都成功了才会返回

    • .race 只要有一个成功或者失败 都会返回

6. Js函数中的this有那些指向？怎样改变函数中this的指向？

• 一般情况下，通过谁调用，就指向谁

• • 在js全局作用域, this指向window

    • 在对象中,this指向这个对象本身

    • 构造函数中，this是正在创建的对象。

    • 在事件函数中,this指向事件目标

    • (注意: 在计时器中this会被还原成window或置空,但箭头函数可以保留this指向)

• 可用通过call(), apply(), bind()改变this的指向

• • apply() 和 call() 一样,修改指向的同时调用函数，唯一的区别是，传参方式不同，aplly需要提供一个数组。

    • bind() 修改this指向时不会调用函数，而是生成一个新的函数，新的函数和原函数代码一样，但是里面的this是绑定过的。

7. 什么是原型和原型链？

Js中的对象都有一个属性叫做ptoto(也是一个对象)，表示对象的原型。当访问对象中的属性或方法时，首先在对象本身中寻找，如果找不到则会在原型中寻找&#x