前端面试知识点

H5 新特性

新增标签

本地存储 webStorage websocket webworkers

新增地理位置 对css3的支持

canvas

多媒体标签

新增表单元素类型

结构标签：header nav article aside footer

表单标签：email url range date

媒体标签：video audio

navigator.geolocation.getCurrentPosition(success,error,option);

css3 新特性

圆角

阴影

背景渐变

弹性盒布局

过渡

动画

2D/3D转换

媒体查询 border-image

background: linear-gradient(direction, color1, color2 [stop], color3...);

background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color);

transition 需要触发条件，而且只有开始和结束之间的过渡。

animation：不需要触发，中间可以插入无数关键帧。

transform: translate3d(0px,0px,400px);

webstorage 和cookie的区别

容量 cookie 4k

webStorage 5M

存储时长 localStorage 长期存储

sessionStorage 基于单次会话存储

cookie 必须设定存储时长

和服务器交互

cookie信息会在和服务器做交互时 默认发送到服务端

webStorage 只会存储在本地

实现响应式布局几种方式

原生代码 媒体查询

bootstrap等框架

jsonp原理

允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

闭包

一个可以访问另一个函数中的变量的函数。当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的变量,且返回的这个函数在外部被执行就产生了闭包。

js的垃圾回收机制

标记清除

引用计数

浏览器缓存机制

在 Header 内的字段用于控制缓存机制 老方法 Expires，记录的绝对值 新方法 Cache-Control 多了一堆选项，记录的时间是相对值 获取缓存检测缓存是否过期，如果没过期取缓存，优先从内存，其次硬盘，如果过期，则与服务器协商缓存是否仍然可用，如果不可用则获取，可用取缓存

https://juejin.im/entry/5ad86c16f265da505a77dca4

js 本地对象,内置对象和宿主对象

本地对象包括如下内容：Object、Function、String、Array、Boolean、Number

内置对象：Math

宿主对象：BOM/DOM对象

http 请求流程

建立tcp连接的三次握手过程

vue与react区别，优缺点。

https://segmentfault.com/a/1190000016344599

vue双向绑定原理

已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineProperty，猛戳这里 整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点： 1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图 4、mvvm入口函数，整合以上三者

http常见状态码

1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

vue路由机制

不会把你相关的会的说出来就好了，怎么配的路由等

主要是<router-link>和<router-view>两个标签

<router-link>执行时会转换成<a>，并根据自己的to属性将路由地址转变成href的值，然后渲染在<router-view>标签中。

js继承类的方式

5种继承

this有哪几种指向

this的四种指向。window 对象 构造函数 call/apply

es6有哪些新特性

let const 箭头函数 展开符 解构赋值 对象语法糖 字符串模板

webpack相关配置属性

入口出口文件：

entry: {
    index: __dirname + '/src/main.js',  // __dirname表示当前项目的根路径。
    goods: __dirname + '/src/goods.js'
}, 
output: {
    path: __dirname + '/dist',
    filename: '[name].js'
},

http代理：

devServer: {
    contentBase: __dirname + '/dist',
    port: 3000,
    inline: true,
    // 每当我们访问/zhuiszhu地址的时候，就把请求转发给target地址的服务器。
    proxy: {
        '/zhuiszhu': {
            target: 'http://39.105.136.190:3000',
            secure: false,
            changeOrigin: true
        }
    }
}

资源地图：devtool: 'source-map'

本地web服务配置：

npm i webpack-dev-server@2.9.7 -g

// 安装的webpack-dev-server模块配置信息
devServer: {
    contentBase: __dirname + '/dist', // 指定本地web服务器根路径
    port: 3000,
    inline: true // 当源文件改变后，自动在浏览器页面刷新
}

提取css 文件：

npm i extract-text-webpack-plugin -D

// webpack.config.js
let Ext = require('extract-text-webpack-plugin');

module: {
    rules: [
        { test: /.css$/, loader: Ext.extract('css-loader') },
        { test: /.less$/, loader: Ext.extract('css-loader!less-loader') }
    ]
},
plugins: [
    new Ext('index.css')
],

webpack配置别名

resolve:{
    //配置别名，在项目中可缩减引用路径
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '&': resolve('src/components'),
      'api': resolve('src/api'),
      'assets': resolve('src/assets')
    }
  }

模块化

nodejs使用的是commonjs规范
注意:  nodejs虽然原生支持es6 但它并不支持 es6的import规范

导入:
let xx = require("xxx")

导出:
//一个文件内只能使用一次
module.exports = Object | Function | Array | String | Number | Boolean

