半年的半年

半年的半年 查看完整档案

杭州编辑  |  填写毕业院校  |  填写所在公司/组织 imlianer.com 编辑
编辑

细心并且追求完美的处女座一枚,热爱前端开发

个人动态

半年的半年 发布了文章 · 2020-11-27

浏览器有几种储存机制?讲一讲:Storage for the Web

前言

今天我们来讲一讲 Web 存储有几种机制,并弄清楚什么是临时存储,什么是持久存储。

你可能不知道的是:我们平常口中所说的持久存储 localStorage 很多时候其实是系统级别的“临时存储”。

正文

IndexedDB

Indexed DB 的操作是异步的,不会阻塞主线程的执行,可以在 window、web workers、service workers 环境中使用。

IndexedDB 是基于文件存储的,API 较为复杂,包含 v1 v2 的差异,建议通过类库来使用,比如:Dexie.js

Cache Storage API

Cache Storage API 为缓存的 Request/Response 对象提供存储机制,常在 ServiceWorker 中应用。

异步,不会阻塞主线程的执行,可以在 window、web workers、service workers 环境中使用。

SessionStorage

同步,会阻塞主线程的执行。

一般用于储存临时性的少量的数据。

SessionStorage 是标签级别的,跟随者标签的生命周期,并且会随着标签的销毁而清空数据。

无法在 web workers、service workers 环境中使用。

它只能储存字符串,大小限制大约为 5MB。

LocalStorage

同步,会阻塞主线程的执行。

无法在 web workers、service workers 环境中使用。

它只能储存字符串,大小限制大约为 5MB。

Cookies

Cookies 有它的用途,但不适用于储存数据。

Cookie 会在每次 HTTP 请求的时候携带在请求头中,大体积的 Cookies 会显著增加 HTTP 请求的负担。

Cookies 读写是同步的,只能储存字符串,并且无法在 web workers 环境中使用。

File System API

File System API 和 FileWriter API 提供读取或写入文件到沙箱中(Sandboxed file system)。

它是异步的,不推荐使用,因为 File System API 只能在 Chromium 内核中使用。

File System Access API

File System Access API 设计用于便捷得读取和编辑本地文件。

但在读取或写入本地文件的时候,需要获得用户授权,并且授权状态无法持久化记录。

Application Cache

Application Cache 已被弃用,不建议使用。

建议迁移至 service workers 或 Cache API。

Storage 可以使用多少磁盘空间?

  • Chrome 允许使用 80% 的硬盘空间,单一的源(域名)可以使用 60% 的硬盘空间,可以通过 StorageManager API 检测最大的硬盘空间限额,其他基于 Chromium 内核的浏览器有不一样的限制,可能会允许使用更多的硬盘空间,查看更多实现 PR #3896
  • Internet Explorer 10(IE 10)及以上,最多可以储存 250MB,并在超过 10MB 的时候会提示用户
  • Firefox 允许使用 50% 的空闲硬盘空间,单个一级域名最多可以使用 2GB 硬盘空间,可以通过 StorageManager API 检测最大的硬盘空间限额
  • Safari 允许使用 1GB,当达到 1GB 的时候会提示用户(该数据可能不准确,没有找到 Safari 官方文档)

现代浏览器大多数已经不会再提示用户以授权更多的储存空间了。

如何检测储存空间是否可用?

在大多数浏览器中,可以通过 StorageManager API 检测储存空间总量与正在使用的量

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}
// quota data
{
  "quota": 299977904946,
  "usage": 27154039,
  "usageDetails": {
    "caches": 26813093,
    "indexedDB": 305864,
    "serviceWorkerRegistrations": 35082
  }
}

注意:

  1. 并不是所有浏览器都实现了,因此使用之前需要先判断兼容性
  2. 需要捕获并处理超过配额限额的错误

IndexedDB 超限处理

indexedDB 超限将会执行 onabort 回调,并抛出一个 DOMException 错误,需要处理它的 QuotaExceededError 异常。

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};

Cache API 超限处理

抛出一个 Promise Rejection,QuotaExceededError 错误对象,需要处理它的 QuotaExceededError 异常。

try {
  const cache = await caches.open('my-cache');
  await cache.add(new Request('/sample1.jpg'));
} catch (err) {
  if (error.name === 'QuotaExceededError') {
    // Fallback code goes here
  }
}

浏览器什么时候回收存储空间?

Web Storage 分为两种储存模式,分别是:临时存储 Best Effort 和持久存储 Persistent。

默认情况下网站数据(包括 IndexedDB, Cache API, LocalStorage 等)都储存在临时存储 Best Effort 中,会在存储空间不足的时候被浏览器清除掉。

各个浏览器回收存储空间的差异:

  • Chrome 当浏览器存储空间不足时,会优先清除最近最少使用的数据,逐个清除,直至不再超限
  • IE 10+ 不会自动清除数据,但会阻止站点继续写入数据
  • Firefox 当磁盘空间充满时,会优先清除最近最少使用的数据,逐个清除,直至不再超限
  • Safari(iOS、iPadOS、MacOS) 会自动清除超过 7 天以上的数据,但不会清除“已添加至主屏幕”的网站和“PWA”网站

申请和查看持久存储 Persistent Storage

申请持久存储 Persistent Storage:

// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persist();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

查看持久存储 Persistent Storage 授权状态:

// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persisted();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

各个浏览器申请持久存储 Persistent Storage 的差异:

  • 在 Chrome 55 以后,申请持久存储只需要满足以下任一条件,即可自动获得持久存储权限,无需用户确认:

    • 该站点已添加书签, 并且用户的书签数小于等于5个
    • 站点有很高的"site engagement",通过这个命令可以查看: chrome://site-engagement/
    • 站点已添加到主屏幕
    • 站点启用了push通知功能
  • 在 Firefox 中,会提示用户授权

最后测试并验证:

  1. 打开 https://baidu.com,打开控制台输入 await navigator.storage.persist(),返回 true
  2. 打开 https://wy.guahao.com,打开控制台输入 await navigator.storage.persist(),返回 false

参考文献

查看原文

赞 33 收藏 25 评论 0

半年的半年 评论了文章 · 2018-10-19

深入理解 Vue Computed 计算属性

Computed 计算属性是 Vue 中常用的一个功能,但你理解它是怎么工作的吗?

拿官网简单的例子来看一下:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Situation

Vue 里的 Computed 属性非常频繁的被使用到,但并不是很清楚它的实现原理。比如:计算属性如何与属性建立依赖关系?属性发生变化又如何通知到计算属性重新计算?

关于如何建立依赖关系,我的第一个想到的就是语法解析,但这样太浪费性能,因此排除,第二个想到的就是利用 JavaScript 单线程的原理和 Vue 的 Getter 设计,通过一个简单的发布订阅,就可以在一次计算属性求值的过程中收集到相关依赖。

