日常总结

2019-05-28  本文已影响0人  风吹过的空气

谈一下对于React的了解

React16相对于15有什么优点，有哪些更新

对于electron的理解

谈一下自己写的ui组件（bitrabbit-passport-ui）

源代码

谈一下对模块化的理解

dva是什么

MVC与MVVM

重绘与回流

回流必将引起重绘，而重绘不一定会引起回流。

减少重绘与回流：

  1. CSS
    • 将动画效果应用到position为fixed或者absolute的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流。
    • 控制动画速度可以使用requestAnimationFrame。
    • 避免使用css表达式，以免引起回流。
  2. JS
    • 避免频繁操作样式
    • 避免频繁操作dom
    • 避免频繁读取会引发重绘/回流的属性
    • 对具有复杂动画的元素使用绝对定位。

new一个对象做了什么

1.创了一个新对象;
2.this指向构造函数;
3.构造函数有返回,会替换new出来的对象,如果没有就是new出来的对象

什么是懒加载（lazyload），什么时候用到

路由懒加载

跨域方法

前端缓存

居中的方法

原生js写一个轮播图

简单说一下产品

闭包

好处：
1. 方便调用上下文的变量
2. 当闭包作为另外一个函数调用的参数时，避免脱离当前逻辑而单独编写另外的逻辑
3. 加强封装性，达到保护变量的作用
坏处：
1. 内存浪费
优化：
1. 尽量避免使用闭包
2. 退出函数时，将不使用的局部变量全部删除

前端性能优化

JS设计模式

js堆栈

堆栈可分为堆和栈，两者都是临时存储数据的地方。

原型链

如何判断是否为一个对象的属性

  1. in: if ('name' in obj ) {}
  2. hasOwnProperty: 只判断是否为自身属性
  3. 用.或者[]: 对象或者原型链上不存在则返回undefined

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

  1. 箭头函数的this指向的是定义时所在的对象，而普通函数的this指向的是使用时所在的对象
  2. 箭头函数没有arguments
  3. 箭头函数的this指向不会改变，没办法用call和apply改变this的值
  4. 箭头函数是匿名函数，而不是构造函数，所以没法new出来
  5. 箭头函数没有原型

高阶组件

在浏览器里面输入url到页面渲染完的过程中发生了什么

  1. DNS解析
  2. TCP连接
  3. 发送HTTP请求
  4. 服务器处理请求并返回HTTP报文
  5. 浏览器解析渲染页面
  6. 连接结束

promise的原理

const PENDING = 0;
const FULFILLED = 1;
const REJECTED = 2;
function Promise(fn) {
  let values;
  let callbacks = [];

  function resolve()
}

## lodash里面的方法的原生实现

## http与https有什么区别
1. 默认端口的区别：http是80，https是443
2. https协议需要到ca申请证书，一般免费证书很少，需要交费。
3. HTTP（Hypertext Transfer Protocol）超文本传输协议/HTTPS（Secure Hypertext Transfer Protocol）安全超文本传输协议
4. 

## babel原理
* **babel默认只是转译新标准引入的语法，比如ES6的箭头函数，不转换新的API，API需要polyfill来转译**
* babel转译分为三个阶段：parsing（解析）、transforming（编译）、generating（生成）。
    1. 编写es6代码
    2. babylon进行解析
    3. 解析得到AST树
    4. plugin用babel-traverse对AST树进行遍历转译
    5. 得到新的AST树
    6. 用babel-generator通过AST树生成新的es5代码

## babel的preset/env，stage-0等5个阶段
* env只会去编译当年新出的语法
* stage-0到stage-4，分别为展示阶段、征求意见阶段、草案阶段、候选人阶段、正式定案阶段，一般只要能进入到stage-2阶段的基本都能进入最终的标准语法内。

