前端知识点十一

一世迷离
54 阅读4分钟

111、同步、异步和阻塞、非阻塞

A煮开水

  1. 水壶放到火上，等水烧开（同步阻塞）
  2. 水壶放到火上，看电视 ，时不时（轮询）查看水是否烧开，（同步非阻塞）
  3. 响水壶放到火上，等着水烧开，水烧开发出响声（异步阻塞）
  4. 响水壶放到火上，看电视，水烧开的响声，得到开水（异步非阻塞）

同步/异步主要针对C端 阻塞/非阻塞主要针对S端

同步IO和异步IO的区别就在于：数据访问的时候进程是否阻塞！ 阻塞IO和非阻塞IO的区别就在于：应用程序的调用是否立即返回！

112、浏览器线程

  1. 浏览器中有三个常驻的线程，分别是JS引擎，界面渲染，事件响应。由于这三个线程同时要访问DOM树，所以为了线程安全，浏览器内部需要做互斥：当JS引擎在执行代码的时候，界面渲染和事件响应两个线程是被暂停的。所以当JS出现死循环，浏览器无法响应点击，也无法更新界面。
  2. http请求线程不能操作Dom
  3. 定时器线程

113、worker对象

执行http请求线程，不与js主线程

//index.js
var worker = new Worker("data.js");
//接受数据
worker.onmessage = function(){
  console.log(event.data)
};
document.getElementById('ale').addEventListener('click',()=>{
  alert(1)
},false)
//用于关闭worker线程
worker.terminate();
//data.js 
var i = 0
setInterval(()=>{
  i++
  postMessage(i)
},1000)

114、异步处理机制

console.log(1);
setTimeout(e => {
  console.log(2);
}, 0)
setTimeout(e => {
  console.log(3);
}, 0)
new Promise((resolve, reject) => {
  console.log(4);
  resolve();
}).then(e => {
  console.log(5);
})
setTimeout(e => {
  console.log(6);
  new Promise((resolve, reject) => {
    console.log(7);
    resolve();
  })
  .then(e => {
    console.log(8);
  })
})
//1  4  5  2  3  6  7  8

115、nodejs中的异步处理机制

阶段总览

  1. timers : setTimeout、setInterval
  2. I/O callbacks : 执行几乎所有异常的close回调，由timer和setImmediate执行的回调。
  3. idle,prepare: 只用于内部
  4. poll : 获取新的I/O事件，node在该阶段会适当的阻塞
  5. check : setImmediate的回调被调用
  6. close callbacks: e.g socket.on(‘close’,…);
  7. 每个阶段执行完毕都会执行nexttick和promise

116、实现一个add函数

add(1,2,3)(4)(5,6)
function add(...args){
  let sum = args.reduce((prev, cur)=>{return prev + cur}, 0)
  function add2(...args2){
    return add(sum, ...args2)
  }
  add2.toString = function(){
    return sum
  }
  return add2
}
//console.log(add(1,2,3)(4)(5,6))    //21

117、强缓存与协商缓存

  1. 直接使用本地的缓存，不用跟服务器进行通信（200）
  • expires 一个未来时间，代表请求有效期，没有过期之前都使用当前请求。
  • cache-control no-cache：这个很容易让人产生误解，使人误以为是响应不被缓存。实际上no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。 no-store：这个才是响应不被缓存的意思。 pubilc：任何情况下都缓存（即使是HTTP认证的资源） private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存
缺点：
Last-Modified/If-Modified-Since 精确到秒，1s内多次更改无法识别
部分文件有可能是定期（或周期）生成，不需要重新进行获取，但是Last-Modified/If-Modified-Since会认为发生了改变
  1. 至少与服务器通信一次，判断浏览器是否能直接使用本地缓存（304）
  • Last-Modified/If-Modified-Since（两个都是时间格式字符串）
  • Etag/If-None-Match（标识符字符串）
与 Last-Modified/If-Modified-Since 不同的是，返回 304 时，
ETag 还是会重新生成返回至浏览器。

118、浏览器缓存有哪些

  1. http缓存是基于HTTP协议的浏览器文件级缓存机制。
  2. websql这种方式只有较新的chrome浏览器支持，并以一个独立规范形式出现
  3. indexDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API
  4. Cookie一般网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）
  5. Localstoragehtml5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度
  6. Sessionstorage和localstorage类似，但是浏览器关闭则会全部删除，api和localstorage相同，实际项目中使用较少。
  7. application cache 是将大部分图片资源、js、css等静态资源放在manifest文件配置中
  8. cacheStorage是在ServiceWorker的规范中定义的，可以保存每个serverWorker申明的cache对象
  9. flash缓存 这种方式基本不用，这一方法主要基于flash有读写浏览器端本地目录的功能

119、http和https的区别

120、vue中观察者模式的体现

data发生变化触发监听函数执行 发布者 监听者 事件点击dom触发事件绑定函数执行回调 发布者 监听者

avatar
文章
阅读
粉丝