毛瑞彬-CSDN博客

原创在浏览器地址栏输入地址到页面渲染完成发生了什么？（超详细）（下）

当我们在浏览器网址中输入一个地址，点击回车后发生了以下事情。分为两种情况，http事务和https事务。先讲http事务：1、浏览器（客户端）进行地址解析。2、将解析出的域名进行dns解析。3、通过ip寻址和arp，找到目标（服务器）地址。4、进行tcp三次握手，建立tcp连接。5、浏览器发送数据，等待服务器响应。6、服务器处理请求，并对请求做出响应。7、浏览器收到服务器响应，得到html代码。8...

2018-03-05 11:25:07 8057 3

原创在浏览器地址栏输入地址到页面渲染完成发生了什么？（超详细）（上）

本文主要探究在浏览器地址栏输入地址到页面渲染完成发生了什么这个问题。通过对这个问题的探究，详细的梳理http、https、tcp及前端性能优化相关的问题。本文涉及到前端、后台、运维相关的工作，也会涉及到很多专有名词及其衍生知识。我只能尽可能简单详尽的描述每一步的细节，最大的期望就是让小白明白，让老司机透彻，这篇文章本来想要一气呵成写完，单中途一些工作上的事耽搁了以下，写着写着发现一篇已经太长了...

2018-03-01 10:26:31 2042

原创 2017年年度小结和新年计划

写年度小结这个事已经构思了很久，原本计划年前就要动笔，但当时临近春节，事多又比较浮躁，想着不如就年初再写，因此就到现在才开始动笔。去年这一整年，总结起来就一句话。清闲忙碌的工作，按部就班的学习。工作方面工作上大部分时间都不是很忙，再加上我还年轻力壮，效率比较高，所以大多时候都处于工作之外，学习之中。工作上主要就两件事情，第一是基本任务，第二是完成了项目框架替换。第一件事自不必说，养家糊口所必须，第...

2018-02-24 16:45:00 1800

原创程序员进阶之码农和工程师的一点思考

年终了，这两天一直在构思一篇文章，之前一直犹豫是否下笔，因为年终必然会有一篇年终总结，如果两篇合一可以省下一点时间。思来想去，最后想着还是单开一篇比较翔实，与年终总结一起，难免会轻描淡写，不符合自己构思的初衷，因此有了此篇文章。这篇文章主要是这段时间对程序员之路的一点思考，当然，这只是个人意见，如有异同，欢迎留言，下面就直入主题。就分类来说，我觉得大部分的程序员可以分为两大类，一类只钻研技术，不考虑

2018-02-07 11:16:56 740

原创我的前端开源项目--知微

图片镇楼^_^。今天想要和大家分享的是一个开源项目知微。关于知微我先介绍下我准备用知微做什么：程序员的开源提升平台。嗯是的，就是打造一个开源平台。以后大家可以将自己优秀的github项目放到上面，平台会为你做推广。让你的项目更多人知道，从而收获更多的start，推广得好的还有奖励哦。当然上面会有一个很重要地方时学习专区，可以分享查看文章，可以查看最新的重要的资讯，这些信息将会归类处理。目前能想到的

2017-12-07 09:50:10 547 2

原创给一个新手程序员的建议

我一个关系很近的表妹去年本科毕业，中医专业，学校不太好，家里也没啥背景，长时间找不到一份自己满意的工作。因此我建议她转行做前端，她听从了我的建议，然后在我毫不知情的情况下自己去报了一个培训班学习（我知道时都已经交钱了~）。经过五个月的学习，今年年初毕业后终于找到了一份自己觉得还行的工作。这个过程中我们也有过多次交流，这篇分享就是其中一部分交流的内容，我把他分享出来，希望对新入门的小伙伴有所帮助。全篇

2017-11-07 12:11:50 5213 6

原创 webpack进阶

当我们学一个东西时，总不甘心只是学点表面皮毛，了解得越多就越想把他弄清楚。今天我要分享的内容是webpack进阶的内容，相对于前面讲的会更加深入，分为以下几点：1、webpack热更新 2、公共模块打包 3、css预处理暂时就分享这三个方面的内容，感兴趣的小伙伴可以看下去。webpack热更新热更新是什么意思呢？就是在不刷新页面的情况下，页面内容自动变更。webpack要怎么实现呢？这里

