web前端性能优化经验

web前端性能优化经验，概括来说，主要从以下三个方面来进行优化：浏览器优化、CDN优化、反向代理优化。

首先我们来说说浏览器方面的优化

一，优化前端页面布局：从浏览器加载速度和顺序来看CSS和JavaScript的布局

1，浏览器一般是在加载完所有的CSS样式以后，对整个页面进行渲染，所以把引入的外部CSS样式文件放在页面的顶部，是一个正确的做法；

2，JavaScript的执行分2种情况：在页面加载时就执行的js 和 页面加载完成以后再执行的js

在页面加载时就执行的js，建议放在页面的顶部或者中部，例如页面加载时，就调用异步js方法从后台查数据；

页面加载完成以后再执行的js，建议放在页面的底部。因为这些js方法只是在用户点击或者操作时才触发，放在页面底部，不会影响页面的加载；

注意：js方法执行时，页面会处于阻塞状态。

二，减少HTTP请求次数

我们都知道，HTTP协议是无状态的应用层协议，也就是说我们每次发送HTTP请求，都需要重新建立通信链路，重新获取所需要的数据，服务器需要启动线程来处理这个请求。也就是说代码都要重新执行一遍。无论是通信开销和服务器开销，都是很昂贵的。所以说减少HTTP请求次数可以有效提高访问性能。

1，从业务上来说，我们可以把相关联的页面请求的数据一次都查询出来，这样跳转时就可以不发送请求，而只是把刚才查询出来的数据显示出来，这样做，既能提高访问速度，也可以提高系统的性能。

2，合并静态资源，例如我们可以把所有当前页面引用的CSS样式都放到一个文件中，这样就可以减少HTTP请求次数。虽然把CSS样式分成几个文件来存放，条例更清晰，结构更好，但是会增加服务器的负担。

3，减少location.reload方法的使用，而使用location.href。因为使用location.reload，页面会刷新，所有的页面资源会重新请求。而使用location.href='当前页的URL'，浏览器会读取本地缓存文件。

接着我们来说一下CDN优化

CDN，全称Content Distribute Network，即内容分发网络。CDN的本质也是缓存，服务器缓存。把数据缓存在离用户最近的一个站点，使用户以最快的速度获取数据。由于CDN部署在网络运营商的机房（比如中国联通），而这些运营商又是终端用户的网络服务提供商（比如我们使用联通的网络，那么我们就需要使用联通给我们提供的网络服务）。用户请求首先到达网络运营商这里，当CDN中存在浏览器请求的资源时，这些资源会直接返回给终端用户，这样既缩短了网络传输的距离，又减少了服务器的压力。

CDN一般能够缓存一些静态资源，比如图片、JS、CSS、静态页面等

最后我们说一下反向代理

传统代理服务器：在浏览器一侧，代替浏览器发送HTTP请求；

反向代理服务器：在网站服务器一侧，代替网站服务器接收HTTP请求；

反向代理服务器可以通过配置缓存功能加速web请求，当用户第一次访问静态内容的时候，静态内容就被缓存在反向代理服务器上，这时候，如果有其他用户访问这个资源，反向代理服务器可以直接返回内容给用户。这样也可以达到加速响应速度和减轻web服务器压力的效果。

未完待续...