2018-10-26 SECOM

2018-10-26  本文已影响0人  JarvanZ
CSS选择器，哪些属性可以继承及CSS优先级算法
长轮训和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环境下需要处理的兼容问题：

(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);
    };
}());

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() 是一个函数工厂 — 为它传入一个参数就可以创建一个参数与其他值求和的函数。
闭包常用的使用场景：

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);
  }
}())

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提供的全局过滤器等做一个封装，方便开发业务时使用。

上一篇 下一篇

猜你喜欢

热点阅读