因此接下来的任务就是从 Vue 源码一步步分析 Computed 的实现原理。

Task

分析依赖收集实现原理,分析动态计算实现原理。

Action

data 属性初始化 getter setter:

// src/observer/index.js

// 这里开始转换 data 的 getter setter,原始值已存入到 __ob__ 属性中
Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
    const value = getter ? getter.call(obj) : val
    // 判断是否处于依赖收集状态
    if (Dep.target) {
      // 建立依赖关系
      dep.depend()
      ...
    }
    return value
  },
  set: function reactiveSetter (newVal) {
    ...
    // 依赖发生变化,通知到计算属性重新计算
    dep.notify()
  }
})

computed 计算属性初始化

// src/core/instance/state.js

// 初始化计算属性
function initComputed (vm: Component, computed: Object) {
  ...
  // 遍历 computed 计算属性
  for (const key in computed) {
    ...
    // 创建 Watcher 实例
    // create internal watcher for the computed property.
    watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)

    // 创建属性 vm.reversedMessage,并将提供的函数将用作属性 vm.reversedMessage 的 getter,
    // 最终 computed 与 data 会一起混合到 vm 下,所以当 computed 与 data 存在重名属性时会抛出警告
    defineComputed(vm, key, userDef)
    ...
  }
}

export function defineComputed (target: any, key: string, userDef: Object | Function) {
  ...
  // 创建 get set 方法
  sharedPropertyDefinition.get = createComputedGetter(key)
  sharedPropertyDefinition.set = noop
  ...
  // 创建属性 vm.reversedMessage,并初始化 getter setter
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        // watcher 暴露 evaluate 方法用于取值操作
        watcher.evaluate()
      }
      // 同第1步,判断是否处于依赖收集状态
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

无论是属性还是计算属性,都会生成一个对应的 watcher 实例。

// src/core/observer/watcher.js

// 当通过 vm.reversedMessage 获取计算属性时,就会进到这个 getter 方法
get () {
  // this 指的是 watcher 实例
  // 将当前 watcher 实例暂存到 Dep.target,这就表示开启了依赖收集任务
  pushTarget(this)
  let value
  const vm = this.vm
  try {
    // 在执行 vm.reversedMessage 的函调函数时,会触发属性(步骤1)和计算属性(步骤2)的 getter
    // 在这个执行过程中,就可以收集到 vm.reversedMessage 的依赖了
    value = this.getter.call(vm, vm)
  } catch (e) {
    if (this.user) {
      handleError(e, vm, `getter for watcher "${this.expression}"`)
    } else {
      throw e
    }
  } finally {
    if (this.deep) {
      traverse(value)
    }
    // 结束依赖收集任务
    popTarget()
    this.cleanupDeps()
  }
  return value
}

上面多出提到了 dep.depend, dep.notify, Dep.target,那么 Dep 究竟是什么呢?

Dep 的代码短小精悍,但却承担着非常重要的依赖收集环节。

// src/core/observer/dep.js

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      // 更新 watcher 的值,与 watcher.evaluate() 类似,
      // 但 update 是给依赖变化时使用的,包含对 watch 的处理
      subs[i].update()
    }
  }
}

// 当首次计算 computed 属性的值时,Dep 将会在计算期间对依赖进行收集
Dep.target = null
const targetStack = []

export function pushTarget (_target: Watcher) {
  // 在一次依赖收集期间,如果有其他依赖收集任务开始(比如:当前 computed 计算属性嵌套其他 computed 计算属性),
  // 那么将会把当前 target 暂存到 targetStack,先进行其他 target 的依赖收集,
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

export function popTarget () {
  // 当嵌套的依赖收集任务完成后,将 target 恢复为上一层的 Watcher,并继续做依赖收集
  Dep.target = targetStack.pop()
}

Result

总结一下依赖收集、动态计算的流程:

1. data 属性初始化 getter setter
2. computed 计算属性初始化,提供的函数将用作属性 vm.reversedMessage 的 getter
3. 当首次获取 reversedMessage 计算属性的值时,Dep 开始依赖收集
4. 在执行 message getter 方法时,如果 Dep 处于依赖收集状态,则判定 message 为 reversedMessage 的依赖,并建立依赖关系
5. 当 message 发生变化时,根据依赖关系,触发 reverseMessage 的重新计算

到此,整个 Computed 的工作流程就理清楚了。

Vue 是一个设计非常优美的框架,使用 Getter Setter 设计使依赖关系实现的非常顺其自然,使用计算与渲染分离的设计(优先使用 MutationObserver,降级使用 setTimeout)也非常贴合浏览器计算引擎与排版引擎分离的的设计原理。

如果你想成为一名架构师,不能只停留在框架的 API 使用层面。

查看原文

半年的半年 关注了标签 · 2018-10-08

weex

Weex 是阿里开源的一款跨平台移动开发工具,Weex 这个名字是取得 weeks 的谐音。

Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及Web等多端部署。

对于移动开发者来说,Weex主要解决了频繁发版和多端研发两大痛点,同时解决了前端语言性能差和显示效果受限的问题。

开发者只需要在自己的APP中嵌入Weex的SDK,就可以通过撰写HTML/CSS/JavaScript来开发Native级别的Weex界面。Weex界面的生成码其实就是一段很小的JS,可以像发布网页一样轻松部署在服务端,然后在APP中请求执行。

与现有的开源跨平台移动开放项目如Facebook的React Native和微软的Cordova相比,Weex更加轻量,体积小巧。因为基于web conponent标准,使得开发更加简洁标准,方便上手。Native组件和API都可以横向扩展,方便根据业务灵活定制。Weex渲染层具备优异的性能表现,能够跨平台实现一致的布局效果和实现。对于前端开发来说,Weex能够实现组件化开发、自动化数据绑定,并拥抱Web标准。

http://alibaba.github.io/weex/

关注 0

半年的半年 关注了收藏夹 · 2018-08-21

Nginx 基础 + 实战

关注 362

半年的半年 收藏了文章 · 2018-07-04

vue生命周期探究(一)

vue官方文档---实例生命周期
vue-router2.3版文档---路由勾子
vue官方文档---指令及其绑定周期

前言

在使用vue开发的过程中,我们经常会接触到生命周期的问题。那么你知道,一个标准的工程项目中,会有多少个生命周期勾子吗?让我们来一起来盘点一下:

  1. 根组件实例:8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)

  2. 组件实例:8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)

  3. 全局路由钩子:2个 (beforeEach、afterEach)

  4. 组件路由钩子:3个 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

  5. 指令的周期: 5个 (bind、inserted、update、componentUpdated、unbind)

  6. beforeRouteEnter的next所对应的周期

  7. nextTick所对应的周期

吓到了吗?合计竟然一共有28个周期,是否看得头昏眼花了呢?接下来让我们一起来介绍一下各个周期的通常用途与使用细节吧

