介绍
做web开发，我个人觉得必须要弄清楚浏览器的渲染过程，否则我们很难进行前端优化。
我今天就简单说一下页面加载和前端优化。
页面加载
我按照最简单的方式进行描述，实际上更复杂，不管是在浏览器端还是服务端，比如dns解析，代理服务器，负载均衡器等等。
1、用户访问网页，发送一个http请求到网络服务器。
2、网络服务器（应用服务器）解析请求，发送请求给数据库服务器。
3、数据服务器返回数据给网络服务器，网络服务器解析数据，并生成html文件内容放入http response中，返回给浏览器。
4、浏览器解析http response。
5、浏览器创建DOM树。
6、浏览器下载css，并应用在DOM树上，进行渲染。
7、浏览器下载js，并解析执行js。
缺陷
以上整个流程中，如果其中任何一个流程出现问题，都不能顺利的渲染页面。
服务端：
网络服务器：无法获取到资源文件（404），或者由于并发的原因暂时无法处理你的请求（最常见的500错误），你的浏览器会长时间处于空白状态，直到服务器返回状态，或者进行超时处理。
数据层：如果服务器停止，或忙于处理大数据等等，长时间无法返回数据给网络服务器，那么网络服务器一直处于等待状态中，如果请求量达到最大值，那么后面的请求都被堵塞，从而无法及时返回内容给浏览器。
客户端：
JavaScript：如果你的js写在body中的div里，而且这个js执行非常复杂的逻辑，那么整个页面处于等待状态中。
不论js代码是内联还是包含在一个不相干的外部文件中，页面下载和解析过程肯定会停下，等待脚本执行完成这些处理，然后才能继续进行。——大多数浏览器使用单进程处理JavaScript的多个任务，同一时间只能有一个任务执行。
CSS：可以同时下载多个CSS文件。
如果我们把CSS样式放在页面底部，虽然使页面内容能更快的加载（因为将加载css 文件的时间放在最后，从而使页面内容先显示出来），但这样的内容是没有样式的，在CSS文件加载进来后，浏览器再对DOM使用样式，会出现我们常说的“无样式之闪烁”。
更讨厌的是，上下都放置CSS样式，浏览器会首先按照上面的进行渲染，等到下面的样式上来，再按照下面的样式进行回流和重绘，用户感觉很差。
注意两个词“repaint"和"reflow"。repaint(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生。——如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。reflow（回流）：浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程就叫回流。
总结：以上两种严重影响用户体验，会无意识的流失用户。