xu455255849/myblog

vue＋node＋mongodb的博客

myblog's Issues

挖财 / 有赞电话面试 面试分享

动画相关

//html
<div class="btn">
  <div class="change"></div>
</div>

//css

 .btn  {
      width: 100px;
      height: 20px;
      background: coral;
      border: 1px solid #5e6d82;
    }
    .change {
      width: 0;
      height: 20px;
      background: #2D93CA;
      transition: all 2s;
    }
    .btn:hover .change {
      width: 100px;
    }

参考：https://codepen.io/JulianLaval/pen/KpLXOO

案例可能会变，主要考察 transition / animation 动画相关的知识点

浏览器内核相关

trident / IE浏览器

gecko / firefox浏览器

webkit 内核 / safari & Chorome

差异：渲染机制不同

参考：https://juejin.im/entry/5a05a25c51882535cd4a4c6b

搜索引擎找了一波，分享内容不多，特别是针对差异的文章。。。

JS语言特性

1、 解释型语言 - 不需要编译，直接解释运行

2、弱类型 - 对变量没有严格数据类型要求

3、跨平台 - 只要有js解释器 支持，能在任何地方运行

4、 基于对象 - 不仅能创建对象，也能基于对象创建对象 （原型链）

http 协议 / 缓存机制

强缓存 / 优先级最高，如果存在且未过期则直接返回缓存内容

Expires / http1.0 缺陷：受限于本地时间，如果修改本地时间则会失效

Cache-Control / http1.1

协商缓存 / 缓存过期则会进行协商缓存

Last-Modified 和 If-Modified-Since / http1.0

Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来。

但是如果在本地打开缓存文件，就会造成 Last-Modified 被修改，所以在 HTTP / 1.1 出现了 ETag

ETag 和 If-None-Match / http1.1

ETag 类似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来

参考： https://mp.weixin.qq.com/s/y-yajw1GaWLKUdOJo3cbew

虚拟dom 算法

参阅： https://segmentfault.com/a/1190000016129036

浏览器渲染机制

渲染机制主要和浏览器内核有关，不同浏览器渲染流程不同

参考：https://juejin.im/entry/59e1d31f51882578c3411c77

什么是骨架屏

参考：https://segmentfault.com/a/1190000014832185

lazyload 实现原理

核心概念： 滚动监听 / 元素位置 / 可视区域

深入学习：看 GitHub 懒加载的库源码 -lazy load

箭头函数和 普通函数的区别

由于this在词法层面完成绑定，this指针无法被修改

没有原型对象
var foo = () => {};
console.log(foo.prototype) //undefined

无法使用new操作符
var Foo = () => {};
var foo = new Foo();  //Foo is not a constructor

箭头函数不绑定arguments,取而代之用rest参数…解决
function foo(...args) {
  return args;
}
foo(1, 2, 3);  // [1,2,3]

js遍历对象

1、 for in 循环 / 循环遍历自身的和继承的可枚举属性

2、Object.keys(obj) / 返回一个数组，包括对象自身的（不含继承）所有可枚举属性

3、getOwnPropertyNames() / 用于返回对象所有属性，包含可枚举属性和不可枚举属性，不包含Symbol属性

4、 Object.getOwnPropertySymbols() / 用于返回对象所有属性，包含可枚举属性和不可枚举属性，只包含Symbol属性

computed 相关

1、计算属性拥有缓存优势 / 缓存内部实现原理

2、默认只有getter，可以手动设置setter，没有设置情况下赋值会报错

CORS 相关

简单请求：

1、使用 get 、 head 、 post

2、content-type 必须为text/plain、multipart/form-data、application/x-www-form-urlencoded之一

3、没有人为设置规范外header字段

不满足以上要求均为复杂请求，发送请求之前会先进行预检请求

cors 携带 cookie 相关

cors中请求默认不携带cookie，除非满足以下条件：

1、请求配置了 withCredentials = true;

2、后端配置了 Access-Control-Allow-Credentials: true

3、Access-Control-Allow-Origin 设置不为 *

参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

fork了一份~

一直想写一个自己的博客，一直懒得动手~博主这个还热乎着呢哈哈，博主加油

