@Secretmm 2020-10-29T07:36:24.000000Z 字数 4166 阅读 594

题汇总

p6必备

加油加油加油

下面的题全部理解，30k稳了

重点

基础问题永远绕不开，前端技术面的考点无外乎：事件原理，闭包，调用栈，Promise，ES6，工程化，webpack, 性能优化，跨域，安全问题， React、Redux 思想，Virtual DOM，Diff 算法，移动端布局，浏览器渲染原理，Event Loop 等还有手写代码，主要考察一些基本 API 和 ES6 的使用。最常见是在 Array、String prototype 上写一个函数。比如 'abcd'.f() => 'd-c-b-a'还有一些常用的函数，比如 bind (好多家都考……)，throttle, debounce 等总之，这些都是前端绕不开的概念，也建议可以真正的夯实基础，多看书，多总结。对于前端同学来说 leetcode 上的 medium 题目应该就可以了。

关于自身项目

1.优化性能的点：
1.首屏白屏【骨架屏解决,动画代替，ssr服务端渲染】；
2.打包出来的js压缩，服务端gzip，webpack本身的压缩插件webpack.optimize.UglifyJsPlugin；
3.图片webp，图标用iconfont，小图片用base64【webpack设置limit】
4.pwa
5.使用缓存
6.异步加载css【js动态插入，media替换，refer="preload"】
6.按需加载js

2.vue@2的实现，你起码要说出依赖是如何被收集的，Watcher是如何被触发，AST是如何构建的（用的哪个库，基本原理），Virtual DOM的更新策略
3.技术上的难点，table组件
4.slug-ui按需引入

`100 * 100` 的 `Canvas` 占内存多大？

参考链接：https://juejin.im/post/5bdeb357e51d4536140fc7df

没有答案

DOM事件的绑定的几种方式
说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的
webpack的入口文件怎么配置，多个入口怎么分割啥的，我也没太听清楚。
我看到你的项目用到了Babel的一个插件：transform-runtime以及stage-2，你说一下他们的作用。
.我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin这个插件，有没有觉得压缩速度很慢，有什么办法提升速度。
.DOM事件中target和currentTarget的区别
.说一下你平时怎么解决跨域的。以及后续JSONP的原理和实现以及cors怎么设置。
.说一下项目中觉得可以改进的地方以及做的很优秀的地方？
.有没有自己写过webpack的loader,他的原理以及啥的，记得也不太清楚。
.有没有去研究webpack的一些原理和机制，怎么实现的。
.babel把ES6转成ES5或者ES3之类的原理是什么，有没有去研究。
.git大型项目的团队合作，以及持续集成啥的。
.什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？
.JS模块化Commonjs,UMD,CMD规范的了解，以及ES6的模块化跟其他几种的区别，以及出现的意义。
给定一个数组排序，使得奇数位的值不大于相邻偶数位的值。
实现一个eventEmit， addEventListener, removeEventListener,once, emit
算法中时间复杂度和空间复杂度，分别对应计算机什么硬件资源的使用？
计算机如何存储小数？0.1+0.2 ?= 0.3
HTTP vs HTTPS 的区别？
HTTPS 加密连接建立的过程？
Flexbox 弹性盒模型是什么？
CSS 画个扇形？画个三角形？
深拷贝是什么？实现 deepCopy 接收任意类型的值。
实现一个Promise
进程线程之间的区别，进程之间怎么通信，线程之间怎么通信
两个标签页怎么通信
localStorage sessionStorage的区别
实现requestAnimationFrame的polyfillrequestAnimationFrame和requestIdleCallback的区别
怎么保存登陆状态
如何预防XSS，CSRF攻击
一个promise list，一次最多只能执行n个，当全部执行完成之后，调用callback send(list, n, callback)
页面性能如何进行优化
css 两边定宽，中间自适应[圣杯布局]
splice会不会改变原数组
React Context 和 reduxmobx的区别
面向对象的特征
基于对象和面向对象的区别，以及JS是面向对象还是基于对象
JS实现继承的多种方式
HTTP 和 WebSocket的区别
TCP 和 UDP 的区别
TCP的三次握手四次挥手
React实现显示当前时间的公用组件，时间随着当前时间实时变化，并有哪些优化方式
useEffect的使用及优化
canvas如何实现按比例占满全屏
JS实现数据结构双向循环列表，并实现添加节点方法
内存溢出和内存泄漏的区别
webpack工程化可以有哪些优化的方法

