2018-10-26 SECOM

CSS选择器，哪些属性可以继承及CSS优先级算法

• 无继承性的属性
   1.display
   2.文本属性：vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
   3.盒子模型的属性：width、height、margin、border、padding、
   4.背景属性：background等
   5.定位属性：float、clear、position、min-width/height、max-width/height、overflow、clip、z-index
   6.生成内容属性：content、counter-reset、counter-increment
   7.轮廓样式属性：outline
   8.size、page-break-bofore/after
   9.声音样式属性：pause、cue、play
• 有继承性的属性
   1.字体系列属性：font
   2.文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color
   3.元素可见性：visibility
   4.表格布局属性
   5.列表布局属性：list-style（-image/position/type）
   6.生成内容属性：quotes
   7.光标属性：cursor
   8.页面样式属性：page、page-break-inside、windows、orphans
   9.声音样式属性：spack（-punctuation/numeral/header/rate）、volume、voice-family、pitch（-range）、stress、richness、azimuth、elevation
• 所有元素可以继承的属性
   1.元素可见性：visibility
   2.光标属性：cursor
• 内联元素可以继承的属性
   1.字体系列属性
   2.除text-indent、text-align之外的文本系列属性
• 块级元素可以继承的属性
   1.text-indent、text-align

长轮训和WebSocket优缺点

长轮询：优点是在服务器无消息的时候不会频繁去请求。缺点是服务器保持长久的链接需要消耗资源，而且当多开页面同时都保持长链接的话，会导致服务器消耗过大。
WebSocket：是HTML5中的协议，是一个持久化的协议，支持持久连接。
优点：节约带宽，不会发起没有意义的请求。WebSocket整个通讯过程是在一次连接状态中，不需要反复进行http连接。
缺点：不兼容低版本的IE。

关于页面性能都可以做哪些方面的优化

1. 尽量减少HTTP请求次数：合并文件是通过把所有的脚本放到同一个文件中来减少HTTP请求的方法。把所有的背景图像放到一个图片文件中（CSS sprite）；
2. 减少DNS查找次数：域名系统提供了域名和IP的对应关系。DNS解析过程所需要的时间，浏览器什么都不会做直到DNS查找完毕。缓存DNS查找可以改善页面性能，这种缓存需要一个特定的缓存服务器，这种服务器一般属于用户的ISP提供商或者本地局域网控制，但是它同样会在用户使用的计算机上产生缓存。减少主机名的数量可以减少DNS查找次数。
3. 避免跳转：跳转是使用301和302代码实现的。
4. 可缓存的AJAX：提高Ajax性能的措施中最重要的方法时使响应具有可缓存性。
5. 推迟加载内容：可以先加载必要的页面主体结构，在确定页面运行正常后，再加载脚本来实现拖放和动画等效果。
6. 预加载：预加载是在浏览器空闲时请求将来可能会用到的页面内容，将其加载到缓存中。
7. 减少DOM元素数量
8. 根据域名划分页面内容
9. 是iframe的数量最小
10. 不要出现404错误
11. 使用内容分发网络：用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器可以加快下载速度。
12. 使用GET来完成ajax请求：浏览器中的post方法是一个“两步走”的过程，首先发送文件头，然后才发送数据。使用GET只需要发送一个TCP包。
13. 把样式表至于顶部：注重性能的前端服务器往往希望页面有秩序的加载。
14. 避免使用CSS表达式：表达式的问题在于它的计算频率比我们想象的多。
15. 使用外部JS和CSS
16. 削减JS和CSS
17. 用<link>替代@import
18. 把脚本置于页面底部：脚本带来的问题是它阻止了页面的平行下载。
19. 不要在HTML中缩放图像

Vue父子组件间通讯及非父子组件间通讯

父子组件间通讯：
 父组件给子组件传递props，父组件使用v-on来监听子组件上的自定义事件（$emit的变化）。
非父子组件间通讯：
 1.可以通过创建一个vue实例Bus作为媒介，要相互通信的兄弟组件中，都引入Bus，之后分别通过调用Bus事件触发和监听来实现组件之间的通信和参数传递。
 2.使用vuex状态管理。

