开发应用时，页面从加载到展现给用户的的这段时间很重要，如果时间过长，用户会失去耐心。那么，这段时间到底和什么相关呢。
首先介绍下浏览器输入url到页面加载这个过程。简单来说就是向域名服务器发出请求，接收到ip，根绝ip向指定服务器请求资源，服务器处理后返回，最后浏览器加载资源。
上面的说的很简单，下面稍微详细的讲解下这个过程，大概可以分这么多步骤：
1、在浏览器输入url。
2、浏览器根据url向域名服务器发送请求，解析域名。(可缓存)
3、域名服务器返回ip（也可能是未注册域名，我们只关注已注册的）。
4、浏览器向指定服务器发送请求。
5、建立tcp连接(握手什么的就不详述了)。
6、服务处理相关资源。
7、返回资源（html）。
8、浏览器解析页面。（解析过程不详述）
9、请求js，css。（与请求html类似，知识资源不同）
10、解析渲染页面。
11、展现页面。
上面基本就是浏览器输入url到解析的整个过程。从耗时来说，所有的处理可以抽象为下面两个过程：
- 数据传输
- 数据解析
这个很重要，这是本分分析优化的基础。（服务端如何加快处理，快速响应请求不在本文的讨论中）下面就从这两个方面来分析如何优化。
1、数据传输
即浏览器向发送请求，获取数据。我们整理一下，浏览器大概需要进行哪些数据请求。
1、域名解析。
2、html、js、css图片等静态资源。
3、数据请求。
浏览器每次请求，都会先建立连接，服务器处理后返回资源，资源经过网络传输到达浏览器。这个过程中，耗时的有：建立tcp连接、数据网络传输、后台数据处理。
建立tcp连接需要耗时，如果减少请求，即减少了建立tcp连接的耗时；如果连接可以复用，也可以减少耗时。那么前端优化两点建议也就有了：
数据传输优化第一点：减少http请求
a、DNS缓存，及解析域名前先查询本地DNS缓存，如果有，不必再向域名服务器请求。
b、合并一些js，css等等。
c、梳理ajax请求，合理合并请求。第一时间无需展现的可以懒加载。
数据传输优化第二点：使用http2协议
http2具有多路复用和连接管线化等特点，连接管线化就是多个请求使用一个tcp连接，顺序请求，减少了建立连接时间。
就数据网络传输耗时来说，可从三个方向减少传输耗时。
1、数据量减少，可减少传输时间。
2、服务器离用户近一点（网络上近一点）。
3、使用多个连接并行传输数据。（http2多路复用了解一下 ^.^）
数据传输优化第三点：缓存
缓存包括静态资源缓存和数据缓存。通过设置请求相应头（cache-control，keep-alive，etag等等），可缓存html,js,css,图片的静态资源。通过使用localStorage，sessionStorage，cookie可缓存一些数据。
数据传输优化第四点：启用压缩
压缩可以减少文件体积，减少传输时间。
a、启用gzip等压缩。
b、图片（页面使用的jpg，png等等）进行编码压缩，减少体积。
c、头部压缩。（http2新特性）
服务器离用户近一些，是指网络距离上近一些，就像声音传播，速度一定，距离近的肯定先听到。
数据传输优化第五点：CDN加速
不详细讲解cdn，有兴趣可以了解一下。
数据并行传输可加快相应，多路复用，也是http2的新特性之一。
加快后端相应速度，这个就不接介绍了。至此，数据传输部门的优化建议就讲解完了，下面讲解下数据解析方面的优化建议。
2、数据解析
数据解析，即浏览器拿到html，css，js解析执行，渲染，布局的速度。这个算是代码层面的优化，也是和开发人员最接近的。可从以下几个方面进行优化：
1、去除无效js代码，css样式，开发过程中，功能不停修修改改，会产生很多无效代码，这会增大js体积。
2、css样式选择器的使用建议。使用id选择器是渲染速度最快的，使用路径很深的后代选择器会是渲染速度变慢。所以在编写css样式时，合理使用选择器。
3、js连接放在底部。js会阻塞html解析，将js放在底部可以加快生成dom tree。
4、减少页面重排和重绘。
5、js代码中减少计算和业务处理代码。JavaScript本身不是计算密集型的代码，所以在前端代码中建少不必要的业务处理代码。合理分配前后端工作职责
6、减少cookie传输。
7、懒加载和按需加载，梳理业务功能，是否是首屏需要的，不需要的可以异步加载或懒加载。
8、避免定义过多全局变量。
9、事件代理。
对数据传输和数据解析优化建议进行总结，建议如下：
- 缓存（静态资源缓存，DNS缓存，数据缓存）
- 启用压缩
- 减少http请求
- cdn加速
- 使用http2
- 图片编码压缩
- 按需加载和懒加载
- js连接放底部
- css选择器优化使用
- 去除无用代码
- 前端减少不必要的业务处理和计算
- 代码优化。（例如事件代理，避免定义过多全局变量）