正文从这里开始了

—————–我是华丽丽的分割线 开始—————–

问题再现：
IE8：

IE9：

IE10-IE11：



FireFox：



chorme：



css:

可以看出：
1、IE8、IE9下，由于不支持placeholder，因此不存在placeholder文本位置居中与否的问题，但是填写的文字居中了；
2、在IE10-IE11下表单里面的placeholder，placeholder文本位置并未垂直居中，但是填写的文字却垂直居中了；
3、chrome与FireFox下，placeholder文本位置垂直居中并且填写的文字同样也垂直居中了。

整理问题：
IE8-IE11，FireFox以及chrome下，表单文本居中了。但是在IE10-IE11下，placeholder文本并未垂直居中。
那么现在整理出问题，IE10-IE11下，placeholder文本并未垂直居中。
难道placeholder文本和表单用户输入的文本计算方式是不一样的？从现象上看，这确实不一样
从css上看，会造成影响的属性分布有box-sizing，border，padding，height，line-height
当box-sizing设置为border-box时，line-height = height - border-top-width - border-bottom - padding-top - padding-bottom这样既可把文本居中了。
当box-sizing设置为content-box时，line-height = height这样既可把文本居中了。

因此上述的问题既可解决。
IE10-IE11

同样的
chrome

FireFox

因此
1、可以选择去掉padding垂直方向上的设置；
2、通过计算line-height = height - border-top-width - border-bottom - padding-top - padding-bottom；
3、改变盒模型；
至此，问题就算解决了。

但是在研究过程中发现一些奇怪的现象以及学习到的东西
1、在chrome下，开启shadow DOM情况下

浏览器渲染情况：


发现填写了placeholder属性的input元素是有两个shadow元素组成的，而没有placeholder属性的input元素只有#inner-editor元素。

#inner-editor元素是不继承父级的高度的，自身高度是靠line-height撑开的。

小编突发奇想，如果不设置line-height会怎样？
经测试发现IE，chrome，FireFox都会自动设置为line-height:normal;

查找相关资料发现，line-height：normal是按照font-size进行计算的，一般按照1.14倍进行计算。

2、

去掉标记2中的box-sizing：border-box；
渲染出来的是这样的：

input获得焦点的时候：

这是因为IE浏览器与谷歌浏览器的渲染不一致导致的；
我们可以对比：
IE：

chrome：

focus态的时候，IE的处理是placeholder文字直接消失，而谷歌却还在；
谷歌是当文字输入的时候才消失；

这是由于两个浏览器内部处理不一致导致的问题。

3、

这一次，把1,2都去掉box-sizing：border-box；

然后把1的box-sizing：border-box；恢复

经过测量发现
placeholder文字的位置没有变动。
这是因为写了line-height以后，文字一直停留在line-height设置的那个地方。
4、

通过框1和框2对比发现，框1文字居中了，但是框2的文字却没有居中
那是因为框1是经过了常态->获得焦点->失去焦点(常态)
这个原因一直很费解。暂时由于知识厚度，经验丰富度等原因还找不出很好的解释去解释这种现象。

—————–我是华丽丽的分割线 结束—————–

正文从这里开始了

—————–我是华丽丽的分割线 开始—————–

从输入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规则，而重绘则只会影响到布局。

—————–我是华丽丽的分割线 结束—————–