vue使用脚手架有什么缺点？

使用脚手架生成项目架构是一个标准化的过程，它是没有办法直接契合我们想要的模样，会存在我们不需要的功能或者缺少我们需要的功能。因为不是从头开始搭建的项目框架，在涉及到项目架构改动或者需要升级webpack版本等需求时，因为不是自己定制的脚手架，不了解vue+webpack的工作流程，就有可能出现了问题无从解决。

关于vue的浏览器兼容

Vue官方对IE浏览器版本兼容情况的描述是ie9+经过测试，Vue的核心框架vuejs本身，以及生态的官方核心插件（VueRouter，Vuex等）均可以在ie9
上正常使用。
ie9环境下需要处理的兼容问题：

• ES6兼容：解决方案是使用babel-polyfill组件，他可以将ES6的代码翻译成低版本浏览器可以识别的es5代码。
• Number对象：即使在使用babel-polyfill做代码翻译后，还是有一些es6的新特性并没有得到解决。es6将全局方法parseInt和parseFloat一直到Number对象上，行为完全不变。这样做的目的是逐步减少全局方法，使得语言逐步模块化。
• requestAnimationFrame方法：window.requestAnimationFrame是浏览器用于定时循环操作的一个接口，主要用途是按帧对网页进行重绘。其优势在于充分利用显示器的刷新机制，比较节省资源。该方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。window.requestAnimationFrame的最低兼容ie版本为10，那么在ie9上做兼容就需要制作requestAnimationFrame polyfill

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                  || window[vendors[x]+'CancelRequestAnimationFrame'];
  }
  
  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
       timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  
  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

• http网络请求（跨域）
  axios进行数据请求时，默认使用XMLHttpRequest对象，在检测到当前请求时跨域访问时，axios会测试浏览器是否支持XDomainRequest对象，若支持则优先使用。
  ie8/9中的XMLHttpRequest对象不支持跨域访问，该对象在ie10后才原生支持访问。微软的解决方案是在ie8/9中提供了XDomainRequest（XDR）对象来进行解决跨域问题，虽然使用该对象可以跨域访问成功，并返回数据，但它却仍然是一个功能不完整的半成品，它的使用由诸多限制：
   1.XDR仅支持GET和POST两种请求方式
   2.不支持自定义的请求头，若服务器使用header的自定义参数进行身份验证，则不可用
   3.请求头的Content-Type只允许设置为text/plain
   4.不允许跨协议的请求，如果网页在HTTP写一下，就只能请求HTTP协议下的接口，不能访问HTTPS接口
   5.XDR只接受HTTP/HTTPS的请求
   6.发起请求的时候，不会懈怠authentication或cookies
  微软提供的解决方案，根本无法胜任系统中各种场景的数据请求需求，至此，axios对ie9的跨域数据请求已无能为力
• 完美解决方案：代理
  webpacl的devServer.proxy的功能是由http-proxy-middleware项目来实现的。实现原理是将目标位置的请求代理为前端服务本地的请求。此时，axios会用回XMLHttpRequest对象进行数据请求。
  不过，webpack的devServer.proxy仅在开发模式下可用，生产模式下无法使用。
• nginx配置
  虽然devServer.proxy的功能只能工作于开发模式，但是生产模式下，也有解决方案。通常Vue的项目在编译成最终js之后，仅需要静态服务器即可，其中以nginx为最优选择方案，轻量、高性能、高并发、反向代理服务等均为其优点，这里需要做的数据请求代理的功能就使用到了nginx的反向代理的功能。

