前端知识梳理与总结（三）--面试常见问题

最新推荐文章于 2022-05-04 15:34:43 发布

MissQ_coffee

最新推荐文章于 2022-05-04 15:34:43 发布

阅读量170

点赞数

分类专栏：前端面试秘籍文章标签： javascript html5 css vue.js

本文链接：https://blog.csdn.net/MissQ_coffee/article/details/105508790

版权

前端面试秘籍专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.箭头和普通函数的区别、箭头和匿名函数的区别

普通函数可以用于构造函数，而箭头函数不能用于构造函数
箭头函数中this的指向不同：在普通函数中，this总是指向调用它的对象或者，如果用作构造函数，它指向创建的对象实例。
箭头函数本身没有this，但是在它声明时可以捕获它所在作用域中的this供自己使用。 bind()、call()、apply()均无法改变指向。
箭头函数全都是匿名函数，箭头函数没有变量提升。
匿名函数的执行环境是全局性的，this指向window。

2.ES5的继承和ES6 class的继承的区别
在这里插入图片描述

3.js的垃圾回收机制
在这里插入图片描述

4.AMD和CommonJS的区别

AMD:异步加载所需模块，然后在回调函数中执行主逻辑，实现JS文件的异步加载，避免网页因加载时间过长而失去响应；
CMD在AMD基础上改进，可按需加载，预先下载代码，但并没有立即执行，即“就近书写，延迟执行”；
CommonJS规范不适用于浏览器环境，适用于服务端，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间；

5.首屏加载白屏的解决办法

尽量不要首屏加载JS文件（由于<script>标签是阻塞解析的，将脚本放在网页尾部会加速代码渲染。）
路由懒加载
结合前端性能优化进行回答

6.虚拟DOM的原理
用JS操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。操作真实DOM的代价是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

虚拟DOM就是为了解决浏览器性能问题，是用JS对象模拟DOM节点，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

7.generator，promise，async/await底层原理

Generator与async function都是返回一个特定类型的对象
Generator: 一个类似{ value: XXX, done: true }这样结构的Object
Async: 始终返回一个Promise，使用await或者.then()来获取返回值

8.HTTP1.0 和 HTTP1.1 的一些区别

长连接（TCP不断开）
缓存

9.ajax 的原生写法

var xhr = new XMLHttpRequest(); //创建异步对象
xhr.open("get","validate.php?username="+name);//设置请求行 open(请求方式，请求url)
xhr.send(null);//设置请求体 send()
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){ 
	console.log(xhr.responseText); 
 }
}

10.性能优化

减少请求次数：压缩文件可用webpack打包工具
图片采用懒加载
使用外部CDN方法加载第三方插件
代码方面的优化：
减少dom的操作，主要是减少dom的重绘与回流
把js脚本放在body的下面，防止阻塞加载
合理使用缓存

11.JS的数据基本类型（ES6新增的）
凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。

let s = Symbol();
typeof s
// "symbol"

每个Symbol变量都是独一无二的。
当使用Symbol作为对象属性时，可以保证对象不会出现重名属性。

12.ES5的方式实现es6的Promise
在这里插入图片描述

//几个状态常量
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
 
function MyPromise(callback) {
    this.status = PENDING; //储存状态
    this.__succ__res = null; //储存resolve结果
    this.__err__res = null; //储存reject结果
    var _this = this;//必须处理this的指向
    function resolver(res) {
        _this.status = FULFILLED;
        _this.__succ__res = res;
    };
    function rejecter(rej) {
        _this.status = REJECTED;
        _this.__err__res = rej;
    };
    callback(resolver, rejecter);
};
MyPromise.prototype.then = function(onFulfilled, onRejected) {
    if (this.status === FULFILLED) {
        onFulfilled(this.__succ__res);
    } else if (this.status === REJECTED) {
        onRejected(this.__err__res);
    };
};

13.webpack plugin和loader的区别

webpack做的就是分析代码，转换代码，编译代码，输出代码

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。

loader 用于加载某些资源文件。因为 webpack 只能理解 JavaScript 和 JSON 文件，对于其他资源例如 css，图片，是没有办法加载的。这就需要对应的loader将资源转化，加载进来。loader是用于加载的，它作用于一个个文件上。

14.js实现懒加载
页面渲染时将src路径放到自定义属性中去，这样页面加载时图片就不会去请求服务器，当图片滚动到可视区内时，获取它的自定义属性并赋值给src。

window.innerHeight：浏览器可视区域高度
document.body.scrollTop || document.documentElement.scrollTop：浏览器滚动条滚过高度
img.offsetTop：元素距文档顶部的高度

<script type="text/javascript">
	var imgs = document.querySelectorAll('img');
	window.onscroll = function(){
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		var winTop = window.innerHeight;
		for(var i=0;i < imgs.length;i++){
		if(imgs[i].offsetTop < scrollTop + winTop ){ //加载条件
			imgs[i].src = imgs[i].getAttribute('data-src');
			}
		}
	}
</script>