-
组件更新（上）
Vue的组件更新在什么时候？答：之前谈到了依赖收集和派发更新的过程，在派发更新的过程中，很可能触发了renderwatcher的回调函数，renderwatcher的回调函数就是vm._update方法，但是这里的vm._update的回调函数并不是第一次渲染，是针对更新时的重新渲染，其具体细节和初次渲染有所不同，很多情况下涉及到了经典的diff算法。Vue实现组件更新的大体流程是什么？答： 首先执行了vm._update方法，进入patch方法，在patch方法中，Vue根据p...…
-
new Vue的时候都发生了什么？
因为Vue的构造函数有!(this instanceof Vue的这个限制) 需要注意到 el可以是字符串也可以是具体的element，并且在开发环境下不能绑定到body或者html中。 很好地判断逻辑，xxx存在然后xxx 所有实例中的el和template都会转换成render方法，这个编译的过程相当复杂,暂时没讲。另外render函数的参数createElement就是vm.createElement Virtual DOM 除了它的数据结构的定义，映...…
-
派发更新
Vue是如何实现派发更新的？答：派发更新对应的是响应式对象的getter部分：在响应式对象被修改后会触发setter。我们可以注意到，在整个defineProperty设置getter和setter之前，Vue先缓存了这个数据对象的getter和setter，因为Vue希望用户自己设置的getter和setter能够比Vue所设置的getter和setter更优先。在执行过getter后，Vue拿到了这个数据对象的新的值，经过新老值判断，如果新老值相同，则会退出set函数。如果不相同则会优...…
-
响应式对象
【前言】之前我们介绍的都是Vue是怎么实现数据渲染和组件化的，主要讲的是初始化的过程，把原始的数据最终映射到DOM中，但并没有涉及到数据变化到DOM变化的部分，而Vue的数据驱动除了数据渲染DOM之外，还有一个很重要的体现就是数据的变更会触发DOM的变化。接下来我们研究的内容将侧重于响应式原理。问题1：Vue的实现响应式原理的最最核心方法是什么？答：要用最简单的话来阐述Vue的响应式原理，那就是Object,defineProperty这个在ES5中定义的方法，这个方法在《JavaScri...…
-
Http的三次握手
Http请求 && TCP connection来看一个生动的概念图：从这个图中我们可以看到，user是我们用户，用户决定什么时候发起http请求，而http要发送数据给服务端，就会建立一个“通道”，或是说“传送带”（更形象）把数据传送过去。那么这“传送带”就是所谓的TCP 连接（TCPconnection）。我们在这里要谈论的三次握手就是tcp connection这里实现的。TIPs： Http和tcp是完全不同的两个东西，他们都是相互独立的，只不过存在着合作的关系，...…
-
CORS跨域请求的限制与解决办法
因为出现了要用devServer开发的项目要向某个php文件发送请求的需求，如果一直使用Jsonp实现跨域请求感觉十分的不方便。这次就尝试通过服务端的角度来解决跨域问题。用node实现两个简单的服务器，然后通过CORS的方式实现跨域请求。Access-Control-allow-origin原理很简单，我们只需要在消息头中设置好Access-Control-allow-origin属性即可实现跨域请求。以下是我的实验现场： 创建server.js，用来充当我们开发时所在的服务器其中ser...…
-
CORS与复杂跨域请求
本篇笔记是针对之前的笔记中记录关于CORS设置跨域请求的一些细节的补充。通过服务端设置响应头属性Access-Control-Allow-Origin的方式可以指定接受跨域请求的域名。但是仅仅在responseHeader中设置这一种属性是不能解决复杂请求的跨域问题的。本文就着重对一些复杂请求的CORS跨域解决办法进行记录。什么是简单|复杂请求只要同时满足一下两大条件，就属于简单请求： 请求方式为一下三种之一： GET ...…
-
CacheControl的含义和使用
public & private & no-cache众所周知，在http请求返回的过程中会经过我们的浏览器，以及众多的代理服务器。 public的意思也就是在任何一个节点都可以对数据进行缓存，缓存可以来自于浏览器自身，也可以是其中的某个代理服务器。 private：就仅限于在我们的浏览器使用缓存。 no-cache:可以在本地或代理服务器使用缓存，但是需要去原服务器端进行验证，在原服务验证未过期后，继续使用缓存。 到期时间 ...…
-
请求报文和响应报文
请求报文和响应报文基本格式直接在图上清晰的标注：所以，我们可以总结一下：对于请求报文，首行中的内容基本上是针对请求方式和请求的文件地址，以及请求的协议版本。这些内容都是用来描述请求的最基本内容，必须显示的表现出来，缺一不可。对于请求报文中的请求头而言，里面的内容主要是用来接受这个请求主体的信息，比如content-type，以及请求接受的响应信息，如：Accept等。而对于响应报文而言，首行描述的内容依旧是最基本且缺一不可的。主要是请求的协议版本和响应的状态。在消息头中，主要描述了响应主体...…
-
LastModify和ETag及时更新缓存问题的解决方案
之前的文章中说过，本地缓存虽然可以提高性能，但是却不能解决缓存及时更新的问题。如果我们希望浏览器能够判断服务端的文件是否改变，从而决定是否读取缓存文件，这就需要使用到缓存验证相关的设置。设置缓存验证，主要可以结合no-cache并设置Last-Modified或ETag两种方式。Last-Modified与If-Modified-Since有一种策略是在请求的时候根据服务端文件修改的时间和客户端请求的时间进行对比，从而来判断缓存是否可用的。LastModified的值是服务端设置文件修改时...…
-
依赖收集
Vue是在什么时候进行依赖收集的？答：Vue将props、data等数据添加Oberser之后，就有了getter，getter中包含的逻辑就是依赖收集。所以只要当数据的getter得到触发就会触发依赖收集的过程，相反即使添加了响应是对象，如果他的getter没有得到触发也不会触发依赖收集。Vue在初次渲染DOM的时候，首先需要将render函数转换为VNode，也就是说在执行vm._render函数的时候访问了模板上所‘提到’的变量，因此这些变量的getter也就得到了触发。而那些没有‘...…
-
webpack lazyLoading 懒加载
webpack之Lazy Loading懒加载懒加载是什么？懒加载其实就是异步import语句。webpack可以非常智能的识别出异步import语句，然后将需要分割的代码进行分割打包至生产环境。然后在需要的时候引入生产环境下的已经打包好的文件。具体的实现方式就是在需要的时候向head内插入script引用。比如触发事件，事件中存在import。（htmlPlugin生成的文件中并没有这个script引用）。如果import的内容是同步的，那么webpack在打包的时候htmlPlugin...…
-
Webpack相关热模块更新（HMR）1
Webpack相关热模块更新（HMR）1Webpack-dev-server虽然能在本地起一个服务器，还能帮助我们自动打开浏览器并刷新页面，但终究还是得刷新，及时这个过程是自动的。如果我们编写的是一些动态代码，比如需要触发事件添加样式。那么每一次刷新就会使之前触发事件后的样式消失，需要重新触发样式。现在我们有更方便的方式，浏览器连刷新都不刷新，直接在现有页面的基础上修改页面渲染。听上去是在是在炫酷了，让我们来看看如何利用webpack来实现：一、Webpack热模块更新——HMRHMR的开...…
-
webpack-Shimming
Webpack Shimming的作用一、module的作用域留给初学者的坑为了处理一些兼容性上的问题。比如我们有一些老的npm包，他的源代码类似于这样：然后我们在index.js中引入这个方法：因为每个模块的作用于都是绝对独立的，所以即使jquery已经引入在Index.js中，在test.js中没有引入jquery，那么在test.js中$是无法被浏览器所理解的。顾会报错：TIPS：模块的引入不同于简单的脚本连接。在test.js中引入jquery就不会发生错误。效果如下：如何不在te...…
-
webpack之Preloading，Prefetching
webpack之Preloading，PrefetchingPreloading为了提高代码的录用率，我们通常会尽可能的采用异步的方式编写。但是这样又存在一个问题，比如一个登陆模态框使用异步写法，在页面加载的时候不会被加载，只有当点击登录按钮之后才会加载模态框，这样就可能造成交互反应较慢的问题，如果一开始就全部载入，又会影响浏览器整体呈现页面的时间。为了解决这个问题，我们引入preloading的概念，即在网络空闲时间加载可能需要的部分。使用方法很简单，使用魔法注释的方式，在需要预加载的地...…
-
js和css造成的阻塞情况研究总结
前言关于js和css阻塞问题之前一直一知半解，今天特花时间查阅资料进行总结性研究。虽然看上却网上对js和css阻塞问题的文章有很多，看上去写的也非常好，但是总有一些细节还是领悟不到，可能不同人的盲点都是不同的。今天的研究成果让我感觉浏览器也是一个很实在的工具。什么时候该做什么，什么时候不该做什么，什么时候能做什么都分的很清，很注重效率。网上的很多关于这方面的结论都有不同说法，这也让我一脸懵逼，比如有人说js的下载会阻塞后面资源的加载，也有说不会的。但是后来发现他们说的其实都是对的，只不过是...…
-
资源的合并与压缩
一、浏览器的一个请求从发送到返回都经历了什么？二、 资源的合并与压缩资源的合并与压缩分为两种：（1）减少http的请求数量 （2）减少请求资源的大小。 html压缩压缩html是一种常见的方式，就和webpakc压缩js脚本一样，他可以将一些对代码执行不造成影响的空格、制表符、换行符等，还有一些特殊意义的字符，比如注释等。都可以经过压缩从而减小html的体积。也就相当于减少了请求资源的大小。如何进行html压缩？ 使用在线网站进行压缩（不推荐） nodeJs提供...…
-
babel-loader配置
babel初体验进入babel的官网，然后在导航上点击使用，选择一个执行环境，这里是webpack，无论是什么环境使用babel，下面都会有清晰的教程。进入下面链接即可复习观看（babel中文文档）：https://babel.docschina.org/setup#installation需要注意的是，安装了babel-loader还没完，他并不会对我们的js代码进行翻译。这只能说是打通了webpack和babel之间的桥梁。还需要下载转码规则之类的东西，配置好文件才能进行“翻译”。补充...…
-
Webpack CSS代码分割
output.chunkFilename和filename和vendors.name以及魔法注释webpackChunkName的区别先只使用魔法注释，其他的均不设置，来查看效果：我们可以看到除了main.js这个入口文件外，还打包出了两个js文件，第一个是vendors~lodash，第二个是vendors~main（并没有在Index.js中引入这个文件，但是还是打包出了，怀疑是babel的core-js\@3？）。vendors说明这两个js文件他们都符合vendors组的条件，但是...…
-
webpack-code-splitting
为什么要代码分割？代码分割并不是webpack独有的概念，在webpack诞生以前就存在了代码分割的思想和做法。代码分割的好处：能够把静态资源分割出去，比如类似vue、和lodash之类的静态类库，我们就可以把他们分割出去，形成单独的文件。如果不进行分割，这类大的静态资源就会和我们的业务逻辑打包到同一个js文件中,业务逻辑代码一旦变化，如果用户重新加载页面，浏览器就不得不把这个巨大的js文件再次加载一次。如果能够分割代码，那么当我们的业务逻辑代码发生变化的时候，浏览器只要加载我们变动的js...…
