页面性能优化总结

Posted 2020-10-05

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　页面性能优化总结
         由于本人前几天一直在解决页面性能、加载慢等问题。解决后，对于该方面知识有一定的认识与理解，现将经验码出来，与大家分享；由于单纯讲解知识点会造成知识点认识混乱，故将知识分模块讲解；由于项目中主要使用chrome浏览器，故仅讲解以webkit为内核的浏览器机制
1.浏览器加载时间：
当浏览器对页面进行加载并且解析时，会产生如下几个主要时间：
　　1)、queueing 时间
　　该时间为等候时间，也可以叫排队时间。即文件在加载之前的排队等候时间。该排队等候时间会根据优先级进行判定；而优先级则根据文件类型进行区分。在前端文件中，html，js，css为主要文件，该种类型文件等候时间较短；而其他类型，如jpg，png或者媒体文件，字体文件等则等候时间较长，等待时间长度较长时，将会导致文件加载缓慢，也就是常说的加载时挂起；
　　2)、stalled时间
　　该时间为阻塞时间，即在发起请求时服务器不能同时进行响应而产生的等待时间。该时间与queueing时间不同。queueing时间通常由于优先级不足而产生或者其他原因导致的，而stalled则由于同一个服务器无法同时响应多个请求而造成的。在chrome浏览器中，一个服务器最多会同时允许6个请求发出（一般情况下）;
　　3)、Initial connection 时间
　　该时间通常是由于TCP 三次握手而产生的时间，一般不会对性能产生较大影响；
　　4)、RequireSent 时间
　　该时间为向服务器发起请求时的时间，一般对性能不会产生较大的影响；
　　5)、Waiting 时间
　　该时间为后台响应请求的时间，如果该段时间较长，一般多为服务器或者后端接口返回数据较慢的原因；

　　在以上几个时间中，各个时间都有可能会导致页面加载时间较长，由于本项目中主要使用的是require.js，在网上查了很多关于require.js的文件，其中对于页面加载，网络上的主要描述为：
　　（1）实现js文件的异步加载，避免网页失去响应；
　　（2）管理模块之间的依赖性，便于代码的编写和维护。
　　正如上面所说，我们知道，<script></script> 标签会阻塞页面，加载 a.js时，后面的所有文件都得等它加载完成并执行结束后才能开始加载、执行。而 require.js的模块可以并行下载，没有依赖关系的模块还可以并行执行，大大加快页面访问速度。

　　但是之前产生的问题主要是由于html的引进模式导致的，最初的引进模式为在define()之中通过text！为前缀引进，这种方式通过text.js可以将html以字符串的形式引入到文件中，同时使用jquey.tmplate.js将ajax请求回来的数据进行动态渲染。

2.浏览器缓存机制
　　缓存简介：缓存是在打开网页之后，服务器将网页文件（包括css，html，js等）缓存到一个地方，不同的浏览器会缓存到不同的地方。像我在项目中用的比较多的chrome浏览器，就会缓存在userData这个文件夹中。浏览器缓存根据其不同的原理，共分为一下几种缓存：
1)、http缓存
　　http缓存是基于HTTP协议的浏览器文件级缓存机制。浏览器缓存就是当你打开一个网页，浏览器会自动下载副本到你电脑上，就相当于你另存为网页到某个地方而已，只不过这里是自动而已。当然不是浏览器能把各种 网页都能下载到本地电脑上，它是有特殊情况。一般html，后者request是get请求，而post一般不缓存。（这个后面会说到）当然客户端缓存是否需要是可以在服务端代码上控制的。那就是响应头。响应头告诉缓存器不要保留缓存，缓存器就不会缓存相应内容；如果请求信息是需要认证或者安全加密的，相应内容也不会被缓存；
Expires设置：
　　Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。
Cache-control设置:
　　Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。

1. Public指示响应可被任何缓存区缓存。
2. Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
3. no-cache指示请求或响应消息不能缓存
4. no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
5. max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
6. min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
7. max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息

2)、application cache缓存
　　application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。
离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用ApplicationCache 接口可以解决由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。
使用缓存接口可为您的应用带来以下三个优势：
离线浏览 – 用户可在离线时浏览您的完整网站。
速度 – 缓存资源为本地资源，因此加载速度较快。
服务器负载更少 – 浏览器只会从发生了更改的服务器下载资源。
　　其余还有像websql、indexDB、cacheStorage等也可以进行缓存，但是其适用范围较小，就不做介绍了。
另外，再说一下一个在解决bug遇到的问题，发现js与被text.js解析的html文件的queueing时间很长（也就是发生了文件挂起）,同时在size中发现了from disk caches（来自于磁盘缓存文件）,针对于该点，我又查阅了很多资料。
其中，caches共分为两种，一种为
1)、memoryCaches
　　将资源缓存到内存中，等待下次访问时不需要重新下载资源，而直接从内存中获取。Webkit早已支持memoryCache。
同时，资源文件也分为两类：主要资源和派生资源。主要资源为html页面、下载项等；派生资源包括HTML页面中内嵌的图片或者脚本链接，用于保存原始数据（比如CSS，JS等），以及解码过的图片数据；
2）、diskCaches
　　将资源缓存到磁盘中，等待下次访问时不需要重新下载资源，而直接从磁盘中获取.

　　memoryCaches 与 diskCaches对比：

　　相同点：只能存储一些派生类资源文件。它的存储形式为一个index.dat文件，记录存储数据的url，然后再分别存储该url的response信息和content内容。

　　不同点：当退出进程时，内存中的数据会被清空，而磁盘的数据不会，所以，当下次再进入该进程时，该进程仍可以从diskCache中获得数据，而memoryCache则不行。