使用preload & prefetch提高加载速度
概述：提前加载资源，用的时候直接从本地取对一些资源，如css，js，font，img等，我们可以不必等到用的时候再按常规加载，而可以提前加载好(注意：只是先准备好，并不会马上生效)，等到需要用的时候直接取就行了，举两个例子：
我们通常把js放在底部：
123<body> <script src="main.js"></script>...
阅读全文…
tomwang1013的学习总结
今歌爸爸的学习记录及生活点滴
-
-
PWA的一种fetch模式：cache then network
详解PWA中处理请求有很多种模式，比如： Cache falling back to network 先查询缓存，有的话取缓存的数据；没有的话再请求服务端数据 Network falling back to cache 和上面一种刚好相反 这是比较常见的两种，还有一种，就是今天我们要介绍的：cache then network，什么意思呢？就是同时发请求及查询缓存，如果缓存中有数据的... 阅读全文… -
vue patch算法解读之二：自定义组件的实例化及首次渲染
在上一篇中我们介绍了根组件root的初始化渲染过程： 123new Vue({ render: h => h(App),}).$mount('#app') 当时我们提到，root的_vnode的componentInstance中存储了App组件的实例(后面称为app)： 12345const child = vnode.componentI... 阅读全文… -
vue patch算法解读之一：根组件的初始化
vue的渲染过程是由vnode驱动的，当数据发生变化时，根据前后vnode的差异使用patch算法只重新渲染变化的部分。这里说的渲染其实就是重新调整组件的DOM结构：复用、移动、删除dom节点使得真实dom和vdom保持一致。这个过程其实是很复杂的，这里我尝试一边读源码调试，一边记录对这个过程的理解，在完全理解之前，这里记录的都是一些片段，希望最后能将这些片段串联起来组成一篇真正的有条理的解... 阅读全文… -
property descriptor的几个疑难点
property descriptor是javascript对象中属性的描述对象，包括了这个属性的meta信息，基本知识大家都知道，这里总结一些很隐晦的容易忽略的注意点 writable vs configurable writable控制value能否更改： 如果writable = true, value可以(通过赋值直接)修改，和configurable无关 如果writab... 阅读全文… -
一文读懂vue响应式系统实现过程
和众多前端框架一样，vue的数据驱动系统是它的核心，很多人都大概知道它是通过Object.defineProperty将普通属性变成get,set实现的，但知道这一点其实没啥用，因为实际情况远比这个复杂、精巧，本文尝试对整个响应式系统做一个简短、清晰、全面而不失深度的总结。以我自己这两年来使用vue的经验，了解这个系统是如何运作的对用好vue是非常有帮助的 概述数据驱动系统用一句话来概括就是... 阅读全文… -
service worker之clients.claim() vs self.skipWaiting()
service worker中有两个api出镜率很高：一个是clients.claim(), 另一个是self.skipWaiting()，我们分别看看它们的应用场景： clients.claim当页面第一次注册sw的时候，我们注意到即使此页面及其子页面处于sw的控制范围之内，但是由此页面发出的任务请求都没有经过sw，换句话说，sw在页面第一次打开的时候并没有生效。这是一个正常行为，原因如下... 阅读全文… -
web component之shadow dom
在custom elment中我们提到web component的封装性需要shadow dom来进一步提升，因为shadow dom具有两大特点： Isolated DOM：隔离的dom结构 Scoped CSS：作用范围受限的CSS 一句话：custom elements使我们能创建新的html元素，而shadow dom则为新的元素提供内容(html & css)，它们结合... 阅读全文… -
web component之custom element
web component是html5原生的组件机制，它由四个标准组成： custom element shadow dom html template html import 这些标准可以单独使用，也可以结合在一起使用，今天先介绍一下custom element，后面会依次介绍其他几个 native elements与custom elementshtml文档由很多基本元素组成，如di... 阅读全文… -
随手练练：O(n)时间复杂度解决topk
基本思路利用快排中的partition算法对数组a[n]进行划分成：a[0..p-1], a[p], a[p+1..n-1], 如果p+1=k，完成；如果p+1>k, 问题转化为在a[0..p-1]中查找topk；否则，问题转化为在a[p+1..n-1]中查找top(k-p-1)。这样，我们利用减治的思路一步步对数组做原地划分，算法终止时，我们直接取数组的前k个元素即可 实现... 阅读全文…