正文从这里开始了
—————–我是华丽丽的分割线 开始—————–
从输入URL开始
以谷歌为例，当你输入框里输入’ba’的时候，那么就会根据访问记录，会给一些提示，浏览器会做一些猜测，假设根据你的访问的统计，在输入ba的时候，就会有90%，会访问www.baidu.com，一次在你输入会车前，就回车之前，会先去建立TCP链接，甚至是渲染。
接着你输入回车，然后浏览器会去检测缓存，然后设置HTTP信息，接着会调用不同平台的请求方法。
假设缓存中没有，那么浏览器会对URL进行检查，会判断协议等等之类的工作。然后发出HTTP请求，从应用层(五层协议<应用层、传输层、网络层、数据链路层、物理层>)的角度上看，主要做了两件事1、通过DNS查询IP。2、通过socket发送数据。
服务器接到数据请求的时候，在真正进入服务器之前，可能会先经过，负载均衡的机器，它的作用是将请求合理的分配到多个服务器上面，同时也具备防攻击（DDOC攻击<通过大量的合法请求占用大量的网络资源，以达到瘫痪网络的目的。例如，两个商店的参与竞争，其中一件商店的老板叫了一大帮人去另外一件商店只观赏，不购物。导致哪一间商店塞满了不购物的人，但是真正购物的又被塞得进不去>）
WEB服务器接收到浏览器的HTTP请求后，会检测浏览器是否支持HTTP压缩。
支持：
WEB服务器会检查请求文件的后缀名，如果请求文件是HTML、CSS、IMG等静态文件，WEB服务器会到压缩缓存目录中检查是否已经存在请求文件，如果存在就直接返回压缩缓存中的文件，如果不存在就返回未压缩的请求文件，并将文件缓存在压缩缓存目录中。
如果请求的是动态文件，则WEB服务器将动态文件返回浏览器中，压缩内容不会存放在压缩缓存中（因为是动态，所以每次请求的数据都可能不一样，缓存起来会导致数据显示错误）
（总结上述过程是：服务器检测浏览器是否支持HTTP压缩，然后服务器返回数据，返回的HTTP传输到浏览器上，如果有gzip压缩，会先进性解压。）
渲染过程如上图所示，
1、网页发出http请求，返回html，这时候网页渲染就开始。
先读取html标签，从上面往下读取，这时候可能遇到link标签，那么就又发一次http请求，请求css文件。下载完css文件以后，继续往下面解析，也有可能遇到script标签，这时候也是会发出一个http请求。
，body里面可能有遇到img标签，然后就会发出http请求，去请求图片。就这样一直执行到body结束
2、渲染引擎会对HTML进行html解析，解析HTML文档并把标签转换成内容树中的DOM节点，解析以后会构建出一棵DOM(document object model)树。而CSS同样会进行css解析，解析style元素和外部文件中的样式数据，解析以后会构建样式规则。这时候样式规则以及HTML中的显示控制将共同作用创建一棵渲染树。之后会对每个节点在屏幕上的确切显示位置，这个过程称为布局处理。对每个节点进行布局处理以后，下一步就是绘制，这时候遍历渲染树并用UI后端层将每个结点绘制出来。（这个过程可以理解为异步处理<这个说法只是为了帮助理解>，绘制是一个缓慢的过程，渲染引擎会尝试尽快吧内容显示出来。它并不会等到所有的HTML都被解析完才显示，而是会在处理后面的内容的同时，会把已经处理过的布局内容先显示出来。这就是为什么有些网站会看到一部分内容先显示，有一部分内容还未显示的状态）。不过这个过程是在没有javascript影响布局的情况下发生的。
3、javascript会进行新编译，通过javascript源码，进行解析，解析的过程是复杂的，同时解析的过程是交互的，解析器通常会从词法分析器获取新符号并尝试匹配句法规则。如果匹配成功，就在你句法树上创建相应的节点，并继续从词法分析器上获取下一个符号。如果没有匹配规则，解析器会内部保存这个符号，知道内部保存的所有符号都能成功匹配一个规则。如果无法匹配，解析器会抛出异常。这就意味着文档无效，含有句法错误。(这也就是javascript报错)。接着会创建一科解析树。然后进行转换，转换成机器码。这时候就会对DOM做相应的操作。对DOM操作分为两个方面，这时候就要明白两个非常重要的概念(reflow和repaint)。
4、reflow和repaint
4.1、两者的区别与概念
重绘是一个元素外观的改变所触发的浏览器行为；例如改变visibility、outline、background、color等属性。浏览器会根据元素的新属性值重新绘制。是元素呈现新的外观。重绘不会带来新的布局。
重排是更明显的一种改变，可以理解为渲染树重新计算。当元素的布局影响到旁边的结点的时候，就会发生重排。重排是影响到渲染树，所以，重排一定会发生重绘。重排会带来新的布局。
4.2、什么情况下会发生重排
DOM元素的几何属性发生变化的时候会发生重排。当一个元素的几何变化影响到全局的结点布局，那么这种重排会触发整个文档的重排和重绘。性能代价是昂贵的。
DOM树的结构变化。例如节点的增删，移动等。
获取一些属性。例如浏览器为了取得正确的值，也会触发重排。这些值包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。
浏览器窗口的变化。（响应式布局）
5、重排会影响到DOM树和CSS规则，而重绘则只会影响到布局。
—————–我是华丽丽的分割线 结束—————–