web前端面试知识点整理

一、HTML5新特性

本地存储 webStorage websocket webworkers
新增地理位置等API
对css3的支持
canvas
多媒体标签
新增表单元素类型
结构标签：header nav article aside footer
表单标签：email url range date
媒体标签：video audio
……

二、CSS3新特性

圆角：border-radius
阴影：box-shadow
背景渐变：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
弹性盒布局：https://www.jianshu.com/p/5856c4ae91f2
过渡
动画
2D/3D转换
新增的属性和选择器
……

三、webstorage和cookie的区别

1、容量：cookie 4k，webStorage 5M。
2、存储时长：localStorage 长期存储，sessionStorage 基于单次会话存储，cookie 必须设定存储时长。
3、和服务器交互：cookie信息会在和服务器做交互时默认发送到服务端；webStorage 只会存储在本地。

四、实现响应式布局几种方式

布局的几种方式：静态布局、自适应布局、流式布局、响应式布局、弹性布局。

响应式布局原生代码，媒体查询：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries，说明bootstrap等框架的应用。

五、jsonp原理

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

参考：《彻底弄懂jsonp原理及实现方法》https://www.cnblogs.com/soyxiaobi/p/9616011.html

一个可以访问另一个函数中的变量的函数。当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的变量，且返回的这个函数在外部被执行就产生了闭包。
参考：
1、闭包 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
2、彻底搞懂JS闭包各种坑 https://www.jianshu.com/p/26c81fde22fb

七、js的垃圾回收机制

基本的垃圾回收算法称为“标记-清除”，定期执行以下“垃圾回收”步骤:

1、垃圾回收器获取根并“标记”(记住)它们。
2、然后它访问并“标记”所有来自它们的引用。
3、然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住，以便以后不再访问同一个对象两次。
4、以此类推，直到有未访问的引用(可以从根访问)为止。
5、除标记的对象外，所有对象都被删除。

参考：https://segmentfault.com/a/1190000018605776

八、浏览器缓存机制

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

参考：https://juejin.im/entry/5ad86c16f265da505a77dca4

九、js 本地对象、内置对象和宿主对象

本地对象包括如下内容：Object、Function、String、Array、Boolean、Number。
内置对象：Math。
宿主对象：BOM/DOM对象。

十、http 请求流程

参考满分回答：https://blog.csdn.net/wolf_love666/article/details/93600904

十一、vue与react区别，优缺点

参考：https://segmentfault.com/a/1190000016344599

十二、vue双向绑定原理

已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，要实现mvvm的双向绑定，就必须要实现以下几点：

实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。
实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。
mvvm入口函数，整合以上三者。

defineProperty参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

十三、http常见状态码

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

十四、js继承类的方式

原型链继承、借助构造函数继承、原型式继承、经典继承、寄生式继承等等。

十五、this有哪几种指向

this的4种指向：
1、全局环境：window
2、对象环境：对象
3、构造函数环境：实例对象
4.、事件对象：调用者
总结：谁调用指向谁。
两种改变指向的方式：
1、call/apply 方式
2、定义局部变量的方式：var that = this;

十六、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,
    // 每当我们访问/a地址的时候，就把请求转发给target地址的服务器。
    proxy: {
        '/a': {
            target: 'http://xushanxiang.com:3000',
            secure: false,
            changeOrigin: true
        }
    }
}

资源地图：devtool: ‘source-map’

本地web服务配置：

npm i [email protected] -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);

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

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)
    }
}

比较jQuery ajax、fetch、axios

二十四、Vue

如何创建全局组件和局部组件
如何定义props
如何对props进行类型验证
什么是计算属性
数据监听(watch)
常用指令 v-if v-show 循环迭代
定义过滤器 (局部全局)
进行组件间通信的方式
slot 内容插槽
v-for的key作用
vue-router

二十五、函数的节流和防抖

类型概念应用节流事件触发后每隔一段时间触发一次(可触发多次)scroll,resize事件一段时间触发多次防抖事件触发动作完后，过一段时间触发一次scroll,resize事件触发完后一段时间触发

// html 部分
<style>
*{padding:0;margin:0;}
.scroll-box{
    width : 100%;
    height : 500px;
    background:blue;
    overflow : auto;
}    
.scroll-item{
    height:1000px;
    width:100%;
}
</style>
<body>
<div class="scroll-box">
    <div class="scroll-item"></div>
</div>
</body>

// js 部分
let throttle = function (func, delay) {
let timer = null;
return function(){
  if (!timer) {
    timer = setTimeout(() => {
      func.apply(this, arguments);
      // 或者直接 func()
      timer = null;
    }, delay);
  }
};
};
  
  // 处理函数
  function handle() {
  console.log(arguments)
  console.log(Math.random());
  }
// 测试用例
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle,3000));

// html 部分同上
// js 部分
let debounce = function (fn, wait) {
let timeout = null;
return function () {
  if (timeout !== null) clearTimeout(timeout);//如果多次触发将上次记录延迟清除掉
  timeout = setTimeout(() => {
    fn.apply(this, arguments);
    // 或者直接 fn()
    timeout = null;
  }, wait);
};
}
 // 处理函数

function handle() {
    console.log(arguments)
    console.log(Math.random());
}
// 测试用例
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle, 3000));

您还可参考阅读下面这些文章：
1、《JS 原生面经从初级到高级【近1.5W字】》https://segmentfault.com/a/1190000020759924
2、《前端开发面试知识点大纲》https://www.cnblogs.com/jill1231/p/jill1231_web_qianduankaifa.html
3、《前端面试知识点整理（附答案）》https://www.jianshu.com/p/0b2861bd2068
4、《中高级前端面试知识点汇总》https://www.jianshu.com/p/fd742b49a25c
5、《前端面试知识点》https://www.cnblogs.com/lvonve/p/11936026.html

一、HTML5新特性

二、CSS3新特性

三、webstorage和cookie的区别

四、实现响应式布局几种方式

五、jsonp原理

七、js的垃圾回收机制

八、浏览器缓存机制

九、js 本地对象、内置对象和宿主对象

十、http 请求流程

十一、vue与react区别，优缺点

十二、vue双向绑定原理

十三、http常见状态码

十四、js继承类的方式

十五、this有哪几种指向

十六、es6有哪些新特性

十七、webpack相关配置属性

十八、模块化

十九、什么是观察者模式

二十、什么是mvc mvp mvvm

二十一、怎么解决浏览器兼容问题

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

二十三、实现原生ajax的步骤

二十四、Vue

二十五、函数的节流和防抖

Recommend

Atomos — A New Recoil Visualization Tool Powered by React Flow

从传统老板到直播一姐，薇娅是怎么转型的？

Bruggen Blog: Graphistania 2.0: The Lockdown Anniversary session

一个月抖音涨粉200万，直男财经的成功方法论

I could do this in half an hour and I'm sure an absurd amount of people would bu...

Github GitHub - littlee/eslint-plugin-clean-timer: eslint plugin for best practi...

Part 3/3 - Wikipedia Clickstream analysis with Neo4j - some Graph Data Science &...

可直可弯会变身？！这款电视骚操作太多我眼睛都不够看了......

Bruggen Blog: Contact tracing in Neo4j: using triggers to automate actions

Support Vector Machine

About Joyk