## promise.all 与 promise.race
* promise.all：接收一个数组作为参数，返回的是一个数组
``` js
  const promise1 = Promise.resolve(3);
  const promise2 = 2;
  const promise3 = new Promise((res, rej) => {
    setTimeout(res, 100, 4);
  })
  Promise.all([promise1, promise2, promise3]).then(values => {
    console.log(values); // [3, 2, 4]
  });

  const promise1 = new Promise((res, rej) => {
    setTimeout(res, 100, 'foo');
  });
  const promise2 = new Promise((res, rej) => {
    setTimeout(res, 200, 'bar');
  });
  Promise.race([promise1, promise2]).then(values => {
    console.log(values); // 'foo'
  });

settimeout的第三个参数

setTimeout((...args) => {
  console.log(args);
}, 1000, 3, 4, 5); // [3, 4, 5]

setTimeout((...args) => {
  console.log(args); // [xx]一个随机数

}, 2000, setTimeout((...args) => {
  console.log(args); // [4]

}, 3000, 4));

通过Promise.race实现fetch的timeout

const _fetch = (requestPromise, timeout = 6000) => {
  let timeoutAction = null;
  const timerPromise = new Promise((res, rej) => {
    timeoutAction = () => {
      rej('[timeout]');
    };
  };
  setTimeout(timeoutAction, timeout);
  return Promise.race([timeoutAction, requestPromise]);
};

## localStorage/sessionStorage/cookie的区别
|特性|cookie|localStorage/sessionStorage|
|:-----:|:----:|:----:|:----:|
|声明周期|一般由服务器生成，可设置失效时间|除非主动删除，否则永久有效/关闭浏览器就失效|
|体积大小|4k左右|5M|5M|
|与服务器的通信|每次都存放在http请求的头中，如果过多数据放在cookie中会存在性能问题|不与服务器通信，仅在浏览器保存|
|易用性|需要程序员自己封装，源生的Cookie接口不友好 |源生接口可以接受，亦可再次封装来对Object和Array有更好的支持|
|使用场景|登录信息携带|存储语言，其他一些需要存储的数据|
|API|document.cookie|setItem/removeItem/clearItem|

## BFC(block formatting context):块级格式上下文


## 如何将string变成html
```js
function str2ele(template) {
  const $el = document.createElement('div');
  $el.insertAdjacentHTML('beforeend', template);
  return $el.firstChild;
}
str2ele('<div><span>123</span><strong>456</strong></div>')

判断数组的三个方法

Object.prototype.toString.call()
    Object.prototype.toString.call('an') // '[object String]'
    Object.prototype.toString.call([1, 2, 3]) // '[object Array]'
    Object.prototype.toString.call({}) // '[object Object]'
    Object.prototype.toString.call(function() {}) // '[object Function]'
    Object.prototype.toString.call(Symbol(1)) // '[object Symbol]'
    Object.prototype.toString.call(null) // '[object Null]'
    Object.prototype.toString.call(undefined) // '[object Undefined]'
    Object.prototype.toString.call(1) // '[object Number]'
Array.isArray()
instanceof

npm模块安装机制，为什么输入npm install就可以自动安装对应的模块

  1. npm模块安装机制
    • 发出npm install命令
    • 查询node_module目录中是否已经存在指定模块
      如果存在，则不再重新安装
      如果不存在
      1. npm先通过registry查询到模块压缩包的下载网址
      2. 下载压缩包，存放在根目录下的.npm目录中
      3. 解压压缩包到当前项目的node_module目录中
  2. npm实现原理
    • 在输入npm install的命令并敲下回车键之后，会经历如下几个阶段
      1. 执行工程的preinstall命令
      2. 确定首层依赖模块
      3. 获取模块
      4. 模块扁平化（dedupe）
        上一次获取到的模块是一颗完整的依赖树，其中会包含大量的重复模块，比如A模块包含了lodash，B模块也包含了lodash，在npm3之前会严格按照依赖树进行按照，从而造成大量模块的冗余。
        从npm3开始默认增加了一个dedupe过程，它会遍历各个节点，逐个将模块放入根节点下，一旦发现有重复的模块，则将其丢弃。
        重复模块：指的是模块名相同，且semver兼容，每个semver都对应一段版本允许范围，如果两个模块的版本都在允许的范围之中，就会得到一个兼容的版本，而不用一定保持版本一致性
      5. 安装模块
        执行模块的生命周期（preinstall、install、postinstall）
      6. 执行工程的自身生命周期

Redux原理剖析

Proxy是什么

Proxy可以理解成，在目标对象之前设置一层拦截，外界对该对象的访问，必须要通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

const proxy = new Proxy(target, handler);