斜对角线打印

[
[1, 2, 3, 4, 5, 6],
[11,23,35,345],
[34, 4,65]
]
// 1,
// 2,11,
// 3,23,34
// 4,35,4
// 5, 345, 65
// 6

原型相关题目

函数执行顺序、作用域

setTimeOut

for( var i = 0; i < 5; i++) { 
  setTimeout(() => { 
    console.log(i); 
   }, 1000); 
}

再一问：如何改造成可以打印出 1,2,3,4,5
1）第一种方式，利用const 的特性

for( var i = 0; i < 5; i++) {
  const j = i; 
  setTimeout(() => { 
    console.log(j); 
   }, 1000); 
}

2）第二种方式，利用promise

for( var i = 0; i < 5; i++) {
  new Promise((resolve, reject) => {
    console.log(i);
    resolve();
  });
}

console.log('script start');
async function async1() {
    console.log('async1');
    await async2();
    console.log('end');
}
async function async2() {
    console.log('async2');
}
setTimeout(function() {
    console.log('setTimeout');
}, 0);
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

闭包

function Foo() {
    var i = 0;
    return function() {
        console.log(i++);
    }
}
var f1 = Foo(),
    f2 = Foo();
f1();
f1();
f2();

解释：

function Foo() {
    var i = 0;
    return function() {
        console.log(i++);
        //上面那句打印，拆分为两句：console.log(i); i = i + 1;
        //假如是 console.log(++i); 
        //则顺序为： i = i + 1; console.log(i);
    }
}
var f1 = Foo(),
    f2 = Foo();
f1();
// 第一次执行f1()时，按照上面拆分的顺序，先打印出0，i变为1；
f1();
// 第二次执行f1()时，一般来说函数执行完后它的局部变量就会随着函数调用结束被销毁，但是此题Foo函数返回了一个匿名函数的引用（即一个闭包），它可以访问到foo()被调用产生的环境，而局部变量i一直处在这个环境中，只要一个环境有可能被访问到，它就不会被销毁，所以说闭包有延续变量作用域的功能。所以打印出1。
f2();
//这里考引用地址，两个变量f1、f2是调用foo()函数之后的结果，foo()函数返回的是创建的一个匿名函数，因此f1 f2应该是两个不同的函数对象。所以打印出 0

作用域

var bb = 1;
function aa(bb) {
    bb = 2;
    console.log(bb);
};
aa(bb);
console.log(bb);
// 2
// 1

var bb = 1;
function aa(cc) {
    bb = 2;
    console.log(bb);
};
aa(bb);
console.log(bb);
// 2
// 2

var bb = 1;
function aa() {
    bb = 2;
    console.log(bb);
};
aa(bb);
console.log(bb);
// 2
// 2

正则

1.请实现一个函数，将一个字符串中的每个空格替换成%20。例如，当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。

function replaceSpace(str)
{
    return str.replace(/\s/g, '%20');
}

2.取到一个url的参数值

privat关键字实现

1、用闭包
2、用symbol类型做属性名

async/await实现多个异步Promise并发执行

async () => {
    var p1 = genP1(); 
    // genP1,genP2各返回一个Promise实例，返回后内部同步代码已经执行，
    // p1,p2同时处于等待状态
    var p2 = genP2();
    await p1;
    await p2;
}

实现一个Promise

富文本编辑的实现思路

移动端虚拟键盘遮挡页面问题

el.scrollIntoView()将input滚动到可视区域

http协议中content-type字段有哪些值？json和form有什么区别？

Content-Type实体头部用于指示资源的MIME类型media type。
MIME由类型与子类型两个字符串中间用'/'分隔而组成。不允许空格存在。type/subtype, type 表示可以被分多个子类的独立类别。subtype 表示细分后的每个类型。
详见 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types