组件实例周期

这一块vue2的官方文档有一张图示,我们简要提一下用法和注意

beforeCreate

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

tip:

此时组件的选项还未挂载,因此无法访问methods,data,computed上的方法或数据

created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

这是一个常用的生命周期,因为你可以调用methods中的方法、改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上、获取computed中的计算属性等等。

tip:

通常我们可以在这里对实例进行预处理。
也有一些童鞋喜欢在这里发ajax请求,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的。
因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个页面发请求。
建议在组件路由勾子beforeRouteEnter中来完成。

beforeMonut

在挂载开始之前被调用:相关的 render 函数首次被调用。

mounted

el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

tip:

1.在这个周期内,对data的改变可以生效。但是要进下一轮的dom更新,dom上的数据才会更新。
2.这个周期可以获取 dom。 之前的论断有误,感谢@冯银超 和 @AnHour的提醒
3.beforeRouteEnter的next的勾子比mounted触发还要靠后
4.指令的生效在mounted周期之前

beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

tip:

1.这一步还可以用this来获取实例。
2.一般在这一步做一些重置的操作。比如清除掉组件中的 定时器 和 监听的dom事件

destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

全局路由钩子

作用于所有路由切换,一般在main.js里面定义

router.beforeEach

示例
router.beforeEach((to, from, next) => {
  console.log('路由全局勾子:beforeEach -- 有next方法')
  next()
})

一般在这个勾子的回调中,对路由进行拦截。
比如,未登录的用户,直接进入了需要登录才可见的页面,那么可以用next(false)来拦截,使其跳回原页面。
值得注意的是,如果没有调用next方法,那么页面将卡在那。

next的四种用法
1.next() 跳入下一个页面
2.next('/path') 改变路由的跳转方向,使其跳到另一个路由
3.next(false)  返回原来的页面
4.next((vm)=>{})  仅在beforeRouteEnter中可用,vm是组件实例。

router.afterEach

示例
router.afterEach((to, from) => {
  console.log('路由全局勾子:afterEach --- 没有next方法')
})

在所有路由跳转结束的时候调用,和beforeEach是类似的,但是它没有next方法

组件路由勾子

和全局勾子不同的是,它仅仅作用于某个组件,一般在.vue文件中去定义。

beforeRouteEnter

示例
  beforeRouteEnter (to, from, next) {
    console.log(this)  //undefined,不能用this来获取vue实例
    console.log('组件路由勾子:beforeRouteEnter')
    next(vm => {
      console.log(vm)  //vm为vue的实例
      console.log('组件路由勾子beforeRouteEnter的next')
    })
  }

这个是一个很不同的勾子。因为beforeRouterEnter在组件创建之前调用,所以它无法直接用this来访问组件实例。
为了弥补这一点,vue-router开发人员,给他的next方法加了特技,可以传一个回调,回调的第一个参数即是组件实例。
一般我们可以利用这点,对实例上的数据进行修改,调用实例上的方法。

我们可以在这个方法去请求数据,在数据获取到之后,再调用next就能保证你进页面的时候,数据已经获取到了。没错,这里next有阻塞的效果。你没调用的话,就会一直卡在那

tip:

next(vm=>{console.log('next')  })
这个里面的代码是很晚执行的,在组件mounted周期之后。没错,这是一个坑。你要注意。
beforeRouteEnter的代码时很早执行的,在组件beforeCreate之前;
但是next里面回调的执行,很晚,在mounted之后,可以说是目前我找到的,离dom渲染最近的一个周期。

beforeRouteLeave

  beforeRouteLeave (to, from, next) {
    console.log(this)    //可以访问vue实例
    console.log('组件路由勾子:beforeRouteLeave')
    next()
  },

在离开路由时调用。可以用this来访问组件实例。但是next中不能传回调。

beforeRouteUpdate

这个方法是vue-router2.2版本加上的。因为原来的版本中,如果一个在两个子路由之间跳转,是不触发beforeRouteLeave的。这会导致某些重置操作,没地方触发。在之前,我们都是用watch $route来hack的。但是通过这个勾子,我们有了更好的方式。

老实讲,我没用过这个勾子,所以各位可以查看一下文章之前的文档,去尝试一下,再和我交流交流。

指令周期

绑定自定义指令的时候也会有对应的周期。
这几个周期,我比较常用的,一般是只有bind。

bind

只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted

被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
实际上是插入vnode的时候调用。

update

被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
慎用,如果在指令里绑定事件,并且用这个周期的,记得把事件注销

componentUpdated

被绑定元素所在模板完成一次更新周期时调用。

unbind

只调用一次, 指令与元素解绑时调用。

Vue.nextTick、vm.$nextTick

示例:
  created () {
    this.$nextTick(() => {
      console.log('nextTick')  //回调里的函数一直到真实的dom渲染结束后,才执行
    })
    console.log('组件:created')
  },

nextTick方法的回调会在dom更新后再执行,因此可以和一些dom操作搭配一起用,如 ref。
非常好用,可以解决很多疑难杂症。

场景:
你用ref获得一个输入框,用v-model绑定。
在某个方法里改变绑定的值,在这个方法里用ref去获取dom并取值,你会发现dom的值并没有改变。
因为此时vue的方法,还没去触发dom的改变。
因此你可以把获取dom值的操作放在vm.$nextTick的回调里,就可以了。

vue生命周期探究(二)

查看原文

半年的半年 收藏了文章 · 2018-02-10

跨浏览器tab页的通信解决方案尝试

目标

当前页面需要与当前浏览器已打开的的某个tab页通信,完成某些交互。其中,与当前页面待通信的tab页可以是与当前页面同域(相同的协议、域名和端口),也可以是跨域的。

要实现这个特殊的功能,单单使用HTML5的相关特性是无法完成的,需要有更加巧妙的设计。

畅想

现在我们发现下思维,假设多种场景下的解决方案,最终寻找通用解。

case 1

两个需要交互的tab页面具有依赖关系。

A页面中通过JavaScript的window.open打开B页面,或者B页面通过iframe嵌入至A页面,此种情形最简单,可以通过HTML5的 window.postMessage API完成通信,由于postMessage函数是绑定在 window 全局对象下,因此通信的页面中必须有一个页面(如A页面)可以获取另一个页面(如B页面)的window对象,这样才可以完成单向通信;B页面无需获取A页面的window对象,如果需要B页面对A页面的通信,只需要在B页面侦听message事件,获取事件中传递的source对象,该对象即为A页面window对象的引用:

B页面

window.addEventListner('message',(e)=>{
    let {data,source,origin} = e;
    source.postMessage('message echo','/');
});

postMessage的第一个参数为消息实体,它是一个结构化对象,即可以通过“JSON.stringify和JSON.parse”函数还原的对象;第二个参数为消息发送范围选择器,设置为“/”意味着只发送消息给同源的页面,设置为“*”则发送全部页面。