location /api/ {
  proxy_pass [http://localhost:8081/myserver/;](http://localhost:8081/myserver/;)
}

该配置同样是将目标服务器位置代理为本地服务的/api路径，如此，生产环境的数据请求问题也得到解决。

前端页面突然需要处理大量数据，应该怎么处理

1. 卡顿主要出现在DOM操作上，拿到数据后可以懒加载渲染数据
2. 使用requestAnimationFrame：与setTimeout和setInterval不同，该api不要设置时间间隔。（HTML5新增的定时器）。
   setTimeout和setInterval问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行。
   requestAnimationFrame采用系统时间间隔，保持最佳绘制效率。

requestAnimationFrame特点：

1. requestAnimationFrame会把每一帧中的所有DOM操作集中起来，再一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随着浏览器的刷新频率。
2. 在隐藏或不可见的元素中，将不会进行重绘或回流。
3. 由浏览器专门为动画提供的API，再运行浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停。
   兼容：IE9-浏览器不支持该方法，可以使用setTimeout来兼容。

闭包的定义及其利弊，一般那些情况下用到闭包

定义：闭包就是能够读取其他函数内部变量的函数。闭包可以简单理解成“定义在函数内部的函数”。在本质上，闭包是将外部函数和内部函数连接起来的桥梁。
使用闭包需要注意的地方：1.由于闭包会使得函数中的变量全部存储在内存中，内存消耗很大，所以不能滥用闭包，不会会导致网页的性能问题。在IE中有可能会导致内存泄露，解决办法是，在退出函数之前，把不使用的全局变量全部删除。2.闭包会在父函数外部，改变父函数内部的值。所以，如果把父函数当做对象使用，把对象当做它的公用方法，把内部变量当做私有属性，这时一定要小心不要随便改变父函数内部私有属性的值。

function makeAdder(x) {
  return function(y){
    return x+y
  }
}

var add5 = makeAdder(5)
var add10 = makeAdder(10)

add5(2) => 7
add10(2) => 12

本质上，makeAdder() 是一个函数工厂 — 为它传入一个参数就可以创建一个参数与其他值求和的函数。
闭包常用的使用场景：

• 通过循环给多个dom元素添加方法

for(var i = 0, len = btns.length; i < len; i++) {
    (function(i) {
        btns[i].onclick = function() {
            alert(i);
        }
    }(i))
}

• 封装变量
  闭包可以将一些不希望暴露在全局的变量封装成“私有变量”。
  假如有一个计算乘积的函数，为了提高函数性能，我们增加缓存机制，将之前计算过的结果缓存起来。这里存放缓存结果的变量不需要暴露给外界，并且需要在函数运行结束后，仍然保存，可以采用闭包。

var mult = (function(){
  var cache = {}

  var calculate = function(){
    var a = 1;
    for(var i = 0, len = arguments.length; i < len; i ++){
      a = a * arguments[i];
    }
    return a;
  }

  return function(){
    var args = Array.prototype.join.call(arguments,',');
    if(args in cache){
      return cache[args];
    }
    return cache[args] = calculagte.apply(null, arguments);
  }
}())

• 延续局部变量的寿命
  img对象经常用于数据上报：

var report = function(src) {
    var img = new Image();
    img.src = src;
}
report('http://xxx.com/getUserInfo');

这段代码在运行时，发现在一些低版本浏览器上存在bug，会丢失部分数据上报，原因是img是report函数中的局部变量，当report函数调用结束后，img对象随即被销毁，而此时可能还没来得及发出http请求。
因此，可以使用闭包把img对象封闭起来：

var report = (function(){
  var imgs = [];
  return function(src) { 
    var img = new Image();
    imgs.push(img);
    img.src = src;
  }
})()

• 闭包+设计模式

从一个jquery bootstrap项目到用vue或者react重构项目，前期工作都需要考虑什么？

个人理解：首先确认原项目中主要用到的技术有哪一些，考虑到重构方面的工作，是否可以完全替代之前的功能。如果不能则思考有没有其他的解决方案。之后就需要考虑到vue整个生态系统所包含的主要功能，衡量哪些功能该需要用到项目中，然后再使用webpack自己手动或使用脚手架生成项目架构，再修改脚手架使其完全重构项目所需要用到的功能。分析项目中全局所需要用到的模块，可以首先抽取一些公用css，公用js、静态资源等，而且可以对接口请求，vue提供的全局过滤器等做一个封装，方便开发业务时使用。