北京某某某某科技前端开发面试

面试时间： 2020年12月11日上午10.30点-11点
面试形式： 语音面试

1. 自我介绍
   参考模板：
   你好，我是XX，毕业于XX大学。现就职于XX公司，有X年开发经验，公司主要使用技术栈为React+AntDesign+Redux进行开发

2. 浏览器兼容性问题
   不同浏览器的标签默认内补丁padding和外补丁margin不同
   解决：使用css通配符，设置css内补丁和外补丁为0 *{margin：0， padding： 0}
   图片默认有间距
   解决：使用float为img布局
   块属性标签float后，又有横向的margin值，在IE6中显示会比设置的大
   解决：在float标签样式中加入display：inline

3. 盒模型

对比	W3C的标准盒模型	IE的盒模型
width	content部分的宽度	content+padding+border三个部分的宽度
box-sizing	content-box(默认)	border-box

4. 双等和三等=的区别

对比	双等==	三等===
概念	相等	严格相等
类型转换	类型转换	类型不同则直接返回false
转换规则	原始类型的值：字符串和布尔值都会转换成数值；对象（数值和函数）与原始类型值比较，对象转换成原始类型的值，在进行比较；undefied和null与其他类型值比较，为false，相互比较为true	不同类型值，直接返回false；同一类的原始类型值（数字，字符串，布尔值），值相同返回true，否则false；同一类的复合类型值（对象，数组，函数），比较他们是否指向同一个对象；undefined和null与自身严格相等

5. 实现一个promise

function myPromise(constructor){
	let self = this;
	self.status = 'pending' //定义状态改变前的初始状态
	self.value = undefined; //定义状态为resolved时的状态
	self.reason = undefined;//定义状态为rejected时的状态
	
	function resolve(value){
		//两个===pending，保证了状态的改变是不可逆的
		if(self.status === 'pending'){
			self.value = value;
			self.status = 'resolved';
		}
	}
	
	function reject(reason){
		//两个===pending，保证了状态的改变是不可逆的
		if(self.status === 'pending'){
			self.reason = reason;
			self.status = 'rejected';
		}
	}
	
	//捕获构造异常
	try{
		constructor(resolve, reject)
	}catch(e){
		reject(e)
	}
}

myPromise.prototype.then=function(onFullFilled, onRejected){
	let self = this;
	switch(self.status){
		case 'resolved':
			onFullFilled(self.value );
		break;
		case 'rejected':
			onRejected(self.reason );
		break;
		default:
	}
}

6. 讲一下Async/Await
   async函数是generator函数的语法糖
   await后面接一个返回return new Promise函数并执行（await放在try catch中接受promise处理结果rejected）
   await只能放在async函数里
   优点：方便级联调用；同步代码编写方式；多个参数传递

7. 前端性能优化
   降低请求量：合并资源，减少HTTP请求数，minify/gzip压缩
   加快请求速度：预解析DNS，CDN分发
   缓存：HTTP协议缓存请求，离线数据存储localStorage
   渲染：JS/CSS优化，加载顺序，服务器端渲染

8. 讲一下线程和进程

区别	进程	线程
定义	程序的一个实例	一个进程之内可以分成多个线程
单位	资源分配的最小单位	资源调度的最小单位
上下文切换	涉及到当前进程CPU环境的保存和新被调度运行进程的CPU环境的设置	更轻量，仅需要保存和设置少量的寄存器内容，不涉及存储管理方面的操作
数据共享	同一进程下不同线程间数据很易共享	不同进程的线程间数据很难共享

9. http和https区别

区别	http	https
定义	超文本传输协议	http加入ssl层，加密的详细内容需要ssl
是否需要证书	不需要	需要，费用较高
加密传输	明文传输	ssl加密传输
端口	80	443
连接	简单，无状态	ssl+http可进行加密传输，身份认证
优点		可认证用户和服务器，确保数据发送到正确的客户机和服务器；ssl+http可进行加密传输，身份认证，可防止数据在传输过程中不被窃取改变，保证数据完整性；较安全，增加了中间人攻击的成本
缺点	缓存高效；	缓存会增加数据开销；需要ssl证书，功能越大，费用越高；握手比较费时，页面加载时间延长50%，增加10%-20%耗电

10. event loop
    执行顺序：
    一开始整个脚本作为一个宏任务执行
    执行过程中，同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
    当前宏任务执行完出队，检查微任务列表，有则依次执行，知道全部执行完
    执行浏览器UI渲染的线程工作
    检查是否有web work，有则执行
    执行完本轮的宏任务，回到2，依次执行，直到宏任务和微任务队列为空
    微任务：Promise.then,
    宏任务：script, settimeout, setinterval, setimdiate,I/O, UI render

11. webpack
    描述了项目中webpack的配置和每项的作用

