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

使用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
使用cdn

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

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

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

CDN的缺点：

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

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

3、无法直接控制组件服务器
优化图像
减少使用高分辨率的图片,对固定宽高的图片尽可能不使用过高分辨率的图,纵然高分辨率更清晰,但是代价也比较大.对图片进行无损压缩的网址https://tinypng.com/
css文件放顶部,js文件放底部
把CSS文件在页面底部引入可以禁止逐步渲染，节省浏览器加载和重绘页面元素的资源。JavaScript是用于功能和验证。把JS文件放在页面底部可以避免代码执行前的等待时间，从而提升页面加载速度。这些都是一些减少页面加载时间和提高转换率的方法。在某些情况下，需要JavaScript在页面的顶部加载（如某些第三方跟踪脚本）。
压缩css文件和js文件

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

前端页面响应速度与性能优化总结相关推荐

前端如何进行网站性能优化
大家好,我是IT修真院学员,一枚正直纯洁善良的WEB程序员,今天给大家分享一下,修真院官网JS任务4,深度思考中的知识点-前端如何进行网站性能优化. 一.背景介绍性能优化的目的 1.从用户角度而言, ...
前端页面图片加载优化
前端页面图片加载优化问题:前端页面如果图片资源过多或者过大就会导致用户加载图片时间过长,导致用户体验下降我总结的优化思路与方法有以下几种一.将图标换成icon字体管理如果项目存在大量的图表用的 ...
都说百度前端牛，来看看百度前端工程化之H5性能优化
导读:从粗糙到精致,从简单到复杂,全球互联网Web App(网页应用)平均体积已增压到1.6Mb,随着音视频等富媒体内容的流量池膨胀,终端设备上的用户对网页装载速度尤其敏感.页面不能做到秒开,就会有大 ...
web前端网页加载性能优化大全
web前端性能优化 - - 如何提高网页加载速度文章目录 web前端性能优化 --- --- 如何提高网页加载速度 1. 减少DNS查找 2. 使用CDN托管资源 3. 减少Http请求浏览器 ...
前端开发：Web性能优化有哪些方法？
Web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了Web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和Web易用性等情况,所以前端性能与用户体验是有着极大的关联的. ...
前端框架/架构，性能优化，负载均衡，首屏渲染
前端数据结构与算法- https://zhuanlan.zhihu.com/p/27659059 > 前端重构方案前端重构方案了解一下- https://blog.csdn.net/vM199 ...
mysql数据库前端缓存_MySQL数据库性能优化--缓存参数优化
在平时被问及最多的问题就是关于 MySQL 数据库性能优化方面的问题,所以最近打算写一个MySQL数据库性能优化方面的系列文章,希望对初中级 MySQL DBA 以及其他对 MySQL 性能优化感兴趣 ...
前端Vue项目打包性能优化方案
文章目录一.前言二.优化方案 1丶路由懒加载(代码分割) 2丶第三方插件按需加载 3丶常用插件库使用CDN加速 4.gzip压缩 5.打包不生成map文件三.工具推荐可视化分析包大小总结一 ...
前端页面使用ace插件优化脚本
html页面:<pre id="editor" style="width: 100%;height: 800px;"></pre>(注: ...

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

前端页面响应速度与性能优化总结相关推荐

最新文章

热门文章