case 2

两个打开的页面属于同源范畴。

若要实现两个互不相关的通源tab页面通信,可以使用一种比较巧妙的方式:localstorage。localStorage的存储遵循同源策略,因此同源的两个tab页面可以通过这种共享localStorage的方式实现通信,通过约定localStorage的某一个itemName,基于该key值的内容作为“共享硬盘”方式通信。

不过,如果单纯使用localStorage存储做通信方式会遇到一个问题,就是两个页面把握不准通信时机,如果A页面此刻需要发送给B页面一条消息“hello B”,它会设置localStorage.setItem('message','hello B'),并且采用setTimeout轮训等待B的消息;而B此刻也同样使用setTimeout轮训等待localStorage的message项的变化,当获取到'message'字段时,便取出消息'hello B'。B如果要发消息给A,仍然采用同样套路。

这种方式性能极其低下,需要通信两方不停的监听localStorage某项的变化,及其浪费事件队列处理效率。幸好,HTML5提供了storage事件,通过window对象侦听storage事件,会侦听localStorage对象的变化事件(包括item的添加、修改和删除)。因此,通过事件可以完成高效的通信机制:

A 页面

window.addEventListener("storage", function(ev){
    if (ev.key == 'message') {
        // removeItem同样触发storage事件,此时ev.newValue为空
        if(!ev.newValue)
            return;
        var message = JSON.parse(ev.newValue);
        console.log(message);
    }
});

function sendMessage(message){
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}

// 发送消息给B页面
sendMessage('this is message from A');
B 页面

window.addEventListener("storage", function(ev){
    if (ev.key == 'message') {
        // removeItem同样触发storage事件,此时ev.newValue为空
        if(!ev.newValue)
            return;
        var message = JSON.parse(ev.newValue);
        // 发送消息给A页面
        sendMessage('message echo from B');
    }
});

function sendMessage(message){
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}

发送消息采用sendMessage函数,该函数序列化消息,设置为localStorage的message字段值后,删除该message字段。这样做的目的是不污染localStorage空间,但是会造成一个无伤大雅的反作用,即触发两次storage事件,因此我们在storage事件处理函数中做了if(!ev.newValue) return;判断。

当我们在A页面中执行sendMessage函数,其他同源页面会触发storage事件,而A页面却不会触发storage事件;而且连续发送两次相同的消息也只会触发一次storage事件,如果需要解决这种情况,可以在消息体体内加入时间戳:

sendMessage({
    data: 'hello world',
    timestamp: Date.now()
});
sendMessage({
    data: 'hello world',
    timestamp: Date.now()
});

通过这种方式,可以实现同源下的两个tab页通信,兼容性

通过caniuse网站查询storage事件发现,IE的浏览器支持非常的不友好,caniuse使用了“completely wrong”的形容词来表述这一程度。IE10的storage事件会在页面document文档对象构建完成后触发,这在嵌套iframe的页面中造成诸多问题;IE11的storage Event对象却不区分oldValue和newValue值,它们始终存储更新后的值

case 3

两个互不相关的tab页面通信。

这种情况才是最急需解决的问题,如何实现两个没有任何关系的tab页面通信,这需要一些技巧,而且需要有同时修改这两个tab页面的权限,否则根本不可能实现这两个tab页的能力。

在上述条件满足的情况下,我们就可以使用case1 和 case2的技术完成case 3的需求,这需要我们巧妙的结合HTML5 postMessage API 和 storage事件实现这两个毫无关系的tab页面的连通。为此,我想到了iframe,通过在这两个tab页嵌入同一个iframe页实现“桥接”,最终完成通信:

tab A -----> iframe A[bridge.html]
                     |
                     |
                    \|/
             iframe B[bridge.html] ----->  tab B    

单方向的通信原理如上图所示,tab A中嵌入iframe A,tab B中嵌入iframe B,这两个iframe引用相同的页面“bridge.html”。如果tab A发消息给tab B,首先tab A通过postMessage消息发送给iframe A(tab A可以获取到iframe A的window对象iframe.contentWindow);此后iframe A通过storage消息完成与iframe B的通信(由于iframeA 与iframe B同源,因此case 2的通信方式这里可以使用);最终,iframe B同样采用postMessage方式发送消息给tab B(在iframe中通过window.parent引用tab B的window对象)。至此,tab A的消息走通了所有链路,成功抵达tab B。

反方向发送消息同样的道理,这里就不在详细说明。接下来到了 talk is cheap,show me the code 环节:

tab A:

// 向弹出的tab页面发送消息
window.sendMessageToTab = function(data){
    // 由于[#J_bridge]iframe页面的源文件在vstudio服务器中,因此postMessage发向“同源”
    document.querySelector('#J_bridge').contentWindow.postMessage(JSON.stringify(data),'/');
};

// 接收来自 [#J_bridge]iframe的tab消息
window.addEventListener('message',function(e){
    let {data,source,origin}  = e;
    if(!data)
        return;
    try{
        let info = JSON.parse(JSON.parse(data));
        if(info.type == 'BSays'){
           console.log('BSay:',info);
        }
    }catch(e){
    } 
});

sendMessageToTab({
    type: 'ASays',
    data: 'hello world, B'
})
bridge.html

window.addEventListener("storage", function(ev){
    if (ev.key == 'message') {
        window.parent.postMessage(ev.newValue,'*');
    }
});

function message_broadcast(message){
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}

window.addEventListener('message',function(e){
    let {data,source,origin}  = e;
    // 接受到父文档的消息后,广播给其他的同源页面
    message_broadcast(data);
});
tab B

window.addEventListener('message',function(e){
    let {data,source,origin}  = e;
    if(!data)
        return;
    let info = JSON.parse(JSON.parse(data));
    if(info.type == 'ASays'){
        document.querySelector('#J_bridge').contentWindow.postMessage(JSON.stringify({
            type: 'BSays',
            data: 'hello world echo from B'
        }),'*');
    }
});

// tab B主动发送消息给tab A
document.querySelector('button').addEventListener('click',function(){
    document.querySelector('#J_bridge').contentWindow.postMessage(JSON.stringify({
        type: 'BSays',
        data: 'I am B'
    }),'*');
})

至此,通过在tab A和tab B中引入“桥接”功能的iframe[bridge.html]页面,实现了两个无关tab页的双向通信,这种实现的技巧性较强。

参考资料

Communication between tabs or windows

查看原文

半年的半年 赞了文章 · 2017-09-11

我遇到的前端面试题2017

图片描述

本文首发于我的博客:http://blog.dunizb.com
原文链接:http://blog.dunizb.com/2017/09/08/interview-questions-2017/

