前端如何做好网站优化

随着前端技术的迅猛发展，网站前端性能优化的必要性也逐渐凸显出来。下面我们站在前端的角度上谈谈如何做好网站性能的优化。

尽量减少HTTP请求个数

我们可以合并图片（如css sprites，内置图片使用数据）、合并css、js。这一点对网站来说很重要，减少不必要的请求对服务器来说可以减少很大的压力。当然要考虑合并后的文件体积。

为文件头指定Expires或Cache-Control，使内容可以缓存

和减少HTTP请求类似，将一些文件缓存到客户端浏览器中，网页加载过程中直接读取缓存文件。

使用CDN（内容分发网络）

现在大致有这样几种CDN实现：镜像、高速缓存、专线、以及智能路由器和负载均衡。

把CSS放到顶部

实现页面的有序加载，这对于用友较多内容的页面和网速较慢的用户来说极为重要。同时，HTML规范也同样清楚的指出样式表要包含在页面的区域内。

把JS放到底部

HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个，而问题在于脚本阻止了页面的平行下载，即便是主机名不相同。

使用gzip压缩内容

压缩生产环境的代码，减少文件体积，可以减小带宽。

favicon.ico要小而且可缓存

avicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一 个404 Not Found的响应。由于是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在 onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。 因此，为了减少favicon.ico带来的弊端，要做到： 文件尽量地小，最好小于1K 在适当的时候（也就是你不要打算再换favicon.ico的时候，因为更换新文件时不能对它进行重命名）为它设置Expires文件头。你可以很安全地 把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。 Imagemagick可以帮你创建小巧的favicon。

使AJAX可缓存

利用时间戳，更精巧的实现响应可缓存与服务器数据同步更新。

使用GET来完成AJAX请求

当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。在url小于2K时使用GET获取数据时更加有意义。

预加载

关注下无条件加载，有条件加载和有预期的加载。

尽量减少iframe的个数

考虑即使内容为空，加载也需要时间，会阻止页面加载，没有语意，注意iframe相对于其他DOM元素高出1-2个数量级的开销，它会在典型方式下阻塞onload事件，IE和Firefox中主页面样式表会阻塞它的下载。

来源:https://www.toutiao.com/i6483692051626983950/