webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: 前端性能优化

Browse Source
This commit is contained in:
qianguyihao
2020-12-02 20:51:18 +08:00
parent 685060917d
commit 5917104680
22 changed files with 132 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
13-前端面试/03-面试题积累/20180116-博客园：一年经验初探阿里巴巴前端社招.md Normal file
View File

@@ -0,0 +1,167 @@
博客园：一年经验初探阿里巴巴前端社招
文章来源：<https://www.cnblogs.com/fsyz/p/8298921.html>
一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。
虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己经验不足，然后给boss说我是16届的，只有一年经验，然后就没有然后了。这次我依然这么回复，但是这boss说，没关系，他喜欢基础好的，让我可以试一试，于是我也抱着试一试的心态发了简历。
简历发过去之后，boss就给我打了电话，让我简单的介绍一下自己，我就噼里啪啦说了一些，还说了一些题外话。然后boss就开始问我问题。
由于面了四轮，所以最开始的面试记忆有点模糊了，细细回想，又感觉记忆犹新。
1.电话初探
1.说一下你了解CSS盒模型。
我就说了一下IE的怪异盒模型和标注浏览器的盒模型，然后可以通过box-sizing属性控制两种盒模型的变换。
2.说一下box-sizing的应用场景。
这个也不难，简单说了一两个应用场景，具体就不一一细说了。
3.说一下你了解的弹性FLEX布局.
这个我也比较了解，各种概念和属性能想到的说了一大堆，也扯到了Grid布局，基本这个也没啥问题。
4.说一下一个未知宽高元素怎么上下左右垂直居中。
说了一下flex弹性布局的实现，说了一下兼容性，扯到了postcss的一些东西，然后说了一下常规的兼容性比较好的实现。
5.说一下原型链，对象，构造函数之间的一些联系。
这个我之前写过相关的文章，自己也有比较深入的理解，所以这个也不在话下，噼里啪啦说了一大堆，也不知道面试官听得咋样。
6.DOM事件的绑定的几种方式
说了三种，然后说了一些冒泡，默认事件，以及DOM2，DOM3级的一些标准。
7.说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的。
这个因人而异，开放性问题，主要考察平时项目的一些积累吧，这个我回答感觉也比较ok。
8.有没有了解http2.0,websocket,https，说一下你的理解以及你所了解的特性。
这个我看过一些文章，但是没有什么印象，扯了一些概念，但是回答的不是很深。
第一轮电话初探，大约面了50分钟，就记起来这么多，还有一些细节问题可能淡忘了，总体来说，面的都是以基础为主，然后boss说把我简历推荐给内部，进行正式的社招流程。
一轮技术面
然后当天晚上一个女的面试官就给我打电话了，说八点半进行下一轮技术面试，没想到效率这么快，我都没怎么准备。
这次就直接省略自我介绍了。
1.webpack的入口文件怎么配置，多个入口怎么分割啥的，我也没太听清楚。
这个自己就说了一下自己的理解，以及自己用node写的多入口怎么配置，然后面试官说不是多入口配置，然后我又说了一下自己的理解，然后这题就过了。
2.我看到你的项目用到了Babel的一个插件：transform-runtime以及stage-2，你说一下他们的作用。
这个我也还算比较了解，就说了一下ES的一些API，比如generator啥的默认不转换，只转换语法，需要这个来转换，然后说profill啥的，扯了一下stage-1，stage-2，stage-3，这个问题回答还算清楚。
3.我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin这个插件，有没有觉得压缩速度很慢，有什么办法提升速度。
这个我主要回答了一下，我之前也没怎么了解，一个想到是缓存原理，压缩只重新压缩改变的，还有就是减少冗余的代码，压缩只用于生产阶段，然后面试官问还有呢？我就说，还可以从硬件上提升，可以得到质的飞跃，比如换台I9处理器的电脑。。。。
4.简历上看见你了解http协议。说一下200和304的理解和区别
这个噼里啪啦说了一堆，协商缓存和强制缓存的区别，流程，还有一些细节，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特征，这一块之前有过比较详细的了解，所以还是应答如流。
5.DOM事件中target和currentTarget的区别
这个没答上来。。。
6.说一下你平时怎么解决跨域的。以及后续JSONP的原理和实现以及cors怎么设置。
我就说了一下Jason和cors,然后问我JSONP的原理以及cors怎么设置，这一块自己也实践过，所以还是对答如流的。
7.说一下深拷贝的实现原理。
这个也还好，就是考虑的细节不是很周全，先是说了一种JSON.stringify和JSON.parse的实现，以及这种实现的缺点，主要就是非标准JSOn格式无法拷贝以及兼容性问题，然后问了我有么有用过IE8的一个什么JSON框架，我也不记得是什么了，因为我压根没听过，然后说了一下尾递归实现深拷贝的原理，还问了我typeof null是啥，这个当然是Object。。。
8.说一下项目中觉得可以改进的地方以及做的很优秀的地方？
这个也是因人而异，开放性问题，大致扯了一下自己的经历，也还OK。
最后问了有什么需要问的地方，面试到这里基本就结束了，大约面了一个多钟头，还是蛮累的。总体来说，回答的广度和深度以及细节都还算OK，觉得这轮面试基本没什么悬念。
二轮技术面
过了几天，接到阿里另一个面试官的电话，上一轮面试通过了，这次是二轮技术面，说估计一个钟头。这次依然跳过自我介绍之类的，直奔主题。
1.有没有自己写过webpack的loader,他的原理以及啥的，记得也不太清楚。
这个我就说了一下，然后loader配置啥的，也还ok。
2.有没有去研究webpack的一些原理和机制，怎么实现的。
这个我简单说了一下我自己了解的，因为这一块我也没深入去研究，所以说的应该比较浅。
3.babel把ES6转成ES5或者ES3之类的原理是什么，有没有去研究。
这一块我说了一下自己的思路，大致也还OK，我也没去深入研究怎么转换的，之前好像看过类似的文章，自己也只观察过转换之后的代码是啥样的，至于怎么转换的规则，真的没去深入观察。
4.git大型项目的团队合作，以及持续集成啥的。
这里我就说了一下自己了解的git flow方面的东西，因为没有实战经验，所以我就选择性说明了这一块的不熟练，然后面试官也没细问。
5.什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？
这个我就说了一下函数柯里化一些了解，以及在函数式编程的应用，最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。
6.ES6的箭头函数this问题，以及拓展运算符。
这一块主要是API和概念的问题，扯了一些规范以及严格模式下其他情况this只想问题。
7.JS模块化Commonjs,UMD,CMD规范的了解，以及ES6的模块化跟其他几种的区别，以及出现的意义。
这个也是说了一下自己的理解和认知，自己对模块化历史以及一些规范都有所涉猎，这一块也还凑合。
8.说一下Vue实现双向数据绑定的原理，以及vue.js和react.js异同点，如果让你选框架，你怎么怎么权衡这两个框架，分析一下。
主要是发布订阅的设计模式，还有就是ES5的Object.defineProperty的getter和setter机制，然后顺便扯了一下Angular的脏检测，以及alvon.js最先用到这种方式。然后扯了一下vue.js和react.js异同点，权衡框架选择，调研分析之类，噼里啪啦说了一大堆。
9.我看你也写博客，说一下草稿的交互细节以及实现原理。
这一款就按照自己用过简书或者掘金，SG这类草稿的体验，详细说了一下，这个开放性问题，说到点基本就OK。
最后面试官问我有什么想问的吗，面试到这里基本就结束了，差不多面了一个小时，说过几天就会给答复，如果过了就会去阿里园区进行下一轮的技术面。
三轮技术面
上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。
因为阿里西溪园区距离我不到十公里，我就踩着共享单车一点钟就出发了，天气比较热，飘在路上，百感交集，身边一辆法拉利轰鸣而过，又一辆兰博基尼呼啸而过，我心里一万头草泥马奔腾，MLGB，心里暗想，为神马开这车的人不是此刻看文章的你？
走到半路了，面试官给我打电话了，说我怎么还没到，说约定的是两点钟，我一下子就懵逼了，短信只有一个游客访问ID，并没有通知我具体时间，反正不管谁的疏忽，我肯定是要迟到了，于是我快马加鞭，踩着贼难骑的共享单车，背着微风，一路狂奔，到阿里园区已是汗流浃背，油光满面，气喘乎乎。。。
面试迟到了，印象肯定不好，加上满头大汗的形象也不太好，加上自己饥渴难耐，这面是估计要GG了，一进来就直奔主题，这次是两个大Boss面试我。
第一个面试官
1.先自我介绍一下，说一下项目的技术栈，以及项目中遇到的一些问题啥的。
这个问题就是个开场白，简要说明一下，问题都不大，这个面试官就是第一次打电话给我面试的那个boss，所以技术那块boss心里也有个底细，所以没再问技术问题。
2.一个业务场景，面对产品不断迭代，以及需求的变动该怎么应对，具体技术方案实现。
具体业务场景，我就不一一描述，Boss在白板上画了一个大致的模块图，然后做了一些需求描述。
然后需求一层一层的改变，然后往下挖，主要是考察应对产品能力，以及对代码的可维护性和可拓展性这些考察，开放性问题，我觉得还考察一些沟通交流方面的能力，因为有些地方面试官故意说得很含糊，反正就是一个综合能力，以及对产品的理解，中间谈到怎么实现，也问到了一些具体的点，记得问到的有一下几个。
① 怎么获取一个元素到视图顶部的距离。
② getBoundingClientRect获取的top和offsetTop获取的top区别
③事件委托
第二个面试官
1.业务场景：比如说百度的一个服务不想让阿里使用，如果识别到是阿里的请求，然后跳转到404或者拒绝服务之类的？
主要是考察http协议头Referer，然后怎么判断是阿里的ip或者啥的，我也不太清楚。
2.二分查找的时间复杂度怎么求，是多少
。。。排序的还算清楚一点，查找真的不知所措，没回答上来，也没猜，意义不大，不会就是不会。
3.XSS是什么，攻击原理，怎么预防。
这个很简单，跨站脚本攻击XSS(cross site scripting)，攻击类型主要有两种：反射型和存储型，简单说了一下如何防御：
①转义
②DOM解析白名单
③第三方库
④CSP
自己对web安全这块系统学习过，前前后后大约了解了很多，对于XSS,CSRF,点击劫持，Cookie安全，HTTP窃听篡改，密码安全，SQL注入，社会工程学都有一定了解，所以这个自然也不在话下。
4.线性顺序存储结构和链式存储结构有什么区别？以及优缺点。
我是类比JS数组和对象来回答的，反正还算凑合吧，自己都数据结构这块多少还是有些印象，所以入了前端，对数据结构和算法确实一直淡忘了。
5.分析一下移动端日历，PC端日历以及桌面日历的一些不同和需要注意的地方。
这个我能想到的大致都说了一遍，不同的场景交互和细节以及功能都有所偏差，以及功能的侧重都可能不同。
6.白板写代码，用最简洁的代码实现数组去重。
我写了两种实现方式：
ES6实现：
[...new Set([1,2,3,1,'a',1,'a'])]
ES5实现：
[1,2,3,1,'a',1,'a'].filter(function(ele,index,array){
return index===array.indexOf(ele)
})
7.怎么实现草稿，多终端同步，以及冲突问题？
这个回答的不算好，本来也想到类比git的处理方式，但是说的时候往另外一个方面说了，导致与面试官想要的结果不一样。
最后说目前的工作经验达不到P6水平，业务类稍弱，阿里现在社招只要P6的高级工程师，但是可以以第二梯队进去，就是以第三方签署就业协议，一年后可以转正，就是俗称的外包。多少还是有点遗憾，面了四轮面了个外包，最后放弃这份工作了。
最后，感谢boss一直以来的关照和器重。
学习前端的同学们，欢迎加入前端学习交流群
前端学习交流QQ群：461593224

