前端性能优化---1.了解前端性能优化点

1.什么是Web前端

web前端本质上是一种G U I软件，本可以直接借鉴其他G U I系统架构设计方法，但是web前端有点特别。

1.1 传统的GUI软件

CS架构GUI软件的开发与部署过程：

1.开发
2.将开发好的代码打包到APK软件包，放到应用商场中
3.用户下载应用(即下载了这个安装包)，解压，将代码解压到自己的手机上，也就是说，用户的手机上有一个套应用程序的代码，然后再在用户的手机上运行。也就是说用户其实访问的是自己上机上的代码

1.2 web前端的开发与部署过程

前端采用的是BS架构

1.开发
2.将开发的代码发布到远程的服务器（webserver以及CDN）
3. 运行时用户在浏览器中输入网址，去服务器请求我们的资源，这时就会动态的增量式的去加载我们的资源
（因为是去服务端请求我们的资源，所以如果能更快更好的在浏览器中加载我们的资源，那么用户体验自然也就更好）

2.浏览器的一个请求从发送到返回都经历了什么？

• 用户在浏览器中输入URL
• 浏览器对输入的RUL进行解析，将域名发送到DNS服务器中，DNS服务器对该域名查询其所对用的IP地址，并返回给我们的浏览器
• 然后根据ip地址和端口号去查找服务器
• 服务端是有mvc架构的
  4.1首先进入controller,进行逻辑处理和分发，然后调用Model层
  4.2 进入Model层，该层是负责与数据进行交互的，它会去数据库中读取数据
  4.3 将渲染好的页面听过view层返回给我们的网络
• 浏览器根据返回的html，css，js进行渲染（这就是浏览器的render），生成DOM树和css树，然后进行整合，然后解析js

3. 请求过程中一些潜在的性能优化点

• dns是否可以通过缓存减少dns查询时间？
• 网络请求的过程走最近的网络环境？
• 相同的静态资源是否可以缓存？
• 能否减少请求http请求大小？
• 减少http请求
• 服务端渲染

3.1DNS解析优化

1、DNS缓存

DNS查询过程大约消耗20毫秒，在DNS查询过程中，浏览器什么都不会做，保持空白。如果DNS查询很多，网页性能会受到很大影响，因此需要用到DNS缓存。
不同浏览器的缓存机制不同： IE对DNS记录默认的缓存时间为30分钟，Firefox对DNS记录默认的缓存时间为1分钟，Chrome对DNS记录默认的缓存时间为1分钟。

缓存时间长：减少DNS的重复查找，节省时间。
缓存时间短：及时检测服务器的IP变化，保证访问的正确性。

2、减少DNS查询次数

DNS查询也消耗响应时间，若网页内容来自各个不同的domain，则客户端首次解析这些domain需要消耗一定的时间，但由于DNS查询结果会缓存在本地系统和浏览器中一段时间，所以DNS查询一般只是对首次访问时的速度有影响。

减少DNS查询次数需要减少来自不同domain的请求的数量，如尽量将外部域的对象下载到本地服务器上等。

3. DNS预解析提升页面速度

遇到请求延时非常严重的情况，DNS解析速度很可能是造成资源延时的最大原因。
页面header中添加了以下代码（用以DNS预解析）：

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclick.baidu.com" />
<link rel="dns-prefetch" href="http://hm.baidu.com" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />

了解：dns-prefetch:

大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析耗费20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。

浏览器对网站第一次的域名DNS解析查找流程依次为：

浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索

Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性，由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置，所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。

预解析的实现：

1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />
2. 在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
   注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

3.2 网络请求的过程

网络请求的过程其实就解决了网络选择和缓存的问题，在网络请求的过程中很多公司都会使用到CDN，使用CDN就解决了网络选择和缓存的问题，访问CDN是访问静态资源用的，访问静态资源我们所携带的cookie是没有用的，所以我们请求CDN是希望能够将http.header中将cookie去掉的，但是很多的时候CDN的域名和我们主站的域名是一样的，这就使得我们也携带了cookie，所以尽量不要将CDN的域名和主站的域名一样

3.3 对于请求接口

对于请求接口我们是没有办法使用CDN的，但是我们可以使用浏览器缓存，将接口返回的数据缓存到浏览器

3.4 带宽和http请求大小

一个http请求如果可以小一些，那么请求的时候就会快一些

3.5减少http请求

每一个http请求都是对网路的损耗，所以如果可以减少http请求，那么就可以减少网络损耗

3.6服务器渲染

对于现在的大型框架，都不是在服务器直接出html，而是在浏览器端走框架的代码才能渲染我们的页面，因此首屏渲染就会题慢，现在有很多的相关框架在服务端渲染的方案，将代码在服务端渲染，将html直接输出到浏览器，而不是在浏览器中渲染。

深入理解http请求的过程是前端性能优化的核心