转载声明
最近发现有人和网站盗用我的文章,有的转载却自己标为原创,没有明确显示原文作者、原文出处及原文链接。我的网络ID是:Dunizb。请自觉遵守网络文章转载规范以及开源协议。

想知道自己什么水平就出去面试,抛砖引玉,详细答案还需要自己去补充....

更新记录

  • 2019-07-28更新:修改第13题RESTful API的答案
  • 2018-06-12更新:修改第1题答案
  • 2017-10-19更新:修改22题深浅拷贝的答案
  • 2017-10-18更新:修正部分题目答案,答案并非十分准确,仅供参考,此文部分题目答案故意省掉了一些高精尖、新奇特的东西,比如创建对象我写了三种,《JS高程》上可不止三种,一切以常用记得住的为宗旨,所以,对于部分答案有疑问的同学,可以留言讨论或自行斟酌
  • 2017-10-12更新:有部分题目属于后端范畴,或者是大前端范畴,因为我以前做Java后端的(关于我),故偶尔会遇到后端相关的一些问题,但是没有遇到问纯Java技术问题。如果你对某些后端题目不理解就直接跳过吧。

金九银十,在九月之前把工作落实了,经历了好几个公司的面试,得到一些信息,和大家分享:

  1. 大部分公司(创业公司)都趋向于招一个牛逼的前端而不是三四个平庸的前端
  2. 性能优化、ES6必问
  3. 招聘要求上清一色的要求有一门后端语言的经验
  4. 招聘要求写的和面试相关性并不是很高

以下是我整理我面试遇到的一些我觉得具有代表性的题目,刚好30题,吐血献上!

0.谈谈对前端安全的理解,有什么,怎么防范

前端安全问题主要有XSS、CSRF攻击
XSS:跨站脚本攻击
它允许用户将恶意代码植入到提供给其他用户使用的页面中,可以简单的理解为一种javascript代码注入。
XSS的防御措施:

  1. 过滤转义输入输出
  2. 避免使用evalnew Function等执行字符串的方法,除非确定字符串和用户输入无关
  3. 使用cookiehttpOnly属性,加上了这个属性的cookie字段,js是无法进行读写的
  4. 使用innerHTMLdocument.write的时候,如果数据是用户输入的,那么需要对象关键字符进行过滤与转义

CSRF:跨站请求伪造
其实就是网站中的一些提交行为,被黑客利用,在你访问黑客的网站的时候进行操作,会被操作到其他网站上
CSRF防御措施:

  1. 检测http referer是否是同域名
  2. 避免登录的session长时间存储在客户端中
  3. 关键请求使用验证码或者token机制

其他的一些攻击方法还有HTTP劫持、界面操作劫持

1.使用箭头函数需要注意的地方

当要求动态上下文的时候,你就不能使用箭头函数,比如:定义方法,用构造器创建对象,处理时间时用 this 获取目标。

箭头函数与传统函数的区别,主要集中在以下方面:

  • 没有this、super、arguments 和 new.target 绑定,这些值由最近一层非箭头函数决定。
  • 不能通过 new 关键字调用,所以不能用作构造函数,否则程序会抛出错误(SyntaxError)。
  • 没有原型。由于不可以通过new 关键字调用箭头函数,因而没有构建原型的需求,所以箭头函数不存在 prototype 这个属性。
  • 不可以改变 this 的绑定,函数内部的 this 值不可以被改变,在函数的生命周期内始终保持一致。
  • 不支持 arguments 对象,所以你必须通过命名参数和不定参数这两种形式访问函数的参数。
  • 不支持重复的命名参数,无论在严格还是非严格模式下都不支持,而在传统的函数规定中只有在严格模式下才不能有重复的命名参数。

2.webpack.load的原理

loaders是你用在app源码上的转换元件。他们是用node.js运行的,把源文件作为参数,返回新的资源的函数。

3.ES6 let、const

let
let是更完美的var

  1. let声明的变量拥有块级作用域,let声明仍然保留了提升的特性,但不会盲目提升。
  2. let声明的全局变量不是全局对象的属性。不可以通过window.变量名的方式访问
  3. 形如for (let x…)的循环在每次迭代时都为x创建新的绑定
  4. let声明的变量直到控制流到达该变量被定义的代码行时才会被装载,所以在到达之前使用该变量会触发错误。

const
定义常量值,不可以重新赋值,但是如果值是一个对象,可以改变对象里的属性值

const OBJ = {"a":1, "b":2};
OBJ.a = 3;
OBJ = {};// 重新赋值,报错!
console.log(OBJ.a); // 3

4.CSS3 box-sizing的作用

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content,二IE模型包括border和padding

box-sizing属性可以为三个值之一:

  1. content-box,默认值,border和padding不计算入width之内
  2. padding-box,padding计算入width内
  3. border-box,border和padding计算入width之内

5.说说HTML5中有趣的标签(新标签及语义化)

如果代码写的语义化,有利于SEO。搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大标题,合理利用h1-h6,列表形式的代码使用ul或ol,重要的文字使用strong等等。总之就是要充分利用各种HTML标签完成他们本职的工作

6.git命令,如何批量删除分支

git branch |grep 'branchName' |xargs git branch -D,从分支列表中匹配到指定分支,然后一个一个(分成小块)传递给删除分支的命令,最后进行删除。(参考这里)

7.创建对象的三种方法

第一种方式,字面量

var o1 = {name: "o1"}

第二种方式,通过构造函数

var o2 = new Object({name: "o2"})
var M = function(name){ this.name = name }
var o3 = new M("o3")

第三种方式,Object.create

var  p = {name: "p"}
var o4 = Object.create(p)

新创建的对o4的原型就是p,同时o4也拥有了属性name

8.JS实现继承的几种方式

借用构造函数实现继承

function Parent1(){
    this.name = "parent1"
}
function Child1(){
    Parent1.call(this);
    this.type = "child1";
}

缺点:Child1无法继承Parent1的原型对象,并没有真正的实现继承(部分继承)

借用原型链实现继承

function Parent2(){
    this.name = "parent2";
    this.play = [1,2,3];
}
function Child2(){
    this.type = "child2";
}
Child2.prototype = new Parent2();

缺点:原型对象的属性是共享的

组合式继承

function Parent3(){
    this.name = "parent3";
    this.play = [1,2,3];
}
function Child3(){
    Parent3.call(this);
    this.type = "child3";
}
Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor = Child3;

9.当new Foo()时发生了什么

1.创建了一个新对象
2.将新创建的空对象的隐式原型指向其构造函数的显示原型。
3.将this指向这个新对象
4.如果无返回值或者返回一个非对象值,则将新对象返回;如果返回值是一个新对象的话那么直接直接返回该对象。
参考《JS高程》6.2.2

10.你做过哪些性能优化

雪碧图,移动端响应式图片,静态资源CDN,减少Dom操作(事件代理、fragment),压缩JS和CSS、HTML等,DNS预解析

