前端性能优化（一）浏览器工作原理

　　作为一个前端，经常会有老板或测试给我们提出某个地方加载太慢了，需要优化一下。我们自己的网站也一样，加载时间过长，自己都不耐烦，对于网页优化是很常见的，今天我们先介绍下网页加载原理。一、浏览器简介
　　想要了解浏览器的工作原理，我们必须清楚浏览器的组成有哪些？以及各个部分功能。
　　浏览器组成部分如图所示：
　　各部分的功能及意义：用户界面：浏览器的界面，有标签页、地址栏、前进、后退、刷新、收藏等。除了请求到的内容页面。浏览器引擎：用来查询和操作渲染引擎的接口。渲染引擎：也叫做浏览器内核，用来解析html、css并将结果以网页的形式显示，不同浏览器内核不同，同理渲染引擎也不同。网络：用来网络调用，如前后端数据交互中的http请求。js解释器：用来解释执行js代码。UI后端：绘制基础原件，如组合框与窗口，提供平台无关的接口，内部使用操作系统的相应实现。数据存储：属于持久层。浏览器需要把所有数据存到硬盘上，如cookie、图片、css等。二、浏览器工作流程
　　我们在浏览器用户界面的地址栏中，输入我们需要访问网站地址url后回车。
　　浏览器工作流程：构建请求：浏览器开启网络请求线程，向服务器发送完整的http请求。查找缓存：真正发起网络请求之前，浏览器会先在数据存储中查询是否有需要请求的文件。如果没有任何缓存，说明第一次请求，则进入网络请求过程。当浏览器有缓存的时候，会拦截请求，返回缓存，拦截请求。缓存优点：缓解服务器压力，提升性能，实现快速加载资源。准备IP地址和端口：通过URL地址获取ip地址和端口信息，通过DNS解析返回域名对应的ip和port，浏览器也提供了dns数据缓存，通常url没有指明端口号，则默认80。等待TCP队列：chrome有个机制，同一域名下同时最多只能建立6个TCP连接，如果同时有10个请求发生，其中4个就会进入等待队列，直至进行中的请求完成，如果小于6个，则直接进入TCP连接。建立TCP连接：浏览器与服务器之间通过TCP建立连接。TCP协议提供可靠的连接服务，采用三次握手建立一个连接。发送http请求：连接建立成功之后，浏览器就可以与服务器之间通讯了。浏览器会向服务器发送请求信息，包括请求方法、请求URL、http版本协议。服务器处理请求：服务端收到请求信息以后，会根据浏览器的请求信息返回结果，返回结果中包含三部分：响应行、响应头、响应体。响应行内包含状态码，告诉浏览器处理结果，http状态码有很多。响应头包含服务器自身的一些信息，响应体就包含了网页的html实际内容。服务器响应和断开连接：通常服务器向浏览器返回请求数据之后，就会关闭连接，经过四次分手之后，就断开连接了。
　　浏览器中http请求阶段如图：
　　http请求和响应处理，是前端与后端数据交互的时候经常使用的部分。
　　三、浏览器渲染过程
　　渲染引擎通过网络获得请求文档内容（以8k分块的方式完成），然后开始：解析html为DOM树渲染树结构布局渲染绘制渲染树。
　　具体解析过程为：
　　开始解析html内容，将标签转化为DOM节点，然后解析它外部的css文件以及style中的样式信息。css样式信息和html标签来构建渲染树。渲染树是由一些包含颜色大小等盒子组成的，按照从上到下，从左到右的方式显示，渲染树构建好之后，执行布局过程，将每个节点确定在屏幕上的确切坐标，最后使用UI后端层绘制每个节点。
　　举例说明下浏览去解析html、css、js的过程：浏览去地址栏输入地址后回车，假设第一次访问，浏览去向服务器发送请求，返回html文件。浏览去载入html代码，解析head中的link引入的外部css文件。浏览器发出css文件请求，服务器会返回css文件。浏览器继续载入body部分代码，css文件接收到之后，就可以渲染页面。遇到img标签引入图片，会立马向服务器发送请求，此时不等待返回的图片，而是继续向下渲染。浏览器接收到返回图片文件，由于图片占用一定面积，影响后边排版，所以浏览去需要回过头重新渲染这部分代码。浏览器发现script标签，内部包含的js代码，就会立即执行。js脚本执行js语句，如果js语句操作的是DOM元素，浏览器就需要重新渲染这部分代码。等到html到来，页面第一次渲染就完成了。如果用户点击换肤按钮，js让浏览器换一个css文件，此时浏览去又会向服务器发送请求。等浏览器返回新的css文件之后，重新渲染页面。
　　需要注意：js不能并行下载和解析（阻塞下载）。当引用了JS的时候，浏览器发送1个jsrequest就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用document。write或appendChild，甚至是直接使用的location。href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现。JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
　　先了解网页的请求，加载，解析过程，然后再考虑到底该如何优化网页性能呢？