//一个文件可以使用多次
exports.xxx = Object | Function | Array | String | Number | Boolean

下列写法不被允许  它会改变exports对象的引用导致程序运行出错
exports = {
    xxx : "text"
}


es6的import规范

方式1
导入:
    import XXX from "xxx"
导出:
    export default xxx
    该种方式一个文件内只能使用一次

方式2
导入:
    import {XXX} from "xxx"

    import {XXX as YYY} from "xxx" //将模块XXX给个别名为YYY
导出:
    export let | const | var | function | class | interface XXX = ....
    
    或者
    let(可以是其他声明符) XXX = ....
    export {XXX}

上述导出方式可以在同一个文件内使用多次


还有
AMD规范 和CMD规范

什么是观察者模式

也称：发布订阅模式。

当对象间存在一对多关系时，这个对象的状态发生改变，则会自动通知它的依赖对象，进行广播通知。

比如：vue中子组件向父组件传值，子组件使用$emit自定义一个事件名称，父组件接收这个事件即可。

还有中央事件总线 emit on

什么是mvc mvp mvvm

M 为数据层，V 视图层，C 逻辑层。

MVP(Model-View-Presenter)是MVC的改良模式，由IBM的子公司Taligent提出。和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示只不过是将 Controller 改名为 Presenter，同时改变了通信方向。

在MVP中，View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部。

MVVM = MVP + 新特性(bind等)

平时怎么解决浏览器兼容问题(具体问题的解决方案)

1、默认padding，margin不同
解决：自定义初始化css

2、在一个div中放一个img，但是img的下方和div之间有3px的间隔。
这是浏览器的解析问题，不同的浏览器间隔的还不同。
foxfire是5px，chrome是3px。
解决：/*方式一*/
div {font-size: 0;}
/*方式二*/
img{display: block;}
/*方式三*/
img{vertical-align: top;}

3、几个img标签放在一起的时候，有些浏览器会有默认的间距
解决：使用float属性为img布局

4、解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
引入html5shiv.js文件

5、针对IE属性 css hack
6、-ms- -o- -webkit- -moz-
7、清除浮动 clearfix 
8、边距重叠
解决：加一个父元素，父元素使用overflow: hidden;

9、IE9不能使用opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

数组的操作方法

join，push，pop，map，forEach，every，some，filter，concat，splice

如何进行性能优化 缩短页面加载时间

1、减少http请求

2、使用cdn加速

3、添加Expires头

4、将样式css放在头部，脚本script放在底部

5、使用外部的JavaScript和CSS

实现原生ajax的步骤

let xhr = new XMLHTTPRequest();
xhr.open('get', 'xxx.php?id=1',true);
xhr.send()
xhr.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        console.log(this.response)
    }
}

Vue

• 如何创建全局组件和局部组件

• 如何定义props

• 如何对props进行类型验证

• 什么是计算属性

• 数据监听(watch)

• 常用指令 v-if v-show 循环迭代

• 定义过滤器 (局部 全局)

• 进行组件间通信的方式

• slot 内容插槽

• v-for的key作用

v-for渲染的列表的结构采用“就地复用”的策略，也就说当数据重新排列数据时，会复用已在页面渲染好的元素，不会移动 DOM 元素来匹配数据项的顺序，这种模式是高效的，改变现有位置的结构的数据即可

• 如何配置使用路由

• 路由守卫 beforeEach beforeEnter beforeRouteEnter/Leave/Update

• 多视图路由

• vuex的几个核心概念 store state getter mutation action

• 如何对store进行模块化拆分

• 如何开启命名空间

• 组件的生命周期函数

React

• 如何定义组件?

• 如何接受props

• 如何进行props类型验证

• 组件的生命周期函数

• 三大周期 7个生命周期函数

• 修改组件状态

• 进行数据双向绑定

• ref的使用方式

• 路由的使用方式

• 路由守卫

• flux架构 view action dispatcher store

• redux 框架 view store reducer

• 异步action

• 如何进行性能优化

• 虚拟dom

• react和vue中的diff算法

angular

• 模块 组件 服务 管道

• 什么是依赖注入

• 如何使用路由

• 参数快照 参数订阅

• 响应式编程

• angular中的模板式表单和响应式表单

• 如何做表单验证

• angular-cli的使用方式

• 如何创建组件 创建服务 创建类 创建管道

• 网格系统 如何同bootstrap实现响应式布局

col-lg-6

col-md-6

col-sm-6

col-xs-6
<div class="col-md-6 col-xs-12"></div>