​ 之前在掘金上看了一篇文章，名为《从输入URL到页面加载的过程—如何由一道题完善自己的前端知识体系！》感觉对整个前端的流程，包括底层的一些工作原理讲的很系统。并融入了很多计算机网路的常识问题。借着给工作室做一次技术分享的机会，我想把相关的知识自己在整理下。 涉及到的知识​ 按照文章的整个结构，将整个从Url到页面加载分为以下的几个阶段： 从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系） 开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识） 从服务器接收到请求到对应后台接收到请 ...

简介​ 观察者模式又称为发布—订阅模式，主要定义的是对象间一对多的关系。如果在关系中一个对象改变的时候，其他依赖的对象也能够及时得到这个对象的通知。这个用法实际上在JavaScript中也很常见，比如在Vue里面，多个组件监听一个变量的变化，当变量的值发生变化的时候，这些依赖的对象也能够很快得到这个值的变化从而重新渲染数据。 一个简单的实例我们先通过一个实例来说明这个观察者模式是怎样运行的： 12345678910111213141516171819202122232425262728var msgOffer = {}; //定义发布者var msgGetter ...

快速排序算法简介​ 快速排序也是一种分治的思想，和归并排序是互补的。归并排序是先进行递归操作之后在进行归并排序，而快速排序算法是先进行排序后递归操作。归并排序的时候，一般切分的位置恰好在数组的中心位置，但是快速排序的切分的位置是取决于数据的内容。 简单的思路​ 快速排序的思路是随机的取a[lo]为划分元素，之后指定两个左指针i和右指针j分别指向a[lo]以及数组的最后一个元素的下一个元素。然后开始左指针扫描，遇到比a[lo]大的元素就停止，右指针开始从后往前扫描，遇到比a[lo]小的元素就停止。然后左右指针指向的那个两个数相互交换位置，左指针又开始扫描，重复以上的过程，直到两个指针 ...

​ 之前学习webpack由于版本问题以及学习的知识比较零散，所以走过很多弯路，现在通过自己一些编程的实践和看相关的书籍博客，来总结下相关的知识点。主要还是为了再熟悉一下webpack相关的打包流程，以及这种模块化的思维。也是对Vue，react这种框架的一种更加深入的理解。 ​ 首先新建一个webpack的空文件，然后按照流程先npm init，代表的是新建一个package.json文件，之后需要确认一些参数，当然如果想要全部输入默认值跳过提问环节的话可以直接输入npm init -y。之后会生成一个package.json文件。在这个文件里面，我们更关心script这一部分的 ...

Set的用法​ 在python语言中，Set实际上是一个新的数据结构名叫集合。正如同数学当中的集合一样，在集合中的所有成员的值都是唯一的，不能有重复。ECMAScript6也仿造了这一点有一个Set数据结构。通常是通过new一个Set类型的对象，然后向里面添加元素。如果有重复他会自动去删除这些相同的元素。 123const s = new Set();[6,8,1,5,6,2,3,4,5].forEach(num =>s.add(num));console.log(s); ​ Set函数可以接受一个数组，或者是具有Iterable接口的其他数据结构皆可。最为其参数。然后用来初 ...

web缓存机制​ 在chrome的开发者工具中，在network /Size一列中可以看见一些请求，如果在 这列中明确标明大小KB,B，说明这是一个网络请求，否则一般都会明确标明：from memory cache,from disk cache和from ServiceWorker. 优先级依次是： Service Worker Memory Cache Disk Cache 网络请求 1、Memory Cache ​ 它是内存中的缓存，和硬盘中的缓存相对。几乎所有的网络请求资源都会被浏览器加入到memory cache中去，但由于数量大所以是个短期的存储过程。当浏览的 ...

js——闭包问题一、理解闭包首先根据下面的例子来理解闭包的概念： 1234567891011121314151617var ourVar = 'liming'var later;function outerTest(){ var inner = 'haha'; function innerTest(){ console.log(inner); console.log(ourVar) } later = innerTest;}outerTest();later();//运行的结果是：//haha//lim ...

一、生成器函数类似于python，js也有自己的生成器，其基本的使用和定义方式如下所示： 123456789function* myGenertor(){ yield 'test1'; yield 'test2'; yield 'test3';}for(let aa of myGenertor()){ console.log(aa)} 最后，这个程序依次输出的是test1.test2和test3，这也是JavaScript的一个生成器。在定义函数的时候在function后面加一个*表示这是一个生成器函数，并通过关键字yield返回相应的值 ...

js实现继承一、尝试实现原型继承 123456789101112function Person(){}Person.prototype.dance = function(){};function Ninja(){}Ninja.prototype = new Person();const ninja = new Ninja();console.log(ninja instanceof Ninja); //trueconsole.log(ninja instanceof Person) //trueconsole.log(ninja in ...

懒加载和预加载都是前端性能优化中对于图片的优化。从而使得用户有更好的上网体验 一、懒加载 1.1HTML中的懒加载方式 懒加载就是在延迟加载。一般的做法是不设置或者设置一个相同的图片src用来占位。并且将真正需要加载的图片地址放在img标签自定义的属性中（如：data-origin）。正如很多电商平台的做法，等到用户将浏览器的时候滑至该图片的位置上时，这时候由js监听并且将自定义属性中的值存放在src中。这时候图片才开始加载。由此达到懒加载的效果。这样做的目的也是为了防止页面一次请求浏览器的数据量服务的数据量过大导致后面的一些js因为图片的渲染迟迟不能被执行导致出现一些错误，同时也能够防止服务 ...