11.浏览器渲染原理

首先来看一张图:

  1. HTML被解析成DOM Tree,CSS被解析成CSS Rule Tree
  2. 把DOM Tree和CSS Rule Tree经过整合生成Render Tree(布局阶段)
  3. 元素按照算出来的规则,把元素放到它该出现的位置,通过显卡画到屏幕上
更多详情看这里

12.前端路由的原理

什么是路由?简单的说,路由是根据不同的 url 地址展示不同的内容或页面

使用场景?前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由。

前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器。

两种实现前端路由的方式
HTML5 History两个新增的API:history.pushStatehistory.replaceState,两个 API 都会操作浏览器的历史记录,而不会引起页面的刷新。

Hash就是url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面,而是当作新页面加到历史记录中,这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。

优点
从性能和用户体验的层面来比较的话,后端路由每次访问一个新页面的时候都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已,没有了网络延迟,对于用户体验来说会有相当大的提升。

更多内容请看这里

缺点
使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存。

13.Restful API是什么,如何设计RESTful API?

RESTful API是指符合REST设计风格的Web API,为了使的接口安全、易用、可维护以及可扩张,一般设计RESTful API需要考虑以下几个方面:

  1. 通信用HTTPS安全协议
  2. 在URL中加入版本号
  3. URL中的路径不能有动词,只能用名词
  4. 用HTTP方法对资源进行增删改查的操作
  5. 用HTTP状态吗传达执行结果和失败原因
  6. 为集合提供过滤、排序、分页功能
  7. 用查询字符串或HTTP首部Accpet进行内容协商,指定返回结果的数据格式
  8. 及时更新文档,每个接口都有对应的说明

14.script标签的defer、async的区别

defer是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行
async是在加载完成后立即执行,如果是多个,执行顺序和加载顺序无关

15.同源与跨域

什么是同源策略?
限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
一个源指的是主机名、协议和端口号的组合,必须相同

跨域通信的几种方式

  • JSONP
  • Hash
  • postMessage
  • WebSocket
  • CORS

JSONP原理
基本原理:利用script标签的异步加载特性实现
给服务端传一个回调函数,服务器返回一个传递过去的回调函数名称的JS代码

更多请查看:《前后端通信类知识》

16.作用域与闭包、原型相关问题

16.1 作用域

域表示的就是范围,即作用域,就是一个名字在什么地方可以使用,什么时候不能使用。
简单的说,作用域是针对变量的,比如我们创建一个函数 a1,函数里面又包了一个子函数 a2

// 全局作用域
functiona a1() {
    // a1作用域
    function a2() {
        // a2作用域
    }
}

此时就存 在三个作用域:全局作用域,a1 作用域,a2 作用域;即全局作用域包含了 a1 的作用域,a2 的作用域包含了 a1 的作用域。

a2 在查找变量的时候会先从自身的作用域区查找,找不到再到上一级 a1 的作用域查找,如果还没找到就到全局作用域区查找,这样就形成了一个作用域链

16.2 闭包

什么是闭包?
当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。

简单的来说,所谓的闭包就是一个具有封闭的对外不公开的,包裹结构或空间。

为什么函数可以构成闭包?
闭包就是一个具有封闭与包裹功能的结构,是为了实现具有私有访问空间的函数的。函数可以构成闭包。函数内部定义的数据函数外部无法访问,即函数具有封闭性;函数可以封装代码即具有包裹性,所以函数可以构成闭包。

16.3 闭包有什么用(特性)

闭包的作用,就是保存自己私有的变量,通过提供的接口(方法)给外部使用,但外部不能直接访问该变量。

当我们需要在模块中定义一些变量,并希望这些变量一直保存在内存中但又不会“污染”全局的变量时,就可以用闭包来定义这个模块。

闭包的缺点:闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

函数套函数就是闭包吗?:不是!,当一个内部函数被其外部函数之外的变量引用时,才会形成了一个闭包。

16.4 闭包的基本模型

对象模式
函数内部定义个一个对象,对象中绑定多个函数(方法),返回对象,利用对象的方法访问函数内的数据

function createPerson() {
    var __name__ = "";
    return {
        getName: function () {
            return __name__;
        },
        setName: function( value ) {
            // 如果不姓张就报错
            if ( value.charAt(0) === '张' ) {
                __name__ = value;
            } else {
                throw new Error( '姓氏不对,不能取名' );
            }
        }
    }
}
var p = createPerson();
p.set_Name( '张三丰' );
console.log( p.get_Name() );
p.set_Name( '张王富贵' );
console.log( p.get_Name() );

函数模式
函数内部定义一个新函数,返回新函数,用新函数获得函数内的数据

function foo() {
    var num = Math.random();
    function func() {
        return mun;
    }
    return func;
}
var f = foo();
// f 可以直接访问这个 num
var res1 = f();
var res2 = f();

沙箱模式
沙箱模式就是一个自调用函数,代码写到函数中一样会执行,但是不会与外界有任何的影响,比如jQuery