2017-10-27 11:50:52 528

原创 webpack打包vue2.0项目时必现问题。

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found i

2017-10-27 09:49:40 1814 1

原创 webpack.config.js中使用ES6语法

es5向es6迁移前段时间使用es6习惯了，但是忽然回过头来发现自己的webpack.config.js依旧还在使用require，module.exports，觉得特别别扭，就去网上查阅相关资料。很明显，答案一大片，总结起来就是三点。第一、把webpack.config.js改名为webpack.config.babel.js。第二、把增加一个.babelrc的文件，里面写上{ "prese

2017-10-27 09:46:46 4067 3

原创对声明提升的一点思考

javascript变量和函数由一个很重要的特性是声明提升。声明提升是什么意思呢？即浏览器在解释js代码之前会有一个预读阶段，将由var声明的变量和函数提升到当前作用域的顶端。举个实际的例子：、 console.log(bbb); //function bbb() {console.log(aaa);} console.log(aaa);//undefined count =

2017-10-27 09:41:59 268

原创 js之深入理解闭包问题。

最近一段时间准备好好学习下机器学习，所以了解了很多机器学习方面的知识。抓紧补救了下自己曾经遗忘的理论知识（高数、统计学、概率论、微积分等），发现还有点吃力了，很多东西都快忘得差不多。不过，咱程序员，还是很擅长围魏救赵滴^_^。所以，我果断的选择边理论边着手老本行——编程。选择语言问题，就是第一大难题。目前流行的机器学习语言大抵是R语言和python了，熟悉了下R，发现简直就不该是程序员该用的，这简

2017-10-27 09:41:08 255

原创 javascript黑科技之toString

今天看co源码时，看到了yield*黑科技。一谈到黑科技，我想起了自己之前用到过两个黑科技：获取数组的最大值和对数组进行排序。相信很多童鞋在在获取到后台数据，并且要让自己排序的时候，会出现想骂娘的冲动，但是当我们不得不去满足的时候，我们会想到用sort去处理，很明显这很有效。我下面的两个实现采用了一条不同的路，特别是获取最大值时，会让你耳目一新，这两个实现归根到底是对Object.toString的

2017-10-27 09:40:06 213

原创 javascript黑科技之高效填充

前两天看了下导致react、babel打包失败的left-pad 14行源码，的确是存在黑科技啊，可以把填充缩短到只填充2的n次方中的n次。其中还有关于位操作符的运用，很好很强大。不过由于太简单了，代码太少，所以运用场景比较单一，一些复杂场景也不能返回正确想要达到的值。我就在这基础上进行了优化，并且给出了位操作的替代处理方案，效率和源代码一样。以下是相关代码，并在github上附上了对应的单元测试：

2017-10-27 09:39:12 256

原创对数据结构和算法的总结和思考（七）--二分查找

说起查找算法，二分查找是肯定不能少的，当然鹅厂有些猿喜欢叫他奥巴马查找~二分查找的时间复杂度为O(logn),不线性查找的时间复杂度O(n)更优秀。核心思想：是将n个元素分成大致相等的两部分，取a[n/2]与x做比较，如果x=a[n/2],则找到x,算法中止；如果xfunction binary(arr, key) { let begin = 0, end = arr.length -

2017-10-26 09:43:26 225

原创对数据结构和算法的总结和思考（六）--计数排序

计数排序是我所知排序里面速度最快得排序方式（元素分布均匀），也是所学里面第一种不需要比较的排序方式。那么现在问题来了，既然这个排序方式这么棒，但是为什么有很多小伙伴都没有听说过~这就不得不提这个排序算法的缺陷了，它只支持整数排序，是不是很尴尬，是不是很难受~，下面我就来分享下这个排序算法。核心思想：计数排序的基本思想是对于给定的输入序列中的每一个元素x，确定该序列中值小于x的元素的个数（此处并非

2017-10-26 09:42:49 274

原创对数据结构和算法的总结和思考（五）--堆排序

本篇分享的内容为堆排序，提到堆排序就不得不提一下堆这个数据结构。堆实际上是一棵完全二叉树，因此其任何一非叶节点满足性质： Key[i]<=key[2i+1]&&Key[i]<=key[2i+2]或者Key[i]>=Key[2i+1]&&key>=key[2i+2] 即任何一非叶节点的关键字不大于或者不小于其左右孩子节点的关键字。堆分为大顶堆和小顶堆，满足Key[i]>=Key[

2017-10-26 09:42:09 931

原创对数据结构和算法的总结和思考（四）--快速排序

快速排序，顾名思义就是快，多快呢？亲测了下，整体性能除了计数排序无人能比，不过计数排序有一个很大的劣势是只能对整数进行排序，这就大大限制了使用场景。所以，快速排序应该是目前表现最好的排序方法，各种解释器都有快速排序的实现，并且快速排序实现简单易于理解。实现原理：找出一个标杆元素，将比标杆元素大的放到右边，小的放到左边，然后递归合并。具体代码如下：// 快速排序// 找出基准值，取出基准值，遍历放入f

2017-10-26 09:41:30 265

原创对数据结构和算法的总结和思考（三）--希尔排序

希尔排序是第一个时间复杂度突破O(n^2)的高级算法。顾名思义，这就是被希尔发现的一种排序算法。算法本质为分组插入排序。具体实现为：let count = 0;function shellSort(arr) { let gap = 1, times = 2; while(gap < arr.length / times) { gap = gap * times +

2017-10-26 09:40:30 243

原创对数据结构和算法的总结和思考（二）--简单排序算法

冒泡排序提起简单排序就不得不先提冒泡排序，为何，简单。只有简单的方法才有可能成为最优秀的方法，无疑，冒泡排序已经具备了简单的潜质。冒泡排序的实现原理是循环然后挨个比较相邻元素，不废话，直接上代码：先附上一个swap.js的代码：function swap(arr, i, j) { let temp = arr[i]; arr[i] = arr[j]; arr[j] = te

2017-10-26 09:39:48 232

原创对数据结构和算法的总结和思考（一）--概览

前段时间陆续看了各种排序算法和查找算法，觉得不过瘾，很多东西不系统，所以网上找了一本书程杰的《大话数据结构》。这段时间认真学习了全本内容，收获颇多，想着就总结一下这段时间所学，所思，权当给大家一个借鉴吧。先从排序算法说起现在流行的排序算法如果按类型分大致分为五大类：选择排序类、插入排序类、交换排序类、归并排序类和计数排序类，各有优劣，每种算法的运用常见不一样，但总体来说，交换排序类中的快速排序表现

2017-10-26 09:38:47 544

原创 flex布局

css3 flex布局极大的方便了页面的结构布局，目前大多数主流浏览器已经支持这个属性，特别是移动端已经支持得非常好，掌握flex布局已经势在必行了。flex的历史我这就不讨论了，本篇文章主要分享flex的语法，用简短的文字讲述flex各种语法的用处。想要容器使用flex布局，只需要在容器上加上一个样式，display:flex。flex语法分为两种，一种是用在父容器上，一种是用在子元素上。用在父元

2017-10-26 09:28:59 258

原创 http你不得不知道的那些事（五）-报文头

现在开始详细分析下报文头内容：我们先对首部进行下分类：通用首部（请求和响应都可以用）请求首部（只能用在请求中）响应首部（只能用在响应中）实体首部（描述主体的长度和内容，或者资源自身）扩展首部（规范中没有定义的新首部）通用首部： connection 允许客户端和服务器指定与请求/响应连接有关的事项。 date 提供日期和时间标志，说明报文是什么时间创建的。 mime-v

2017-10-25 17:35:36 330 1

原创 http你不得不知道的那些事（九）-缓存细节

前面讲了那么多关于http相关的东西，本篇讲述一个和前端优化息息相关的东西–浏览器缓存。浏览器缓存大致可以分为两种，强制缓存和对比缓存。强制缓存的意思是浏览器在缓存过期之前只会使用浏览器缓存的文件，不会发起http请求，对比缓存的意思先请求服务器判断浏览器缓存是否有效，然后再决定是否使用浏览器缓存。强制缓存有两种类型：expires和cache-control。Expires的值为服务端返回的到期时

2017-10-25 17:11:34 231 1

原创 http你不得不知道的那些事（八）--TCP三次握手

前两天连续有两个朋友问我关于tcp三次握手详情了，起初我就让他们在网上搜，因为网上这种东西都太多了，重复造轮子的事我可不太想做。不过他们给我的答复是已经在上网搜了，不过都说得不清不楚，最重要的是细节不清楚。我不太相信，就去看了下百度百科，果然细节讲得含糊其辞。我给他们回复了两遍，觉得不能再重复造轮子了，所以写了这篇文章，详细的分析下tcp的三次握手。通过阅读上图，我想这个过程已经很清晰了。那这几个缩

2017-10-25 16:37:50 308

原创 http你不得不知道的那些事（七）--跨域请求

之前有篇文章详细的讲述了浏览器的同源策略，并且附带的提了下跨域。本篇就详细的分享下跨域请求方案。1、jsonpJSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素

2017-10-25 16:35:30 457

原创 http你不得不知道的那些事（六）--请求响应细节

http相关的东西也写了好几篇了，但是一直都在涉及http周边的东西，最核心最底层的没有涉及到。本篇就要揭开网络请求的神秘面纱，将最底层的东西以最简单的方式呈现给大家。那就得先讲讲OSI七层模型，OSI（Open System Interconnect），即开放式系统互联。一般都叫OSI参考模型，是ISO（国际标准化组织）组织在1985年研究的网络互连模型。有了上面这张图，相信大家对网络架构有了基

2017-10-25 16:28:10 1726

原创 http你不得不知道的那些事（四）-http报文

与http相关的东西中最基本也是最重要的应该要数报文了，但是报文比较简单，内容也比较杂，所以在我放在这一篇来分享。学习http报文，我们不太需要太强的逻辑思维能力，也不需要很强的理解能力，唯一需要的就是记住，记住之后才能很好的运用。如何记住，我的方法是总结归纳，由于东西多，很多东西又有相似的特质，所以就有了归纳总结的用武之地。先来两张图：请求报文：报文分为请求报文和响应报文请求报文的起始

2017-10-25 16:21:44 251

原创 http你不得不知道的那些事（三）-XHR

web安全主要涉及到两方面的东西，一个是前面分享的CSRF，一个就是本篇将要分享的XHR。如果CSRF是沉睡中的巨人，那么XSS就是真正web安全方面的巨人，现在大部分的web攻击都来自XSS。XSS又称CSS，全称Cross SiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)

2017-10-25 16:18:39 1299 2

原创 http你不得不知道的那些事（二）--CSRF

http你不得不知道的那些事（二）–CSRF之前分享了同源策略，这一篇开始分享web安全的东西。其中也会涉及到一些同源策略的知识，在这一篇中我就不展开讲了，如果有不清楚的，可以去看我之前写的两篇文章，http你不得不知道的那些事（一）–同源策略。以下是本篇文章的内容：CSRF:CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或

2017-10-25 16:11:54 384 1

原创 http你不得不知道的那些事（一）--同源策略（2）

上一篇讲到CORS，这篇接着讲，争取在本篇内就把同源策略的内容讲完。什么是CORS？CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制（摘自阮一峰的网络日志）。抓住重点，克服ajax只能同源使用的限制。也就是说ajax刚出来的时候只能同

2017-10-25 15:47:24 263

原创 http你不得不知道的那些事（一）--同源策略（1）

前段时间详细的学习了一下http相关的东西，特别是看了http权威指南，感觉收获良多，在未来的一段时间我将把自己所学到的相关东西分享出来，先捡重要的（我自认为的）来说。本章讲述同源策略，希望对大家有所帮助。基本上每个从事过网络编程，接触过浏览器的程序员都知道浏览器的同源策略。但是深究一下就不一定有很多人知道这是个什么东西了，只是囫囵吞枣的知道不准非同域的请求，知道部分解决方法，例

2017-10-25 15:39:49 624

毛瑞彬的博客