前端性能优化的众多方案
前端的性能优化你知道多少
前端性能优化的众多方案
上来就是一个干货，如何不要缓存的设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--设置过期时间设置0为直接过期并清除缓存--> <meta http-equiv="Expires" content="0"> <!--设置不缓存页面--> <meta http-equiv="Pragma" content="no-cache"> <!--设置不修改消息存储--> <meta http-equiv="Cache-control" content="no-cache"> <!--同上--> <meta http-equiv="Cache" content="no-cache"> <title>test</title> </head> <body> <div id="test"> </div> </body> <script type="text/javascript"> //js后缀加个时间戳每回更新都会改变，浏览器视其为新的js不会进行缓存 document.write('<script type="text/javascript" src="js/test.js?time='+new Date().getTime()+'"><'+'/'+'script>'); //css也同上 document.write('<link rel="stylesheet" href="css/test.css?time=' + new Date().getTime() + '"/>'); </script> </html>
- 如何利用浏览器缓存优化项目？
缓存分为很多种类：服务端缓存，客户端缓存，存储缓存（服务端存储和客户端存储）当然大体类别就是这么多，本章只是描述客户端缓存。同时如果大家想要谅解如何量化缓存后带来的快速加载的体验数值，请搜索博客"fmp"即可
缓存分类基本可以分为如下几类：
强缓存
Expire
<meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />
以上要求客户端与服务端timer要同步，所以才有以下Cache-Control产生 Cache-Control
<meta http-equiv="Cache-Control" content="max-age=7200" />
协商缓存
Last-Modified
当浏览器第一次向服务器请求资源并正确返回响应的时候，服务器返回的响应： 状态码：200 首部：Last-Modified 这个资源在服务器端最后一次被修改的时间。 实体内容：响应 当浏览器第二次再次访问这个静态资源的时候，请求报文会在首部添加字段 If-Modified-Since:值和Last-Modified（第一次接收到的响应的）值是一样的，来询问服务器在这个时间之后是更新过这个资源。如果没有更新过就会返回响应：304 Not_Modified
Etag
这个字段是 请求变量的实体值 当用户第一次访问的时候，服务器会返回 状态码：200 首部字段：Etag:dadmsdadks23 实体：相应的内容 当用户第二次请求该静态资源的时候会发送 首部字段：if-None-Math:w/dadmsdadks23 如果这个静态资源的实体值仍然为dadmsdadks23 就会返回304
- 浏览器缓存存在了哪里？
当然在硬盘上了，临时文件和缓存文件都会存储到对应的硬盘目录下，不过像sessionStorage类似临时缓存都是存储到当前的浏览器沙箱进程中（一个Tab一个沙箱盒）
- 可以自定义这些缓存文件吗？
可以更改，sessionStorage和localStorage还有新版本的本地数据库Web SQL Database，当然你若果想改一些大文件类的浏览器缓存，找到对应的缓存目录按照官方格式要求进行修改即可。
缓存还有什么其他重点的关注的地方吗？
时效性
设置时效便于更新
存储位置
了解缓存存储位置便于进行开发调试
安全性
注意缓存内容进行加密和一些密码类的字段不要存储
缓存类别
缓存根据各自的特点进行适量存储，也需要设置最大的缓存数量，超过数量要进行算法清除
缓存一些资源大、流浪高、影响用户体验但不影响用户安全的内容
前端·博客