前端如何做好网站性能优化.docxVIP

前端如何做好网站功能优化 2021-11-09 随着前端技术的迅猛进展，网站前端功能优化的必要性也渐渐凸显出来。下面我们站在前端的角度上谈谈如何做好网站功能的优化。 尽量削减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中主页面样式表会堵塞它的下载。 学问共享到这里就结束了，学习web前端的伴侣可以来我的群：675498134，群里每天都有对应材料学习，不定期共享干货，包括我本人整理的最新的前端材料和教程送给大家，欢迎初学和进阶中的小伙伴。