const path = require('path');  //引入node的path模块
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin')  //将html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin')  // 分离样式文件，CSS 提取为独立文件，支持按需加载   //打包的css拆分,将一部分抽离出来  //提取 Chunk 中的 CSS 代码到单独文件
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: './src/index.js', //入口文件
    output: { //webpack如何输出
        path: path.resolve(_dirname, 'dist'),//定位，输出文件的目标路径
        filename: '[name].[chunkhash:8].js' //设置 output 的 filename，用 chunkhash: 和 Webpack 打包的 chunk 有关，不同的 entry 会生出不同的 chunkhash
    },
    module: {//模块的相关配置
        rules:[ //根据文件的后缀提供一个loader，解析规则:类型为数组，每一项都是一个object，内部包含test（正则：类型文件；loader, options:参数等属性 ）；本质是一个函数，在该函数中对接受到的内容进行转换，返回转换后的结果。loader即翻译官，对其他除js类型的资源进行转译的预处理工作
            {
                text: /\.js$/, //正则：类型文件 es6=>es5
                includes:[
                    path.resolve(_dirname, 'src')
                ],
                exclude:[], //不匹配选项，优先级高于test和include
                use: 'babel-loader'//es6=>es5
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use:['css-loader', 'less-loader'] //加载CSS，支持模块化，压缩，文件导入等特性
                })
            },
            { //图片loader
                test: /\.(png|jpg|gif)$/,
                use:[
                    {
                        loader: 'file-loader'//根据文件地址加载文件，把文件输入到一个文件夹中，在代码中通过相对url去引用输出的文件（处理图片和文字）；设置file-loader的name，使用hash；和整个项目的构建相关，只要项目文件有修改，整个项目的hash值就会改变
                    }
                ]
            }
        ]
    },
    resolve:{ //解析模块的可选项
        modules: [], //模块的查找目录，配置其他的css等文件
        extensions: ['.js', '.json', '.jsx', '.less', '.css'],//用到文件的拓展名，尽可能减少后缀尝试的可能性
        alias:{//模块别名列表，合理使用alias可缩小打包作用域
            utils: path.resolve(_dirname, 'src/utils')
        }
    },
    plugins:[//插进的引用，压缩，分离美化，类型为数组，每一项都是plagin的实例，参数通过构造函数传入：插件，扩展webpak的功能，在webpakck生命周期会有很多事件，plugin可以监听这些事件，通过webpak提供的api改变输入结果
        new ExtractTextPlugin('[name].css'), //[name]默认 也可以自定义name 声明使用；分离样式文件，css提取为独立文件，支持按需加载；设置MiniCssExtractPlugin 的filename，使用contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变
        new HtmlWebpackPlugin({//将模板的头部和尾部添加CSS 和js模板，dist目录发布到服务器上，项目包，可以直接上线；简化html文件创建
            file: 'index.html',//打造单页面运用，最后运行的不是这个
            template: 'src/index.html' //脚手架放在根目录下
        }),
        new CopyWebpackPlugin([//src下其他的文件直接赋值到dist目录下
            {form:'src/assert/favicon.oci', to: 'favicon.ico'}
        ]),
        new webpack.ProvidePlugin({ //引用框架jquery lodash工具库是很多组件会复用 省去了import
            '_': 'lodash'//引用webpack
        })
    ]
}

12. 电商页面大量图片优化方式
    图片懒加载：在页面未可见区域，添加一个滚动条事件，判断图片位置和浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载
    如果为幻灯片还是相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
    如果图片为CSS图片，可以使用css雪碧图，svg雪碧图，base64等技术
    如果图片过大，可以使用特殊编码格式的图片，加载时会先加载一张压缩的缩略图，以提高用户体验
    如果图片展示区域小于图片真实大小，先进行图片压缩，压缩到和展示区域一样大小

13. git基本使用
    git clone 复制
    git init 初始化
    git add 添加，有工作区到暂存区
    git status 查看当前仓库的状态
    git commit 提交注释说明
    git fetch 与主干同步
    git pull 从远程更新代码
    git push 将本地代码更新到远程分支上
    git branch 查看分支
    git checkout 切换分支

14. git fetch和git pull 不同
    git pull = git fetch + git merge
    fetch 更新远程仓库的代码为最新的，本地仓库的代码还未被更新，需要用git merge合并
    merge 将本地仓库和远程仓库更新到远程的最新版本

15. ES6新特性
    const和let
    模板字符串
    箭头函数
    函数的参数默认值
    对象和数组的解构
    模板的导入导出

16. 变量提升
    函数和变量的声明都将被提升到函数的最顶部。变量可以先使用在声明。同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升

17. ES6的for of原理
    迭代器 Iterator

18. ES6的新数据结构Map
    数据结构类似对象，为键值对集合，但是键的范围不限于字符串，可以是任何类型的。

19. vue和react不同

区别	vue	react
数据是否可变	响应式，数据可变（性能优化自动的）	单向数据流，数据不可变（性能优化手动做）
通过js还是自行处理	html，js， css组合在一起，用各自处理方式	all in js(js生成html为jsx， js操作css)
组件写法	声明式写法，通过传入options和api，参数很多	类式写法，api很少
扩展组件	mixin	高阶组件
内置还是社区做	很多东西内置	做的少，交给社区

20. vue生命周期
    beforeCreate
    created
    beforeMount：此时还没有生成html到页面上
    mounted：挂载完成，模板中html渲染到html页面上，可以做一些ajax操作，只执行一次
    beforeUpdate
    updated
    deforeDestroy
    destroyed

本文地址：https://blog.csdn.net/weixin_45344873/article/details/111087885