web前端面试知识点整理

2022-03-06 01:15:03

一、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 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);

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

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
vuex
……

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

类型	概念	应用
节流	事件触发后每隔一段时间触发一次(可触发多次)	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

转自：https://xushanxiang.com/2019/12/web-front-end-interview-knowledge-points.html

码农公寓