前端面试题总结

从输入url到页面加载出来的过程

加载资源的形式：

加载一个资源的过程：

浏览器渲染页面的过程：

从属于url到得到html的详细过程：

HTML部分

HTML语义化

html语义化就是能通过页面内容结构化。有以下优点；
有利于用户阅读，当css样式没有的时候也能让页面呈现清晰的结构
有利于seo，搜索引擎根据标签来确定上下文和哥哥关键字的权重
有利于其他设备的解析，例如盲人阅读器根据语义渲染网页。
有利于开发和维护，语义化更具可读性，代码更好维护，与css3关系更和谐

HTML5有哪些新标签

<nav><audio><video><header><footer><aside><canvas><main><artcle>

HTML5新增的特点

媒体查询
canvas
地图api

css部分

盒子模型

盒模型分为w3c标准盒模型和怪异盒模型(IE模型)

box-sizing:content-box   //标准盒模型：
元素的宽度=width+margin+border+padding宽度
box-sizing：border-box   //怪异盒模型：
元素的宽度=width

rem，rpx，em，px的不同之处以及换算方式

rem：根据html根的font-size变化  举例：html：font-size：12px 设置一个p的font-size为2rem，即24px
在移动端使用rem时，会进行代码的适配
em:相对于父元素计算，
rpx：在小程序里面使用，根据屏幕像素
px：浏览器默认的font-size为16px

css选择器

css常用选择器

通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p , h3 等
后代选择器：p span ，div a 等
伪类选择器：a:hover 等
属性选择器：input[type="text"] 

权重：！important > 行内样式> #id >.class >元素和伪元素 > *通配符 >继承 > 默认

css3的新特性

过渡
缩放
旋转
边框圆角
盒阴影
文本阴影
动画

position有哪些属性

relative：相对定位
absolute：绝对定位
stack:
fixd:固定定位

BFC（块级作用域）

什么是BFC？

BFC块级化上下文，它是一个独立的渲染区域，让处于bfc内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响

如何产生BFC？

display:inline-block

position:absoulte/fixed

BFC的作用

BFC最大的作用就是在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响

水平居中

行内块元素：display：inline-block；
块级元素：margin 0 auto；
flex：display：flex，justify-content:center

水平垂直居中

flex布局：
display:flex;
justify-content:center;
align-items:center;

link和import的区别

link可以定义rss，rel等，@impoort只能用于加载css；
解析link的时候页面会同步加载所引的css，而@import所引的css会等到页面加载完以后才被加载

单行元素的文本省略号

overflow：hidden（超出限定的宽度就隐藏内容）text-overflow:ellipsis；（规定当文本溢出时显示省略符号来代表被修剪的文本）white-space：nowrap；（设置文字在一行显示不能换行）

多行元素的文本省略号

display：-webkit-box；（设置或检索伸缩盒对象的子元素的排列方式）-webkit-line-clamp：2（用来限制在一个块元素显示的文本的行数，2表示最2行）-webkit-box-orient:vertical；（设置或检索伸缩盒对象的子元素的排列方式 ）overflow : hidden;text-overflow: ellipsis

javascript

js的基本数据类型

number string null undefind symbol boolean

js的内置对象

get和post请求的区别

get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以说使用缓存。

post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存，因此get请求适合于请求缓存。

闭包

什么是闭包？

闭包就是一个函数a里面嵌套另一个函数b，b能够访问函数外A里面的数据，但是函数A不能访问函数B里面的数据。闭包就是能够读取其他函数内部变量的函数

闭包的作用

1可以读取函数内部的变量

2可以让这些变量始终保持在内存中

3封装对象的私有属性和私有方法

好处：能够实现封装和缓存
坏处：消耗内存，不正常使用会造成内存溢出的问题

js作用域以及作用域链

原型和原型链

原型和原型链的概念

每个对象都会在其内部初始化一个属性，就是prototype（原型），当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会在prototype里面去找这个属性，而这个prototype又会有自己的prototype，于是就会一直这么找下去直到找到想要的那个属性。，这就形成了一个原型链。