39
13-前端面试/03-面试题积累/ES6.md Normal file
View File

@@ -0,0 +1,39 @@
## Class和普通构造函数有何区别
> 我们经常会用ES6中的Class来代替JS中的构造函数做开发。
- Class 在语法上更加贴合面向对象的写法
- Class 实现继承更加易读、易理解
- 更易于写 java 等后端语言的使用
- 本质还是语法糖，使用 prototype

86
13-前端面试/03-面试题积累/ES6：模块化的使用和编译环境.md Normal file
View File

@@ -0,0 +1,86 @@
## 前言
### ES6的主要内容
- 模块化的使用和编译环境
- Class与JS构造函数的区别
- Promise的用法
- ES6其他常用功能
本文来讲“模块化的使用和编译环境”。
### 面试常见问题
- ES6 模块化如何使用，开发环境如何打包
- Class 和普通构造函数有何区别
- Promise 的基本使用和原理
- 总结一下 ES6 其他常用功能
### ES6的现状
- 开发环境已经普及使用
- 浏览器环境却支持不好（需要开发环境编译）
- 内容很多，重点了解常用语法
- 面试：开发环境的使用 + 重点语法的掌握
## 模块化的基本语法
（1）util1.js：
```javascript
export default var a = 100;
export function foo {
console.log('util1-foo');
}
```
`export default`命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出。
有了默认输出之后，其他模块加载该模块时，import命令可以为该匿名变量/函数，起**任意的名字**。
上面的代码中，默认输出是一个变量。当然，我们也可以换成**默认输出一个匿名函数**：
```javascript
export default function() {
console.log('util1-function');
}
```
（2）util2.js：
```javascript
export var myUtil2 = 'this is util2';
export function fn1() {
console.log('util2-fn1');
}
export function fn2() {
console.log('util2-fn2');
}
```
上方代码中，我把一个变量和两个函数作为了导出。
（3）index.js：

