前端页面响应速度与性能优化总结

1. 使用nginx的gzip压缩,在nginx中的http标签下面加入该段配置

   gzip on;
   gzip_min_length 1k;
   gzip_buffers 4 16k;
   #gzip_http_version 1.0;
   gzip_comp_level 2;
   gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
   gzip_vary off;
   gzip_disable "MSIE [1-6]\.";
              

   第1行：开启Gzip

   第2行：不压缩临界值，大于1K的才压缩，一般不用改

   第3行：buffer，就是，嗯，算了不解释了，不用改

   第4行：用了反向代理的话，末端通信是HTTP/1.0，有需求的应该也不用看我这科普文了；有这句的话注释了就行了，默认是HTTP/1.1

   第5行：压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧

   第6行：进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式application/javascript 就行了

   第7行：跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"，我不需要这玩意，自己对照情况看着办吧

   第8行：IE6对Gzip不怎么友好，不给它Gzip了

   ————————————————

   版权声明：本文为CSDN博主「大树叶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

   原文链接：https://blog.csdn.net/bigtree_3721/article/details/79849503

2. 使用cdn

   如果应用程序web服务器离用户更近，那么一个HTTP请求的响应时间将缩短。另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。

    CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容。例如，CDN可能选择网络阶跃数最小的服务器，或者具有最短响应时间的服务器。

   CDN还可以进行数据备份、扩展存储能力，进行缓存，同时有助于缓和Web流量峰值压力。

   CDN的缺点：

   1、响应时间可能会受到其他网站流量的影响。CDN服务提供商在其所有客户之间共享Web服务器组。

   2、如果CDN服务质量下降了，那么你的工作质量也将下降

   3、无法直接控制组件服务器

3. 优化图像

   减少使用高分辨率的图片,对固定宽高的图片尽可能不使用过高分辨率的图,纵然高分辨率更清晰,但是代价也比较大.对图片进行无损压缩的网址https://tinypng.com/

4. css文件放顶部,js文件放底部

   把CSS文件在页面底部引入可以禁止逐步渲染，节省浏览器加载和重绘页面元素的资源。JavaScript是用于功能和验证。把JS文件放在页面底部可以避免代码执行前的等待时间，从而提升页面加载速度。这些都是一些减少页面加载时间和提高转换率的方法。在某些情况下，需要JavaScript在页面的顶部加载（如某些第三方跟踪脚本）。

5. 压缩css文件和js文件

   压缩是通过移除不必要的字符（如TAB、空格、回车、代码注释等），以帮助减少其大小和网页的后续加载时间的过程。这是非常重要的，但是，你还需要保存JS和CSS的原文件，以便更新和修改代码。

6. 使用精灵图
7. 尽可能减少重定向