(function () {
   var jQuery = function () { // 所有的算法 }
   // .... // .... jQuery.each = function () {}
   window.jQuery = window.$ = jQuery;
})();
$.each( ... )

原型

原型是什么
原型就是一个普通的对象,每个对象都有一个原型(Object除外),原型能存储我们的方法,构造函数创建出来的实例对象能够引用原型中的方法。

查看原型
以前一般使用对象的__proto__属性,ES6推出后,推荐用Object.getPrototypeOf()方法来获取对象的原型

什么是原型链?
凡是对象就有原型,那么原型又是对象,因此凡是给定一个对象,那么就可以找到他的原型,原型还有原型,那么如此下去,就构成一个对象的序列,称该结构为原型链。

更多内容请看这里

17.如何进行错误监控

前端错误的分类

  • 即时运行错误(代码错误)
  • 资源加载错误

错误的捕获方式
即时运行错误的捕获方式:

  • try...catch
  • window.onerror

资源加载错误:

  • object.onerror(如img,script)
  • performance.getEntries()
  • Error事件捕获
延伸:跨域的js运行错误可以捕获吗,错误提示什么,应该怎么处理?
可以。
Script error
1.在script标签增加crossorigin属性
2.设置js资源响应头Access-Control-Allow-Orgin:*

上报错误的基本原理
采用Ajax通信方式上报
利用Image对象上报

18.DOM事件类

DOM事件的级别

  • DOM0,element.onclick = function(){}
  • DOM2,element.addEventListener('click', function(){}, false);

DOM事件模型是什么:指的是冒泡和捕获
DOM事件流是什么:捕获阶段 -> 目标阶段 -> 冒泡阶段
描述DOM事件捕获的具体流程
window --> document --> documentElement(html标签) --> body --> .... --> 目标对象
Event对象常见应用

  • event.preventDefault(),阻止默认行为
  • event.stopPropagation(),阻止事件冒泡
  • event.stopImmediatePropagation(),阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上,这个方法不接受任何参数。
  • event.currentTarget,返回绑定事件的元素
  • event.target,返回触发事件的元素

如何自定义事件
Event,不能传递参数

var eve = new Event('自定义事件名');
ev.addEventListener('自定义事件名', function(){
    console.log('自定义事件')
});
ev.dispatchEvent(eve);

CustomEvent,还可以指定参数

19.本地起了一个http server,为什么只能在同一个WIFI(局域网)上访问?

你没有公网IP当然就不能被外网访问了。常见的WIFI情况下,一般的ip会是~192.168.0.x·这样的,只是对局域网(同WIFI下)可见,但是外网是访问不了的。(segmentfault上的答案

20.回流和重绘

参考《如何写出高性能DOM?》

21.数组去重的方法

参考:《JavaScript数组去重》

22.深拷贝与浅拷贝

是什么
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存(内存区域没有隔离)。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存(内存区域隔离),修改新对象不会改到原对象。在多层对象上,浅拷贝只拷贝一层
浅拷贝举例

var Chinese = {
  nation:'中国'
};
var Doctor ={
  career:'医生'
}
function extendCopy(p) {
  var c = {};
  for (var i in p) { 
    c[i] = p[i];
  }
  return c;
}
var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国

深拷贝举例

function deepCopy(p, c) {
  var c = c || {};
  for (var i in p) {
    if (typeof p[i] === 'object') {
      c[i] = (p[i].constructor === Array) ? [] : {};
      deepCopy(p[i], c[i]);
    } else {
      c[i] = p[i];
    }
  }
  return c;
}

参考文章:阮一峰:Javascript面向对象编程(三):非构造函数的继承

深拷贝实现方式

  • 手动复制方式,如上面的代码,缺点就是
  • Object.assign,ES6 的新函数,可以帮助我们达成跟上面一样的功能。
var obj1 = { a: 10, b: 20, c: 30 };
var obj2 = Object.assign({}, obj1);
obj2.b = 100;
console.log(obj1);
// { a: 10, b: 20, c: 30 } <-- 沒被改到
console.log(obj2);
// { a: 10, b: 100, c: 30 }
  • 转成 JSON 再转回来

用JSON.stringify把对象转成字符串,再用JSON.parse把字符串转成新的对象。
缺点:只有可以转成JSON格式的对象才可以这样用,像function没办法转成JSON。

  • jquery,有提供一个$.extend可以用来做 Deep Copy。
  1. lodash,也有提供_.cloneDeep用来做 Deep Copy。
  2. 递归实现深拷贝
function clone( o ) {
    var temp = {};
    for( var k in o ) {
        if( typeof o[ k ] == 'object' ){
             temp[ k ] = clone( o[ k ] );
        } else {
             temp[ k ] = o[ k ];
        }
    }
    return temp;
}

参考文章:关于 JS 中的浅拷贝和深拷贝,进击JavaScript之(四)玩转递归与数列

23.如何快速合并雪碧图

  • Gulp:gulp-css-spriter
  • webpack:optimize-css-assets-webpack-plugin
  • Go!Png
  • 在线工具

24.代码优化基本方法

减少HTTP请求
HTML优化:

  • 使用语义化标签
  • 减少iframe:iframe是SEO的大忌,iframe有好处也有弊端
  • 避免重定向

CSS优化:

  • 布局代码写前面
  • 删除空样式
  • 不滥用浮动,字体,需要加载的网络字体根据网站需求再添加
  • 选择器性能优化
  • 避免使用表达式,避免用id写样式

js优化:

  • 压缩
  • 减少重复代码

图片优化:

  • 使用WebP
  • 图片合并,CSS sprite技术

减少DOM操作

  • 缓存已经访问过的元素
  • "离线"更新节点, 再将它们添加到树中
  • 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿

使用JSON格式来进行数据交换
使用CDN加速
使用HTTP缓存:添加 ExpiresCache-Control 信息头
使用DNS预解析
Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性,由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置,所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。
预解析的实现:

  1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />
  2. 在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

25.HTTPS的握手过程

  1. 浏览器将自己支持的一套加密规则发送给服务器。
  2. 服务器从中选出一组加密算法与HASH算法,并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址,加密公钥,以及证书的颁发机构等信息。
  3. 浏览器获得网站证书之后浏览器要做以下工作:

    • 验证证书的合法
    • 如果证书受信任,或者是用户接受了不受信的证书,浏览器会生成一串随机数的密码,并用证书中提供的公钥加密。
    • 使用约定好的HASH算法计算握手消息,并使用生成的随机数对消息进行加密,最后将之前生成的所有信息发送给服务器
  4. 网站接收浏览器发来的数据之后要做以下的操作:

    • 使用自己的私钥将信息解密取出密码,使用密码解密浏览器发来的握手消息,并验证HASH是否与浏览器发来的一致。
    • 使用密码加密一段握手消息,发送给浏览器。
  5. 浏览器解密并计算握手消息的HASH,如果与服务端发来的HASH一致,此时握手过程结束,之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。

参考文章:《HTTPS 工作原理和 TCP 握手机制》

26.BFC相关问题

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有 Block-level box 参 与, 它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。

BFC的渲染特点

  • BFC这个元素的垂直方向的边距会发生重叠,垂直方向的距离由margin决定,取最大值
  • BFC的区域不会与浮动元素的box重叠(清除浮动原理
  • 计算BFC的高度的时候,浮动元素也会参与计算

哪些元素会生成 BFC

BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

  • 根元素
  • overflow不为visible
  • float不为none
  • position为absolute或fixed
  • display为inline-block、table-cell、table-caption、flex、inline-flex

BFC的使用场景

他的很常用的一个应用场景就是解决边距重叠、清楚浮动的问题.

27.响应式图片

1.JS或者服务端硬编码,resize事件,判断屏幕大小加载不同的图片
2.img srcset 方法
3.picture标签 -> source
4.svg
5.第三方库polyfill

28.判断一个变量是否是数组

var a = []; 
// 1.基于instanceof 
a instanceof Array; 
// 2.基于constructor 
a.constructor === Array; 
// 3.基于Object.prototype.isPrototypeOf 
Array.prototype.isPrototypeOf(a); 
// 4.基于getPrototypeOf 
Object.getPrototypeOf(a) === Array.prototype; 
// 5.基于Object.prototype.toString 
Object.prototype.toString.apply(a) === '[object Array]';
// 6.Array.isArray
Array.isArray([]); // true

以上,除了Object.prototype.toString外,其它方法都不能正确判断变量的类型。

29.UTF-8和Unicode的区别

UTF-8就是在互联网上使用最广的一种unicode的实现方式。
Unicode的出现是为了统一地区性文字编码方案,为解决unicode如何在网络上传输的问题,于是面向传输的众多 UTF(UCS Transfer Format)标准出现了,顾名思义,UTF-8就是每次8个位传输数据,而UTF-16就是每次16个位。
ASCII --> 地区性编码(GBK) --> Unicode --> UTF-8
知乎参考回答


参考
慕课网实战课程《前端跳槽面试必备技巧》

查看原文

赞 263 收藏 1811 评论 36

半年的半年 关注了用户 · 2017-08-10

微醺岁月 @jawil

Too young, too simple. Sometimes, naive.

关注 762

半年的半年 发布了文章 · 2017-07-29

深入理解 Vue Computed 计算属性

Computed 计算属性是 Vue 中常用的一个功能,但你理解它是怎么工作的吗?

拿官网简单的例子来看一下:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

Situation

Vue 里的 Computed 属性非常频繁的被使用到,但并不是很清楚它的实现原理。比如:计算属性如何与属性建立依赖关系?属性发生变化又如何通知到计算属性重新计算?

关于如何建立依赖关系,我的第一个想到的就是语法解析,但这样太浪费性能,因此排除,第二个想到的就是利用 JavaScript 单线程的原理和 Vue 的 Getter 设计,通过一个简单的发布订阅,就可以在一次计算属性求值的过程中收集到相关依赖。

因此接下来的任务就是从 Vue 源码一步步分析 Computed 的实现原理。

Task

分析依赖收集实现原理,分析动态计算实现原理。

Action

data 属性初始化 getter setter:

// src/observer/index.js

// 这里开始转换 data 的 getter setter,原始值已存入到 __ob__ 属性中
Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
    const value = getter ? getter.call(obj) : val
    // 判断是否处于依赖收集状态
    if (Dep.target) {
      // 建立依赖关系
      dep.depend()
      ...
    }
    return value
  },
  set: function reactiveSetter (newVal) {
    ...
    // 依赖发生变化,通知到计算属性重新计算
    dep.notify()
  }
})