361
13-前端面试/03-面试题积累/JS相关.md Normal file
View File

@@ -0,0 +1,361 @@
## JS 有哪些数据类型
- 基本数据类型：string number bool undefined null
- 引用数据类型：object、symbol。
另外，object 包括：数组、函数、正则、日期等对象。NaN属于number类型。
注意，数据类型里，没有数组。因为数组属于object（一旦说数组、函数、正则、日期、NaN是数据类型，直接0分）。
## Promise 怎么使用
then：
```javascript
$.ajax(...).then(成功函数, 失败函数)
```
链式 then：
```javascript
$.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2)
```
如何自己生成 Promise 对象：
```javascript
function xxx(){
return new Promise(function(resolve, reject){
setTimeout(()=>{
resolve() 或者 reject()
},3000)
})
}
xxx().then(...)
```
## ajax手写
```javascript
let xhr = new XMLHttpRequest();
xhr.open('POST', '/xxxx');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
xhr.send('a=1&b=2');
```
## 闭包是什么
```javascript
function fn1() {
var a = 2
function fn2() {
a++
console.log(a)
}
return fn2;
}
var f = fn1(); //执行外部函数fn1，返回的是内部函数fn2
f() // 3 //执行fn2
f() // 4 //再次执行fn2
console.log(a); // 会报错：a is not defined
```
参考链接：
- [JS 中的闭包是什么？](https://zhuanlan.zhihu.com/p/22486908)
## 这段代码里的 this 是什么？
1、fn() 里面的 this 就是 window
2、fn() 是 strict mode，this 就是 undefined
3、a.b.c.fn() 里面的 this 就是 a.b.c
4、new F() 里面的 this 就是新生成的实例
5、() => console.log(this) ，这个this指的是外面的 this。
参考链接：
- [this 的值到底是什么？](https://zhuanlan.zhihu.com/p/23804247)
## 什么是立即执行函数？作用是？
立即执行函数：
（1）声明一个匿名函数，（2）马上调用这个匿名函数。如下：
```javascript
(function(a, b) {
var name; //声明一个局部变量
console.log("a = " + a);
console.log("b = " + b);
})(123, 456);
```
**作用：**创建一个独立的作用域，防止污染全局变量。
因为我们只能通过函数的形式声明一个局部变量。当有了ES6之后，我们可以通过let来定义一个局部变量：
```javascript
{
let name
}
```
上面这段代码，就相当于立即执行函数。有了let，立即执行函数就毫无意义。
参考链接：
## ES6 新特性
## async/await 语法了解吗？目的是什么？
目的：把异步代码写成同步代码的形式。
我们知道，promise是这样写的：
```javascript
let promise = new Promise((resolve, reject) => {
//进来之后，状态为pending
console.log('111'); //这一行代码是同步的
//开始执行异步操作（这里开始，写异步的代码，比如ajax请求 or 开启定时器）
if (异步的ajax请求成功) {
console.log('333');
resolve();//如果请求成功了，请写resolve()，此时，promise的状态会被自动修改为fulfilled
} else {
reject();//如果请求失败了，请写reject()，此时，promise的状态会被自动修改为rejected
}
})
console.log('222');
//调用promise的then()
promise.then(() => {
//如果promise的状态为fulfilled，则执行这里的代码
console.log('成功了');
}
, () => {
//如果promise的状态为rejected，则执行这里的代码
console.log('失败了');
}
)
```
有了await之后，可以直接替换掉then。如下：
```javascript
function returnPromise(){
return new Promise( function(resolve, reject){
setTimeout(()=>{
resolve('success')
},3000)
})
}
returnPromise().then((result)=>{
result === 'success'
})
var result = await returnPromise()
result === 'success'
```
## 如何实现深拷贝
### 方式一：JSON 来深拷贝
```javascript
var a = {...};
var b = JSON.parse(JSON.stringify(a)); //先将对象转成json字符串，然后再转成对象
```
缺点：JSON 不支持函数、引用、undefined、RegExp、Date……
### 方式二：递归拷贝
```javascript
function clone(object){
var object2
if(! (object instanceof Object) ){
return object
}else if(object instanceof Array){
object2 = []
}else if(object instanceof Function){
object2 = eval(object.toString())
}else if(object instanceof Object){
object2 = {}
}
你也可以把 Array Function Object 都当做 Object 来看待，参考 https://juejin.im/post/587dab348d6d810058d87a0a
for(let key in object){
object2[key] = clone(object[key])
}
return object2
}
```
## 如何实现数组去重
### 方式1：计数排序的逻辑（只能针对正整数）
```javascript
var a = [4,2,5,6,3,4,5]
var hashTab = {}
for(let i=0; i<a.length;i++){
if(a[i] in hashTab){
// 什么也不做
}else{
hashTab[ a[i] ] = true
}
}
//hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}
console.log(Object.keys(hashTab)) // ['4','2','5','6','3']
```
### 方式二：set
```javascript
Array.from(new Set(a));
```
###方式三
## 如何用正则实现 string.trim()
```javascript
function trim(string) {
return string.replace(/^\s+|\s+$/g, '')
}
```
## JS 原型是什么？
参考链接：
- [什么是 JS 原型链？](https://zhuanlan.zhihu.com/p/23090041)
## ES 6 中的 class 了解吗？
参考链接：
- <https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes>
## 如何实现继承
- 构造函数
- 原型链
- extends
```javascript
```
```javascript
```
```javascript
```
```javascript
```

61
13-前端面试/03-面试题积累/JavaScript高级面试：前言.md Normal file
View File

@@ -0,0 +1,61 @@
## 前言
一、基础知识：
- ES 6常用语法：class 、module、Promise等
- 原型高级应用：结合 jQuery 和 zepto 源码
- 异步全面讲解：从原理到 jQuery 再到 Promise
二、框架原理：
- 虚拟DOM：存在价值、如何使用、diff算法
- MVVM vue：MVVM、vue响应式、模板解析、渲染
- 组件化 React：组件化、JSX、vdom、setState
三、混合开发：
- hybrid
- H5
- 前端客户端通讯
内容优势
- 面试官爱问“源码”、“实现”。
- 介绍常用框架实现原理
- 介绍hybrid原理和应用
## ES6
- 模块化的使用和编译环境
- Class与JS构造函数的区别
- Promise的用法
- ES6其他常用功能
## 异步
- 什么是单线程，和异步有什么关系

94
13-前端面试/03-面试题积累/MVVM.md Normal file
View File

@@ -0,0 +1,94 @@
## 前言
MVVM的常见问题：
- 如何理解MVVM
- 如何实现MVVM
- 是否解读过Vue的源码
题目：
- 说一下使用 jQuery 和使用框架的区别
- 说一下对 MVVM 的理解
- vue 中如何实现响应式
- vue 中如何解析模板
- vue 的整个实现流程
## 说一下使用 jQuery 和使用框架的区别
## MVVM / Vue
## MVVM模式
- Model：负责数据存储
- View：负责页面展示
- View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
数据驱动视图，只关心数据变化，DOM操作被封装。
### MVVM / Vue的三要素
- **响应式**：vue 如何监听到 data 的每个属性变化？
- **模板引擎**：vue 的模板如何被解析，指令如何处理？
- **渲染**：vue 的模板如何被渲染成 html ？以及渲染过程
### 什么是虚拟 DOM
传统的web开发，是利用 jQuery操作DOM，这是非常耗资源的。
我们可以在 JS 的内存里构建类似于DOM的对象，去拼装数据，拼装完整后，把数据整体解析，一次性插入到html里去。这就形成了虚拟 DOM。
Vue1.0没有虚拟DOM，Vue2.0改成了基于虚拟DOM。
### 如何理解MVC
C指的是Controller。控制器能够控制视图的变化，也能控制数据的变化。
单项通信。一般情况下是：view 发出命令给控制器，控制器处理业务逻辑后控制 Model，Model再去改 view。
## hybrid
### 使用场景
不是所有的场景都适合用 hybrid：
- 使用原生应用：体验要求极致，变化不频繁（如头条的首页）
- 使用 hybrid：体验要求高，变化频繁（如新闻详情页）
- 使用H5：体验无要求、不常用（比举报、反馈等）

65
13-前端面试/03-面试题积累/http.md Normal file
View File

@@ -0,0 +1,65 @@
## HTTP 状态码知道哪些？
301 和 302 的区别：
- 301 永久重定向，浏览器会记住（有缓存）
- 302 临时重定向（无缓存）
## HTTP 缓存怎么做？
强缓存：
- **`Expires`**或**`Cache-Control`**
协商缓存：
- 第一对：`Last-Modified`、`If-Modified-Since`
- 第二对：`ETag`、`If-None-Match`
## Cookie 是什么？Session 是什么？
### Cookie
- HTTP响应通过 Set-Cookie 设置 Cookie
- 浏览器访问指定域名是必须带上 Cookie 作为 Request Header
- Cookie 一般用来记录用户信息
### Session
- Session 是服务器端的内存（数据）
- session 一般通过在 Cookie 里记录 SessionID 实现
- SessionID 一般是随机数
## LocalStorage 和 Cookie 的区别是什么？
- Cookie 会随请求被发到服务器上，而 LocalStorage 不会
- Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右
## GET 和 POST 的区别是什么？
GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
需要注意的是，web 中的 get/post 只是 http 中的 get/post 的子集。http 中的 get 与 post 只是单纯的名字上的区别，get 请求的数据也可以放在 request body 中，只是浏览器没有实现它，但是 get 并不只是在 web 中使用
参考链接：
- <http://www.cnblogs.com/zichi/p/5229108.html>
- <https://zhuanlan.zhihu.com/p/22536382>

7
13-前端面试/03-面试题积累/z-web安全.md Normal file
View File

@@ -0,0 +1,7 @@
## 前言
攻击的原理也许你能讲出来，主要是想知道如何发现这个网站的漏洞，毕竟大部分的网站都已经把用户输入的内容各种花式过滤了

6
13-前端面试/03-面试题积累/z-其他.md Normal file
View File

@@ -0,0 +1,6 @@
## 前端基础
### 闭包和作用域，面试喜欢问。

21
13-前端面试/03-面试题积累/z-推荐文章.md Normal file
View File

@@ -0,0 +1,21 @@
## 征服JavaScript面试系列 | 众城翻译
- [征服 JavaScript 面试：什么是闭包？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-closure)
- [征服 JavaScript 面试：什么是函数组合](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-function-composition)
- [征服JavaScript面试系列：类继承和原型继承的区别](http://www.zcfy.cc/article/master-the-javascript-interview-what-s-the-difference-between-class-amp-prototypal-inheritance-2185.html)
- [征服 JavaScript 面试：什么是纯函数](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-pure-function-2186.html)
- [征服 JavaScript 面试: 什么是函数式编程？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-functional-programming-2221.html)
- [征服 JavaScript 面试: 什么是 Promise？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-promise)

4
13-前端面试/03-面试题积累/z-计算机网络.md Normal file
View File

@@ -0,0 +1,4 @@
- [HTTP最强资料大全](https://github.com/semlinker/awesome-http)

16
13-前端面试/03-面试题积累/函数.md Normal file
View File

@@ -0,0 +1,16 @@
```
var arr = [1, 2, 3];
fun(arr);
console.log(arr);
function fun(a) {
a = [];
}
```
上方代码的打印结果是：[1,2,3]

360
13-前端面试/03-面试题积累/变量提升的题目.md Normal file
View File

@@ -0,0 +1,360 @@
## 变量提升
先说三句总结性的话：
- let 的「创建」过程被提升了，但是初始化没有提升。
- var 的「创建」和「初始化」都被提升了。
- function 的「创建」「初始化」和「赋值」都被提升了。
### 变量提升的规律
在进入一个执行上下文后，先把 var 和 function 声明的变量前置，再去顺序执行代码。
PS：作用域分为全局作用域和函数作用域，用var声明的变量，只在自己所在的所用域有效。
我们举例来看看下面的代码。
**代码 1：**
```javascript
console.log(fn);
var fn = 1;
function fn() {
}
console.log(fn);
```
相当于：
```javascript
var fn = undefined;
function fn() {
}
console.log(fn);
fn = 1;
console.log(fn);
```
打印结果：
![](http://img.smyhvae.com/20180321_1810.png)
**代码 2：**
```javascript
console.log(i);
for (var i = 0; i < 3; i++) {
console.log(i)
}
```
相当于：
```javascript
var i = undefined;
console.log(i);
for (i = 0; i < 3; i++) {
console.log(i);
}
```
打印结果：
![](http://img.smyhvae.com/20180321_1817.png)
**代码 3：**
```javascript
var a = 1;
function fn() {
a = 2;
console.log(a)
var a = 3;
console.log(a)
}
fn();
console.log(a);
```
相当于：
```javascript
var a = undefined;
function fn() {
var a
a = 2
console.log(a)
a = 3
console.log(a)
};
a = 1;
fn();
console.log(a);
```
打印结果：
![](http://img.smyhvae.com/20180321_1827.png)
参考链接：<https://github.com/jirengu/javascript-tutorial>
### 声明时的重名问题
假设`a`被声明为变量，紧接着`a`又被声明为函数，原则是：声明会被覆盖（先来后到，就近原则）。
PS：
- 如果`a`已经有值，再用 var 声明是无效的。
- 如果`a`已经有值，紧接着又被赋值，则**赋值会被覆盖**。
举例1：
```javascript
var fn; //fn被声明为变量
function fn() {// fn被声明为function，就近原则
}
console.log(fn); //打印结果：function fn(){}
```
举例2：
```javascript
function fn() {} //fn被声明为function，且此时fn已经被赋值，这个值就是function的对象
var fn; //fn已经在上一行被声明且已经有值， 再 var 无效，并不会重置为 undefined
console.log(fn) //打印结果：function fn(){}
```
既然再var无效，但是再function，是有效的：
```javascript
function fn() {} //fn被声明为function，且此时fn已经有值，这个值就是function的对象
function fn() { //此时fn被重复赋值，会覆盖上一行的值
console.log('smyhvae');
}
console.log(fn)
```
打印结果：
![](http://img.smyhvae.com/20180321_1845.png)
### 函数作用域中的变量提升（两点提醒）
**提醒1：**
在函数作用域也有声明提前的特性：
- 使用var关键字声明的变量，是在函数作用域内有效，而且会在函数中所有的代码执行之前被声明
- 函数声明也会在函数中所有的代码执行之前执行
因此，在函数中，没有var声明的变量都会成为**全局变量**，而且并不会提前声明。
举例1：
```javascript
var a = 1;
function foo() {
console.log(a);
a = 2; // 此处的a相当于window.a
}
foo();
console.log(a); //打印结果是2
```
上方代码中，foo()的打印结果是`1`。如果去掉第一行代码，打印结果是`Uncaught ReferenceError: a is not defined`
**提醒2：**定义形参就相当于在函数作用域中声明了变量。
```
function fun6(e) {
console.log(e);
}
fun6(); //打印结果为 undefined
fun6(123);//打印结果为123
```
### 其他题目
**20180321面试题：**
```javascript
var a = 1;
if (a > 0) {
console.log(a);
var a = 2;
}
console.log(a);
```
打印结果：
```
1
2
```
上方代码中，不存在块级作用域的概念。if语句中用var定义的变量，让然是全局变量。
顺便延伸一下，用let定义的变量，是在块级作用域内有效。
```javascript
```
```javascript
```
```javascript
```
```javascript
```
```javascript
```

35
13-前端面试/03-面试题积累/异步.md Normal file
View File

@@ -0,0 +1,35 @@
## 面试题
### 20180321面试题
```javascript
console.log(1);
setTimeout(function () {
console.log(2);
}, 1000);
setTimeout(function () {
console.log(3);
}, 0);
console.log(4);
```
### 20180321面试题
```javascript
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
setTimeout(function () {
console.log(i);
}, 0);
}
```
打印结果：3，3，3

213
13-前端面试/03-面试题积累/我的面试经历 by 千古壹号.md Normal file
View File

@@ -0,0 +1,213 @@
## 20180323
### 什么是闭包，闭包有什么作用。
### ES6的新特性有哪些。
作用域、函数扩展（扩展运算符、默认参数、箭头函数）、异步promise、模块化。
### 追问：const常量有什么作用？确定不能修改吗？修改之后会报错吗？你有没有试过？
当时我的答案是斩钉截铁地说不能改，其实我说错了。后来查了一下，准确答案是：
- 如果是值类型，值不可变
- 如果是引用类型，地址不可变
所以说，虽然我不能修改引用类型的指向，但是我可以修改引用类型里的属性值。
参考链接：<https://segmentfault.com/q/1010000012836140?sort=created>
### 追问：const的原理是什么？
面试官问：如果你定义了const，什么是常量？是它的值还是引用？比如说，我定义了一个const 的array，那我能往里面插入数据吗？
### 箭头函数和匿名函数有什么区别吗？
箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
普通函数的this指向是动态作用域；箭头函数的this指向是依据词法作用域。
参考链接：<https://zhuanlan.zhihu.com/p/25093389>
### 可以讲一下promise的状态吗？
### 追问：如果我写setTimeout（0），再写一个promise，哪个先执行？
我回答错了。
正确答案是：任务队列可以有多个，promise的任务队列，优先级更高。具体答案还需要再仔细看看。
### http有了解吗？
- 可以讲一下它的握手过程吗？
- http的缓存有了解吗？
- get和post区别
### 做过CDN吗？
答得不具体。
百度百科的解释是：其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
### Vue相关
- vue的双向绑定怎么实现的？我是说怎么实现？
我当时是回答MVVM模式。其实还需要答出Object.defineProperty( )的细节，以及虚拟DOM。
- Vue里还有什么呢？
数据驱动、组件化。
### 事件绑定：onClick和addEventListener的区别
### 说一下DOM里的事件冒泡
### 用Webpack做过哪些功能？
### 追问：ES6转成ES5，改动代码，发现页面自动刷新。你说一下整个流程。
问的是webpack 自动刷新的流程。我没回答好。
### 追问：既然webpack可以用来配置服务器，如果我要联调，怎么办？
问：启动了webpack，就可以直接连接到后端吗？
### 说一下跨域
### gzip压缩有了解吗
### 你做过什么项目？说一下？
答：我做过电商网站。
追问：遇到过什么问题吗？
答：我遇到了性能的问题。
追问：那你说一下性能的问题
我就答出了性能相关的五大点。
### node和express有了解吗？
### 追问requireJS，是异步的吗？
是异步的。
### Vue你是怎么用的？是把所有的代码都写在一个页面里的吗
答：我是模块化写的。
问：怎么分类？
追问：vuex的的作用
### 移动端的触摸事件了解吗？
- touchstart touchmove touchend touchcancel（touchcancel当触点由于某些原因被中断时触发）
- 模拟 swipe 事件：记录两次 touchmove 的位置差，如果后一次在前一次的右边，说明向右滑了。
### 移动端的浏览器和电脑浏览器的 touch事件，有区别吗？
我说我没了解过。
追问：移动端默认会有0.2秒的延迟。
我后来查了一下：
点击延迟：是指移动端浏览器在 touchend 和 click 之间存在 300ms ～ 350ms 的延迟。
为了判断用户是否是进行双击操作。因为移动端双击是放大文字的手势操作。
主要是从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击（double tap）操作。
解决方法：
- 将click事件换成touch end事件
- FastClick：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。
事件发生顺序：在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。
### 如何自定义事件
自定义事件的代码如下：
```javascript
var myEvent = new Event('clickTest');
element.addEventListener('clickTest', function () {
console.log('smyhvae');
});
//元素注册事件
element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
```
### 说一下状态码
### 手机端的web开发，怎么和原生做交互？
问：比如web网页，想调用手机的拍照功能，怎么做？再比如怎么分享到朋友圈？
### vue的生命周期，有了解吗
create和mount有什么区别吗
什么时候执行update

21
13-前端面试/03-面试题积累/清单.md Normal file
View File

@@ -0,0 +1,21 @@
01.md
### CommonJS、RequireJS(AMD) SeaJS（CMD）区别
### Webpack 打包
### WebSocket
### ES6
会 ES6 是应该的部分，不算加分项。

42
13-前端面试/03-面试题积累/网友面经.md Normal file
View File

@@ -0,0 +1,42 @@
### 2018-03-08
- [jawil | 一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22)
此博主的博客签名：
20180308_1703.png
- [2017我遇到的前端面试题](https://blog.dunizb.com//2017/09/08/interview-questions-2017/)
作者整理的这些题目，很多是来自面试跳槽的视频。非常推荐。
作者说，性能优化和ES6，是必问的。
- [2018年web前端经典面试题及答案](https://www.cnblogs.com/wdlhao/p/8290436.html)
写得很长啊。
### 2018-03-11
- [2017年BAT面试题大全集](http://www.bijishequ.com/detail/421600?p=)
- [bat前端面试内容记录](https://www.jianshu.com/p/d94d5290328c)
### 2018-03-18
- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
- [笔记补充：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/07/06/interview-answers.html)

56
13-前端面试/03-面试题积累/虚拟DOM.md Normal file
View File

@@ -0,0 +1,56 @@
## 前言
vdom 是 vue 和 React 的**核心**，先讲哪个都绕不开它。
vdom 比较独立，使用也比较简单。
如果面试问到 vue 和 React 和实现，免不了问 vdom：
- vdom 是什么？为何会存在 vdom？
- vdom 的如何应用，核心 API 是什么
- 介绍一下 diff 算法
## 什么是 vdom
### 什么是 vdom
DOM操作是昂贵的。
步骤一：用JS对象模拟DOM树
步骤二：比较两棵虚拟DOM树的差异
步骤三：把差异应用到真正的DOM树上

63
13-前端面试/03-面试题积累/面经链接推荐.md Normal file
View File

@@ -0,0 +1,63 @@
### 2018-01-25
- [有时在面试时，我都替候选人着急——候选人完全可以在面试前准备](https://www.cnblogs.com/JavaArchitect/p/8353578.html)
### 2018-01-26
- [转眼人到中年：前端老程序员无法忘怀的一次百度电话面试](https://www.cnblogs.com/chyingp/p/a-telephone-interview-long-age.html)
八年前的面经，咋记得这么清楚？
### 2018-01-27
- [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html)
### 2018-02-04
- [2018秋招前端总结](https://www.cnblogs.com/Mr-stockings/archive/2018/02/02/8407295.html)
### 2018-02-25
- [前端开发面试题(CSS)](http://www.bijishequ.com/detail/379621)
- [超过20家的前端面试题](https://www.jianshu.com/p/8b68f4df749e)
- [来聊聊前端工程师的面试套路](https://baijiahao.baidu.com/s?id=1570338146494165&wfr=spider&for=pc)
- [我的前端进阶之路（面试题）](https://www.cnblogs.com/libin-1/p/6864344.html)
这几个链接里讲到了 less。听说面试爱问 less 和 Sass的区别。
### 2018-03-02
- [记录前端的面试日常(持续更新)](https://www.cnblogs.com/fangdongdemao/p/8492563.html)
### 2018-03-06
- [我遇到的前端面试题2017](https://segmentfault.com/a/1190000011091907)
里面有很多面试跳槽里的内容。

70
13-前端面试/03-面试题积累/面试技巧 by 千古壹号.md Normal file
View File

@@ -0,0 +1,70 @@
## 写简历的注意事项
- 最多可以写“深入了解”，但不要写“精通”。
## 遇到不知道的问题，该怎么回答
- 这块儿我没了解过，准备回去看一下。
- 这块儿我没研究过，您有没有好的资料，我可以补充一下细节。
- 写不出详细的代码，但是知道思路。
## 项目经历
- 面试要体现项目的设计思路、方案设计等
## 模块化思维
（1）模块化设计的关键词：**封装、继承**；把**通用**的模块**先抽象，后具体**，达到**复用**。【面试记住】
比如，**panel、按钮、轮播图**、列表等等，都可以提取为**抽象**的组件，复用。
（2）页面有哪几个模块
（3）每个模块分成不同的文件，然后在index页面中import。
## ES6新特性
- let、const
- 函数扩展：参数默认值、箭头函数、扩展运算符`...`
- for of 循环
- map
- 模块化
## 薪资
面试官；"你要求多少薪资？"
我：“能给个范围吗？”

149
13-前端面试/03-面试题积累/面试题整理 by 千古壹号.md Normal file
View File

@@ -0,0 +1,149 @@
## JavaScript
### 存储相关：请描述以下cookie、localStorage、sessionStorage的区别
> 在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了， 就开始用后面的两个做本地存储。
**1、cookie**：
- 本身用于客户端和服务器端的通信。
- 但是它有本地存储的功能，于是就被“借用”。
我们可以通过`document.cookie`获取和修改cookie，获取到的其实就是一个字符串。
cookie用于存储时的缺点：
- 存储量太小，只有4kb
- 所有http请求都带着，会影响获取资源的效率
- api简单，需要封装才能用。`document.cookie = ...`
## HTML5
### HTML5新增了哪些内容或API？使用过哪些？
新元素：
- `<section>`、`<footer>` 和 `<header>`等
新的api：
- 网络存储: sessionStorage 和 localStorage
参考链接：
- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
## CSS
### 如何让一个div元素隐藏？你能想到的方式有几种？
-
## ES6
### for each、for in、for of的区别
- `foreach`用于遍历数组，是数组的一个方法。不支持 return。
- `for in`获取对象里属性的键。
- `for of`获取对象里属性的值。
## 网络相关
### 浏览器输入url到显示内容，有哪些过程
（1）浏览器解析url。包括：协议、域名、端口号、资源路径、参数查询
（2）DNS解析
（3）TCP握手
（4）HTTP请求
（5）服务器处理请求
（6）浏览器渲染：DOM tree、CSS rule tree、render tree。
（7）display
参考链接：
- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
- [what-happens-when-zh_CN](https://github.com/skyline75489/what-happens-when-zh_CN)
- [码农翻身 | 小白科普：从输入网址到最后浏览器呈现页面内容，中间发生了什么？](https://mp.weixin.qq.com/s/3_DZKSP492uq9RfQ3eW4_A)
- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
## GitHub
- [荐]面试题和答案：<https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers>
- 面试题和答案：<https://github.com/qiu-deqing/FE-interview>
有个题是，浏览器输入url，有哪些过程
- [讲到了Cookie和session](https://github.com/WarpPrism/Blog/issues/5)
- 这个也很全：<https://github.com/gnipbao/Front-end-Interview-questions>
- <https://github.com/giscafer/front-end-manual/issues/3>
## 按时间排列
### 2018-03-11
- web前端面试题汇总：<https://www.jianshu.com/p/2f7eb1ad7174>
- 2017前端面试题及答案总结：<https://yeaseonzhang.github.io/2017/09/17/2017%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E5%8F%8A%E7%AD%94%E6%A1%88%E6%80%BB%E7%BB%93/>
### 2018-03-12-今日头条面试题
- [ 今日头条一面笔试面试题！！！！！完整](http://blog.csdn.net/github_35924246/article/details/75675901)