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

1.什么是Web前端

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

1.1 传统的GUI软件

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

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

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

预解析的实现：

1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:
2. 在页面header中使用link标签来强制对DNS预解析:
   注：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直接输出到浏览器，而不是在浏览器中渲染。