大型网站结构复杂，用户从浏览器发出请求只到数据库完成操作事务，中间需要经历过很多的环节。这些环节都会耗费一定的时间，web前端性能优化要做的就是让各个环节尽可能的用最少的时间达到我们的需求。
一. 浏览器访问优化
1. 减少http请求
http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路，进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理，这些通信和服务的开销是很昂贵，减少http请求的数目可有效提高访问性能。
减少http请求的主要手段有： 合并css，合并JavaScript，合并图片
2. 使用浏览器缓存
对于一个网站来说，css，logo，图标这些静态资源文件更新的频率一般比较低，而这些文件几乎是每次http请求都需要的，如果这些文件缓存在浏览器中，可以极好的改善性能。通过设置http请求头中的cache-control和expires的属性，可以设定浏览器缓存。
在某些时候，缓存中的静态资源要更新，这种情况下，可以通过改变文件名实现，或者在文件的src中加参数实现。
浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存(cache-control和expires信息)若命中直接从缓存中获取资源信息，包括缓存header信息；本次请求根本就不会与服务器进行通信。
如果没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的header字段信息(Lase-Modified/If-Modified-Since和Etag/If-Node-Match)，由服务器根据请求中的相关header信息来比对结果是否协商缓存命中；
若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取，否则返回最新的资源内容。
3. 启用压缩
在服务器端对文件进行压缩，在浏览器端对文件解压缩，可以有效减少通信传输的数据量。
4. css放在页面的最上面，javascript放在页面的最下面
浏览器会在下载完全部的css之后进行整个页面渲染，因此最好的做法是将css放在页面最上面，让浏览器尽快下载css。JavaScript则相反，浏览器加载JavaScript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢。
5. 减少cookie传输
cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此要尽量减少cookie传输的数据量。另一方面，对于部分的静态资源的请求是不需要cookie的，例如css，script，logo等。
6. 减少DOM数量，减少重排重绘
7. 预加载和懒加载
8. 骨架屏
9. 避免重排重绘
不管是重排还是重绘，都会堵塞浏览器。要提高网页性能，就要降低重排和重绘的频率和成本，尽可能少的触发重新渲染。
重排是CPU处理，重绘是GPU处理，CPU的处理效率远不及GPU,并且重排一定会引发重绘，而重绘不一定会引发重排
css复用class去批量操作元素样式
图片在渲染前指定大小:因为img元素是内联元素，所以在加载图片后会改变宽高，严重的情况会导致整个页面重排，所以最后在渲染前就指定其大小，或者让其脱离文档流
*注*
重排(reflow)：渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口的尺寸发生变化，删除或添加DOM元素，修改了影响元素盒子大小的css属性(width,height,padding)
重绘(repain):所以对元素的视觉表现属性的修改，都会引发重绘
二. 使用CDN加速
CDN（content distribute network）：内容分发网络
CDN的本质是缓存，而且是将数据缓存在离用户最近的地方，使用户以最快的速度获取数据。
由于CDN部署在网络运营商的机房，这些运营商又是终端用户的网络服务提供商，因此用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。
CDN能够缓存的一般是静态资源，如图片，文件，css，JavaScript脚本，静态网页等，但是这些文件访问频率很高，将其缓存在CDN可极大改善网页的打开速度。
三. 使用反向代理
反向代理服务器位于网站机房一侧，代理网站web服务器接受http请求。和传统代理服务器可以保护浏览器安全一样，反向代理服务器也具有保护网站安全的作用，来自互联网的访问请求必须经过代理服务器，相当于在web服务器和可能的网络攻击之间建立了一个屏障。
代理服务器可以通过配置缓存功能加速web请求，当用户第一次访问静态内容的时候，静态内容就被缓存在反向代理服务器上，这样当其他用户访问该静态内容的时候，就可以直接从反向代理服务器返回，加速web请求响应速度，减轻web服务器负载压力。
四. 静态资源优化
- 使用构建工具对css，html，JavaScript进行压缩，在线上环境中删除注释和无用代码
- 提取公共资源，减少代码体积
- 外链css和js文件，外链的文件可以放到CDN，服务器和浏览器会进行缓存
- 使用雪碧图，减少http请求次数
- 使用字体图标iconfont
五. 网络请求优化
- 使用get方法进行请求，get会缓存请求，比起post。只发送一个tcp包，效率更好
- 合并请求数量，减少http请求次数，节省网络请求时间
一个页面需要多个并行或串行的接口的时候，在网络不好的情况下，最好的办法就是通过接口合并的方式提高接口访问速度。