正则表达式

const regExp = /e/; // 字面量赋值，要加斜杠
const regExp1 = new RegExp('abc', ig);
console.log(regExp.test('abcde')); // true,test方法返回true或者false
console.log('abcdefg'.match(regExp)); // ["e", index: 4, input: "abcdefg", groups: undefined]
console.log(Array.from('abcdefg'.match(regExp))); // ['e']
console.log(regExp.exec('abcdefg')); // ["e", index: 0, input: "abcdef", groups: undefined]

5G

关于图片问题

  1. 完整代码
  2. axios 默认返回的是 json 文本形式，二进制图片数据被强制转换成了 json 文本形式，就会出现乱码。

nrm: 管理多个npm的registry，可以通过nrm ls 查看目前绑定的所有registry

semver：语义化版本控制规范

版本如1.3.4。
其中1是MAJOR版本，BREAKING CHANGE时才能修改；
3是MINOR版本，feat类型的提交可修改；
4是PATCH版本，fix类型提交可修改。

monorepo

  1. 这是一种管理项目代码的方式，在这种方式下会摒弃原先一个Module一个repo的方式，取而代之的是把所有的modules都放在一个repo内来管理。
  2. 比如React仓库里面包含了很多个子仓库，我们可以在packages目录下看到很多单独的packages。
  3. 目前诸如Babel，React，Angular，Ember，Meteor，Jest等等都采用了这种方式来进行源码管理

源码阅读

  1. 为什么看源码：是为了解决问题，不要为了看源码而看源码——问题驱动，要做到有的放矢
  2. 学会如何看源码
  3. 看最新版的源码：建议看最新的源码，
  4. 本地构建：把代码仓库clone到本地，然后按照readme上的构建指南，在本地build一下
  5. 理清目录结构：了解monorepo代码结构，webpack和babel一样，可以说是基于插件的系统
  6. debugger && 全局搜索：node工具调试可以在运行node命令时加上--inspect参数
  7. 总结：看源码是为了解决问题

js时间处理的痛点以及解决办法

痛点

实现一个node爬虫，可抓取最热新闻信息、NBA日报、美图、前端咨询汇总，好文

display:none/visibility: hidden/ opacity: 0的使用场景以及使用优劣

结构：
display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：
display: none: 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0: 修改元素会造成重绘，性能消耗较少

时间复杂度是什么意思

栈/队列

栈
队列

图片宽度为400px，通过css修改图片宽度为300px的方法

  1. max-width: 300px;
  2. transform: scale(0.625);
  3. zoom: 0.625;
  4. box-sizing: border-box;padding: 0 50px;

节流防抖

防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

应用场景：按钮点击事件/input事件，防止用户多次重复提交

手写debounce:

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  if (typeof func !== 'function') {
    throw new TypeError('Error')
  }
    
  // 缓存一个定时器id
  let timer = null
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

节流

每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作

应用场景：


function throttle(func, wait) {
    var previous = 0;
    return function(...args) {
        let now = Date.now();
        if (now - previous > wait) {
            func.apply(this, args);
            previous = now;
        }
    }
}

// 或者

function throttle(func, wait) {
    let timer = null;
    return function(...args) {
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(this, args);
                timer = null;
            }, wait)
        }
    }
}
// 防抖和节流可视化比较：http://demo.nimius.net/debounce_throttle/

alpha对照表

//透明度；alpha 取值对照
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

linux命令总结

tar:解压
-c 建立压缩档案 compress
-x 解压
-z 支持gzip解压文件
-v 显示所有过程
-f 使用档案名字，切记，这个参数是最后一个参数，后面只能接档案名。

commonjs（nodejs实现规范）

一个文件就是一个模块

resolve：解析

path.resovle可以将相对路径解析成绝对路径
path.parse可以将绝对路径解析成一个对象

图片对比

图片格式 支持透明 动画支持 压缩方式 浏览器支持
baseline-jpeg 不支持 不支持 有损 所有
progressive-jpeg 不支持 不支持 有损 所有
gif 支持 支持 无损 所有
png 支持 不支持 无损 所有
svg 支持 支持 无损 所有（IE8以上）

正常总结，待补充

上一篇 下一篇

猜你喜欢

热点阅读