权限校验问题

文章详情里
admin: localStorage.getItem('username') === '徐绍平'
这样不全安啊，我在本地写了一个同样的key，结果竟然可以弹出删除modal，这一块楼主还要考虑一下

微一案笔试题分享

1 哪些操作会引起内存泄漏，如何发现

一些常见的内存泄露代码

// 意外的全局变量
functuon foo () { bar = 1} //函数里直接对未定义的变量赋值，导致变量存在顶部Window中，内存垃圾无法回收

//闭包变量被引用导致无法被回收
function fun2() {
    var obj = { a: 2 }
    return obj;
}	
var a =  fun2()

//被遗忘的定时器

function Test()  {  
    this.obj= {};
    this.index = 1;
    this.timer = null;
    var cache = []; // 内部变量，内存隐患...
    this.timer = window.setInterval(() =>{
        this.index += 1; 
        this.obj = {
            val: '_timerxxxxxbbbbxx_' + this.index,
            junk: [...cache]
        };
        cache.push(this.obj);
    }, 1);  
    console.warn("create Test instance..");
}  
test = new Test(); // JS对象开启定时器不断分配内存


...

参考文章：

https://juejin.im/post/5a8e7f6df265da4e832677ec

wengjq/Blog#1

如何查看内存占用情况

###web
googol控制台 》 performance 面板 > 勾选 Memory
点击左上角的录制按钮。
在页面上进行各种操作，模拟用户的使用情况。
如果内存占用基本平稳，接近水平，就说明不存在内存泄漏。反之，就是内存泄漏了。

###node

console.log(process.memoryUsage()); //node

2 以下代码输出

typeof Vue
typeof React
typeof jQery	

function github Vue

object github React

function github Jquery

ps：话说我写了这么久Vue。还从来没操作过typeof vue。。。。

3 下面代码输出

class F {
  init () {
		console.log（1）
  }
}
var f = new F()

F.prototype.init = function () {
  console.log(2)
}

f.init() //2

4 如何在数组头部、尾部、中部增加/删除

头部：unshift / shift

中部：splice / concat

尾部： push / pop

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

5 手写防抖/节流 实现

function throttleAndDebounce(fn, delay, isThrottle) {
  let lastCallTime = 0, timer = null;
  return  (...args) => {
    if (isThrottle) {
      const now = Date.now()
      if (now - lastCallTime < delay) return
      lastCallTime = now
      fn(...args)
    } else {
      if (timer) clearTimeout(timer)
      timer = setTimeout( () => {
        fn(...args)
      }, delay)
    }
  }
}

6 filter/reduce 实现数组去重

var arr = [1,2,1]

arr.filter( (it, idx, arr) => {
  return arr.indexOf(it) === idx
})

// reduce
var reducer = (arr, cur) => {
  if ( arr.length === 0 || arr[arr.length - 1] !== cur) {
    arr.push(cur)
  }
  return arr
}
arr.sort().reduce(reducer, [])

7 原生实现 上传base64 图片

<input id="file" type="file" />
var file = document.getElementById('file').files[0]
var reader = new FileReader()
    reader.onload = function (e) {
      $.post('/upload' , { "base64": e.target.result } , function () {})
    }
    reader.readAsDataURL(file)

8 写成3种前端下载文件方式

参考： https://segmentfault.com/a/1190000016906180

ps：这也算！！？浏览器打开。。。内心一度崩溃，真的是为了面试而面试。。

9 手写promise 实现

参考：

https://www.jianshu.com/p/43de678e918a

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7

10 vue实现数据绑定有什么缺陷？作者为什么改用proxy实现

参考：https://zhuanlan.zhihu.com/p/50547367

后记

有些问题 我没给出答案，只给出一些参考链接，主要是才疏学浅，不能给出一个绝对完美的答案；或者答案的内容量可以再写一篇深入专研的文章，大家有什么好的意见或者文章错误可以留言补充；欢迎技术交流

ps：一年没面试了第一次做这种笔试题，我表示一个笔都好久没握过的人瑟瑟发抖。。。建议大家不要裸辞。。这个夏天有点冷。。。