web前端性能(一)

　浏览器的加载速度和性能

关于性能，我们要先理解整个页面从准备加载新页面，到load事件结束这个过程的细节是什么，怎么完成的，浏览器是怎么加载的，怎么解析的，以及相关的很多细节问题，这些将构成我们性能优化的基础知识。

这篇文章可以算的上我之前写的一篇文章从输入URL到页面加载，发生了什么的姊妹篇了。实际上这2篇文章都是在围绕着浏览器加载性能来说的，我认为前一篇文章，还是没有说明一些问题，比如：浏览器会请求html文件中的外部资源，到底在什么时机发起的网络请求，DOM和CSSOM的生成的时机是同步，还是异步的。

http请求

http请求可以划分为以下几个阶段:

• DNS
• TCP
• Request
• Webserver处理
• Transferring： 传输数据
• parsing：
  
  • 首屏时间 客户端第一屏资源加载完毕
  • domready时间 DOM解析完毕
  • load时间 所有资源加载完毕

我们先引用一张图片来说明整个流程：

关于这张图的解释：

1. 性能api
2. var timinhObj = performance.timing;

查询h5推出的有关性能api的资料。

使用性能API快速分析web前端性能

关于api，没什么好说的，segmentfault的博文说的很清楚。

parsing

关于渲染，有些最基本时间点：
- 首屏时间
- domready时间
- loadEventEnd时间

首屏时间，在客户端加载好第一屏时间，在SPA中，这是用户体验的核心点之一，对应白屏时间。

domready时间，dom树构建完成，js可以操作dom的开始时间。
关于dom，是一个数的数据结构，采用深度遍历来构建。这是很多地方不推荐用table来布局的原因。

loadEventEnd，load事件结束，资源全部加载完毕。

很多SPA，将首屏作为一个组件，加载所有的资源，也是一种手段，提升用户体验。

浏览器加载外部的资源并不需要读取到对应的script，link节点。
html的解析器是主解析器，还有其他的解析器，来加快外部资源发起请求，这也是很多浏览器的优化手段，但是在spa，我们需要所有的记载时机都是可控的，所有出现了很多loader。

推荐一个资源加载器Tiny-loader
忘记是哪个互联网公司的解决方案了。我们可以学习下它的原理。

这时候，如果有个组件，帮助我根据优先级的不同，在特定的时间下载特定的资源，同时需要保证脚本的执行顺序，就能完美的解决这个问题。这个就是 Tiny-Loader 的起源。它与一般资源加载器不同的是，它可以保证资源下载以后的执行顺序，可以按需进行资源加载。

关于性能优化

监控->分析->优化，号称是性能优化的三部曲，为了更容易地找到性能优化的关键点，建立一个统一的精细化的性能监控平台，做到数据驱动型的性能优化。

很多互联网公司做前后端分离后，把前端打造成单独的体系，包含了构建，部署和前端运维，不再和后端项目耦合在一起，美团就是这样做的。

这篇文章的角度是浏览器的加载和性能。所有从这个角度去分析。
请求数量 合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
请求带宽 开启GZip，精简JavaScript，移除重复脚本，图像优化
缓存利用 使用CDN，使用外部JavaScript和CSS，添加Expires头，
减少DNS查找，配置ETag，使AjaX可缓存
页面结构 将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验 避免CSS表达式，避免重定向

这是从资源加载的角度来说的，代码层面的优化是另一个大的方向。我会在后面继续说明。