【整理】前端页面访问速度优化

前言：前端网页编写完成部署后，生产环境上的网页访问速度让人不太满意，有时候基本会延迟好几秒加载页面，查询了相关资料，整理出本篇文章。

一、网页性能分析

首先需要对目标网页进行性能分析，找到相应的待优化项
网页端谷歌性能分析工具
谷歌浏览器插件：PageSpeed Insights、Lighthouse。

二、Nginx传输时压缩文本

使用Nginx反向代理时，可以使用gzip压缩传输文件到浏览器，可以大大提高性能

修改Nginx的配置文件：

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

相关文章：https://www.cnblogs.com/mitang/p/4477220.html

三、消除渲染阻塞资源

脚本（Script）加载
加载页面时，是按照HTML的代码顺序加载的，当头部中引用了脚本或者样式表时，会优先加载这些资源然后再渲染页面，导致页面展示速度降低，将脚本改为异步或者改为页面渲染完成后再加载，可以加快页面渲染速度。

<script type="text/javascript" src="demo.js" async>script>
<script type="text/javascript" src="test.js" async>script>


<script type="text/javascript" src="demo1.js" defer>script>
<script type="text/javascript" src="demo2.js" defer>script>

1. async
   设置async使script脚本异步加载并在允许的情况下执行，多脚本先加载完先执行，因此有依赖关系时使用该标签可能出错。

2. defer
   若script标签设置了该属性，则浏览器会异步的下载该文件且不会影响到后续DOM的渲染；
   若有多个设置了defer的script标签存在，则会按照顺序执行所有的script；
   defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

相关文章：https://www.cnblogs.com/jiasm/p/7683930.html

样式表（CSS）加载
样式表可以分为重要部分和不重要部分，重要部分可以在头部使用