computed 计算属性初始化

// src/core/instance/state.js

// 初始化计算属性
function initComputed (vm: Component, computed: Object) {
  ...
  // 遍历 computed 计算属性
  for (const key in computed) {
    ...
    // 创建 Watcher 实例
    // create internal watcher for the computed property.
    watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)

    // 创建属性 vm.reversedMessage,并将提供的函数将用作属性 vm.reversedMessage 的 getter,
    // 最终 computed 与 data 会一起混合到 vm 下,所以当 computed 与 data 存在重名属性时会抛出警告
    defineComputed(vm, key, userDef)
    ...
  }
}

export function defineComputed (target: any, key: string, userDef: Object | Function) {
  ...
  // 创建 get set 方法
  sharedPropertyDefinition.get = createComputedGetter(key)
  sharedPropertyDefinition.set = noop
  ...
  // 创建属性 vm.reversedMessage,并初始化 getter setter
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        // watcher 暴露 evaluate 方法用于取值操作
        watcher.evaluate()
      }
      // 同第1步,判断是否处于依赖收集状态
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

无论是属性还是计算属性,都会生成一个对应的 watcher 实例。

// src/core/observer/watcher.js

// 当通过 vm.reversedMessage 获取计算属性时,就会进到这个 getter 方法
get () {
  // this 指的是 watcher 实例
  // 将当前 watcher 实例暂存到 Dep.target,这就表示开启了依赖收集任务
  pushTarget(this)
  let value
  const vm = this.vm
  try {
    // 在执行 vm.reversedMessage 的函调函数时,会触发属性(步骤1)和计算属性(步骤2)的 getter
    // 在这个执行过程中,就可以收集到 vm.reversedMessage 的依赖了
    value = this.getter.call(vm, vm)
  } catch (e) {
    if (this.user) {
      handleError(e, vm, `getter for watcher "${this.expression}"`)
    } else {
      throw e
    }
  } finally {
    if (this.deep) {
      traverse(value)
    }
    // 结束依赖收集任务
    popTarget()
    this.cleanupDeps()
  }
  return value
}

上面多出提到了 dep.depend, dep.notify, Dep.target,那么 Dep 究竟是什么呢?

Dep 的代码短小精悍,但却承担着非常重要的依赖收集环节。

// src/core/observer/dep.js

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      // 更新 watcher 的值,与 watcher.evaluate() 类似,
      // 但 update 是给依赖变化时使用的,包含对 watch 的处理
      subs[i].update()
    }
  }
}

// 当首次计算 computed 属性的值时,Dep 将会在计算期间对依赖进行收集
Dep.target = null
const targetStack = []

export function pushTarget (_target: Watcher) {
  // 在一次依赖收集期间,如果有其他依赖收集任务开始(比如:当前 computed 计算属性嵌套其他 computed 计算属性),
  // 那么将会把当前 target 暂存到 targetStack,先进行其他 target 的依赖收集,
  if (Dep.target) targetStack.push(Dep.target)
  Dep.target = _target
}

export function popTarget () {
  // 当嵌套的依赖收集任务完成后,将 target 恢复为上一层的 Watcher,并继续做依赖收集
  Dep.target = targetStack.pop()
}

Result

总结一下依赖收集、动态计算的流程:

1. data 属性初始化 getter setter
2. computed 计算属性初始化,提供的函数将用作属性 vm.reversedMessage 的 getter
3. 当首次获取 reversedMessage 计算属性的值时,Dep 开始依赖收集
4. 在执行 message getter 方法时,如果 Dep 处于依赖收集状态,则判定 message 为 reversedMessage 的依赖,并建立依赖关系
5. 当 message 发生变化时,根据依赖关系,触发 reverseMessage 的重新计算

到此,整个 Computed 的工作流程就理清楚了。

Vue 是一个设计非常优美的框架,使用 Getter Setter 设计使依赖关系实现的非常顺其自然,使用计算与渲染分离的设计(优先使用 MutationObserver,降级使用 setTimeout)也非常贴合浏览器计算引擎与排版引擎分离的的设计原理。

如果你想成为一名架构师,不能只停留在框架的 API 使用层面。

查看原文

赞 136 收藏 126 评论 11

半年的半年 赞了回答 · 2017-07-27

解决vuejs怎么管理应用的登录状态

只提供思路给你。
没用过vue-router,我用的是director,不过基本功能差别应该不大(我猜)
1、你登录完了以后把状态(token)存在本地储存或者cookies里面;
2、登录成功的时候通知组件更新信息(比如说显示头像什么的);
3、在从login界面进入到其他界面的时候,也就是在切换路由后,加载信息前,进行一次登录验证,若通过则加载,若不通过则返回login界面。

关注 9 回答 4

认证与成就

  • 获得 236 次点赞
  • 获得 28 枚徽章 获得 0 枚金徽章, 获得 9 枚银徽章, 获得 19 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-04-08
个人主页被 1.7k 人浏览