原型和原型链的关系

instance.constructor.prototype=instance._proto_

原型和原型链的特点

javascript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本，当我们修改原型时，与之相关的对象也会继承这一改变

当我们需要一个属性的时候，javascript引擎会先看当前对象中是否有这个属性，如果没有的话就会查找她的prototype对象是否有这个属性，如此递推下去，一直检索到object内创建对象

组件化和模块化

为什么要进行组件化

1很大程度上降低系统各个功能的耦合性

2有利于维护代码，提升开发效率，减低开发成本

为什么要模块化

早起的javascript版本没有块级作用域，没有类，没有包，没有模块，这样会带来很多问题如复用，依赖，冲突，代码组织混乱等，随着前端的膨胀，模块化显得非常迫切

模块化的好处

1避免变量污染，命名冲突

2提高代码复用率

3提高了可维护性

4方便依赖关系管理

模块化的几种方法

函数封装

立即执行函数表达式

this对象的理解

this总是指向函数的直接调用者（而非简介调用者）

如果有new关键字，this指向new出来的那个对象

如果是箭头函数，this指向上下文

在事件中，this指向触发这个事件的对象，

axios

axios拦截器vuex

Vue

vue生命周期

什么是生命周期：

vue实例从创建到销毁的过程就是生命周期。

过程：开始创建，初始化，渲染模板，挂载DOM，渲染，更新，渲染，卸载等一系列过程

生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。

每个生命周期适合哪些场景？

第一次页面加载会触发哪几个钩子？

第一次页面加载时会触发beforeCreate,creatd,beforeMount,Mouted这几个钩子，

dom渲染在哪个周期就已经完成了？（mounted中完成）

v-if和v-show的区别

v-if是一个dom元素完整的销毁和重新创建，v-show是css切换

v-if为false时，display：none，而v-show为false时，visibale：hidden，元素还在，只是隐藏起来了

v-if用于切换次数较小的时候，v-show用于切换频繁的时候（优化性能）

组件之间的通信传值

路由跳转的方式

1.<router-link to='home'> router-link标签会渲染为a标签
2，通过js跳转 router.push('/home')

router.beforeach导航守卫

mvvm

computed和watch有什么用，区别是什么

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景
computed具有缓存性，computed的值在getter执行后是会缓存，只是在它的依赖属性之后
computed适用于计算比较消耗性能的计算场景
watch更多的是观察，类似于某些数据的监听回调，当数据变化时来执行回调后的值
watch无缓存性，页面重新渲染时值不变化也会执行
用法：
当要进行属于计算，而依赖于其他数据，那么把这个数据设计为computed
如果需要在某个数据变化时做一些事情，使watch来观察这个数据变化

组件中的data为什么是函数

由于vue里面的组件是可复用的，当data为一个对象的时候，修改其中一个属性其他的组件的该属性都会随之改变
当data是一个函数的话才会返回一个新的对象，保存修改后的属性，

class与style如何动态绑定？

单页面应用的特点

第一次加载时间比较久
不利于seo优化

keep-alive

keep-alive是vue里面内置的一个组件，可以使被包含的组件保留状态，避免重新渲染
有以下特性：

v-model的原理

vue项目的优化

ES6

var，let，const之间的区别

var会变量提升，可重复声明
let是es6新语法，定义一个变量，会形成一个块级作用域，但是不会变量提升
const声明之后必须赋值，否则会报错，定义常量，不能改变

解构赋值

forEach，for in，for of三者的区别

使用箭头函数应该注意什么？

function (a,b){
return  a+b
}
转换成箭头函数就是

set，map的区别

有哪些循环的方法

promise

Ajax

跨域

http有个同源策略，即端口

github常用命令

git pull
git status
git add .
git commit -m
git push

webpack

微信小程序

如何封装数据请求

HTTP

http和https的区别

http状态码

参考链接：https://juejin.cn/post/6844903950500495373