背景 页面加载提速是战场，首当其冲要优化的就是 静态资源（js|css） 的加载速度。我们小组去年基于Vue开发了一个积分商城单页面应用。...本文旨在与大家分享在单页应用中使用纯前端手段加速静态资源的获取，从而达到页面加速。...量化静态资源，分析问题所在 先让我们看看资源列表： [9a44b01bc0094352cb5abf0ecc3e7810.png] 那么对于前端静态资源的度量，就有了一个量化： 总资源大小 必要资源加载...缓存方式制定 现在我们商城已经去掉了swiper.js，但当时由于时间紧急，我们使用折中的方式： 由前端自行主动发起网络请求获取所需的静态资源，并存储在前端持久化介质中，自行管理维护静态资源版本，形成一套可被其他前端项目复用的.../vendor.js 和 _gzh_cache_webuy.qq.com/static/js/vendor.js_factor，前者是存储静态资源的内容，后者是存放资源的时间和版本信息： { "version
Nginx静态资源 Nginx可以处理静态资源 非Web服务器可以运行处理而生成的文件，即服务器只需要从硬盘或者缓存中读取然后直接给客户端响应即可。...常见的静态资源 # 浏览器渲染: html文件，样式表CSS,JS脚本——浏览器需要读取样式格式和脚本，然后去渲染的. # 图片文件： GIF、PNG、JPEG # 视频文件： MP4、FLV...、AVI、MPEG # 其它文件： ISO、PDF、TXT、EXE Nginx作为网站服务器，如何高效的处理静态资源，就需要让nginx速度变快，可以从以下几个方面考虑: 1.文件读取:nginx...nginx和后端服务器通讯,本地需要消耗cpu,内存,没有交互能省很多资源.proxy若无缓存就是miss,若有缓存就是hit命中....缓存类型 数据库缓存: memcache,redis proxy网页缓存: client访问静态资源，代理有缓存就无需向后端web请求资源.
因为项目部署在tomcat下，所以使用了default servlet 来处理静态的资源，想必不通过spring mvc 可以加快一些速度，但是后来考虑到静态资源缓存和gzip压缩的考虑，哪种方法好暂且不说...，后面列出使用SpringMVC处理静态资源、缓存、GZIP的配置方式。...： 首先web.xml中的spring mvc 的url-pattern就不能是*.do，而应该是一个/，当你将spirng 的servlet地址配置为一个/的时候就要考虑处理好静态的资源文件，下面两个配置是用来处理静态资源的...后面的location最后一定要有一个/结束，否则静态资源是访问不到的，order参数是Spring配置的优先级，数字越小越优先。...像是比较大的JS文件就应该使用GZIP压缩后的文件返回，可以大大的减小下载的时间。
其实很多时候并不是代码 BUG 导致，而是浏览器缓存的问题。所以都有哪些方式来禁用浏览器缓存呢？ 熟悉 Chorme 的童鞋，可能知道 F12 ->Network->Disable cache ?...我们可以加一个 meta 标签，来声明缓存规则 或者，我们在可以给请求的资源文件加一个版本号（随机数更好） <link rel="stylesheet" type="text/css" href="app.css?
一、请求时想要禁用缓存, 可以设置请求头: Cache-Control: no-cache, no-store, must-revalidate 二、另一种常用做法: 给请求的资源增加一个版本号, 如下...version=1.8.9"/> 这样做的好处就是你可以自由控制什么时候加载最新的资源....三、HTML也可以禁用缓存, 即在页面的HEAD中加入meta标签；虽能禁用缓存, 但只有部分浏览器支持, 而且由于代理不解析HTML文档, 故代理服务器也不支持这种方式.
springMVC访问静态资源——js、css、img等资源访问不到 进行springMVC的使用时，搭建框架的时候，发现一个简单的demo都跑不起来。发现引入的js出现404了。...之后就查找各种资料后，发现，原来需要配置静态资源，否则不能进行访问指定的js资源。 在springmvn-servlet.xml文件中进行设置： <?...现在，我想在hello.jsp中引用hello.js和jquery-2.2.2.js，那么我需要在hello.jsp中这样写： <script type="text/javascript" src="${pageContext.request.contextPath}/<em>js</em>_mapping/hello.<em>js</em>
Nginx控制浏览器缓存 浏览器缓存 第一次请求为200, 大小为49.8kb, 代表是直接从服务器请求的 刷新后状态为304, 大小为181B, 代表是加载的浏览器缓存 设置浏览器是否缓存...可以通过个勾选Disable cache禁用浏览器缓存, 那么每次都是加载服务器 Nginx设置资源过期时间 因为看的是之前的资源图片, 就修改原来的配置 server { listen...90; server_name localhost; location / { root /home; # 设置资源过期时间为10秒 expires 10s;...Nginx的静态资源, Nginx也可以缓存上游的静态资源 upstream tomcats { server 192.168.247.136:8001; server 192.168.247.136...http://tomcats; proxy_http_version 1.1; proxy_set_header Connection ""; } } 配置完成后 上游服务器的静态资源就会被缓存到
1、在SpringBoot中自己写的拦截器，居然把静态资源也拦截了，导致了页面加载失败。...excludePathPatterns("/", "/login.html", "/user/login", 62 "/**/*.css", "/**/*.js..."/**/*.jpeg", "/**/*.gif", "/**/fonts/*", "/**/*.svg"); 64 } 65 } 解决方法，在你注册拦截器的方法中，将这些静态资源排除掉...，这样就可以顺利加载出来了，静态资源。...上面是顺利加载的页面，下面是没有加载静态资源的页面； ?
唉~~~~，让我喘口气 现代互联网企业，为了进一步提升网站性能，会把静态资源和动态网页分集群部署，静态资源会被部署到CDN节点上，网页中引用的资源也会变成对应的部署路径： 好了，当我要更新静态资源的时候...所以，大公司的静态资源优化方案，基本上要实现这么几个东西： 配置超长时间的本地缓存 —— 节省带宽，提高性能 采用内容摘要作为缓存更新依据 —— 精确的缓存控制 静态资源CDN部署 —— 优化网络请求...更资源发布路径实现非覆盖式发布 —— 平滑升级 全套做下来，就是相对比较完整的静态资源缓存控制方案了，而且，还要注意的是，静态资源的缓存控制要求在 前端所有静态资源加载的位置都要做这样的处理 。...什么js、css自不必说，还要包括js、css文件中引用的资源路径，由于涉及到摘要信息，引用资源的摘要信息也会引起引用文件本身的内容改变，从而形成级联的摘要变化，大概示意图就是： 好了，目前我们快速的学习了一下前端工程中关于静态资源缓存要面临的优化和部署问题...以上不是我YY的，可以观察 百度 或者 facebook 的页面以及静态资源源代码，查看它们的资源引用路径处理，以及网络请中静态资源的缓存控制部分。
servlet-name>default /assets/* /js.../* *.js *.jpg
在上一篇文章介绍了Node.js基础API 接下来我们做一个案例，用Node.js实现静态资源服务器 目录结构 首先新键如下目录结构 config：存放一些配置文件 helper：辅助文件 template...：模板文件（后面会使用到模板引擎） app.js：入口文件 搭建服务 我们要根据客户端请求的url返回相应的文件/目录信息，所以我们要先搭建服务 使用http模块搭建 const http = require...}) 配置文件 module.exports = { root:process.cwd(), hostname :'127.0.0.1', port:'3000' } 要做一个资源服务器首先我们得获取到用户请求的...res.end(template(data)) } }catch(e){ console.log(e) } } 浏览器访问如下 此外我们还可以对静态资源进行压缩...(html|js|css|md)/ } 新键helper/compress.js const {createGzip,createDeflate} = require('zlib') module.exports
SpringBoot中的静态资源的存放路径和我们前面的web项目还是有些区别的，本文我们来介绍下SpringBoot中的静态资源。 ...springboot访问静态资源，默认有两个默认目录， 一个是 classpath/static 目录 (src/mian/resource) 一个是 ServletContext 根目录下( src.../main/webapp ) SpringBoot静态资源 1.static目录 在IDEA中默认创建的有此目录，如下： ? ...访问成功~ 3.自定义目录 一般情况下，默认目录已经满足我们的需求了，但是在某些特殊的情况下我们可能需要将静态文件存放在特殊的文件夹下，我们可以在application.properties中如下配置...#表示所有的访问都经过静态资源路径 spring.mvc.static-path-pattern=/** #覆盖默认配置，所以需要将默认的也加上否则static、public等这些路径将不能被当作静态资源路径
在我们开发Web应用的时候，会用到大量的js、css、image、html等静态资源资源。 在这里，凯哥先讲解js css这两类文件引入 。...在使用spring boot +freemarker开发的时候，对于静态资源文件，如CSS/JS/IMG这些静态文件怎么访问呢 ？...请看下图中，在springboot 源码中定义的： 在ResourceProperties这个源码类中，我们可以看到spring boot默认静态资源文件路径： ?...String[] = { , , , }; 说明： 如果以上每个文件夹下都有相同名称的资源文件的时候，spring boot获取顺序依次为： META-INF/resource下...spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/ 静态资源文件引入
禁止IIS缓存静态文件（png，js，html等）背景： IIS为了提高性能，默认情况下会对静态文件js，html，gif，png等做内部缓存，这个缓存是在服务器iis进程的内存中的。...IIS这么做在很大程度上可以提高静态文件的访问性能，在正常情况下只要静态文件更新了IIS也会更新缓存。但是如果更新的静态文件很多就有可能出现缓存不更新的情况。...如何禁止IIS缓存静态文件（png，js，html等）： 通过设置Http头不让浏览器缓存的方法在这个场景下是行不通的，因为缓存不是出现的客户端，而是出现在IIS服务器上;所以解决问题还需要从IIS本身入手...注意事项： 通常情况下我们并不需要禁用IIS的静态文件缓存，iis会自动根据静态文件的修改时间自动更新缓存;只有在你遇到非常情况下才有必要禁用IIS缓存。...IIS缓存和Http缓存相关头没有任何关系，在IIS上加缓存头没有办法清除掉IIS对静态文件的缓存。
nginx缓存静态资源，只需几个配置提升10倍页面加载速度 首先我们看图说话 这是在没有缓存的情况下，这个页面发送了很多静态资源的请求： ?...1.png 可以看到，静态资源占用了整个页面加载用时的90%以上，而且这个静态资源还是已经在我使用了nginx配置压缩以后的大小，如果没有对这些静态资源压缩的话，那么静态资源加载应该会占用这个页面展示99%...当然由于浏览器或者手机端对页面加载的优化我们并不能很直观的感受到10倍的提升，实际上以肉眼观察的话，差不多减少了一半的时间，并且由于并没有向后端服务器请求这些静态资源，也相当于对后端服务器做了一层保护措施...(css|js|ico|gif|jpg|jpeg|png)$ { log_not_found off; # 关闭日志 access_log off; # 缓存时间7天 expires 7d;...当然系统优化之路还是相当漫长的，nginx缓存只是其中的一块而已，想要把系统达到完美还需要在很多地方下功夫，比如这些静态资源完全可以直接在客户端缓存，这样连请求都不会往服务端发了，更大的减轻服务器的压力
静态资源访问的关键点是就近访问。可以考虑在业务服务器的上层加一层特殊缓存，即CDN。...简单来说，CDN 就是将静态的资源分发到，位于多个地理位置机房中的服务器上，因此它能很好地解决数据就近访问的问题，也就加快了静态资源的访问速度。...为了避免 DNS 解析结果的变更造成缓存内数据失效，可以启动一个定时器，定期地更新缓存中的数据。...找到离用户最近的节点 GSLB （Global Server Load Balance，全局负载均衡）可以给用户返回一个离着他更近的节点，加快静态资源的访问速度。...是否能够从 CDN 节点上获取到资源还取决于 CDN 的同步延时。 一般会通过CDN厂商的接口将静态资源写入某一节点，然后通过内部同步机制分散同步到每一个节点。
在Web页面的开发中，通常需要对css，js以及一些图片资源进行压缩后才能正式发布。...而对于一些比较简单的web页面，比如：个人主页，实际上可以直接使用一些独立工具才来实现静态资源的压缩，如：JScompress就是一个不错的web前端开发自动化解决方案。
# Nginx 静态资源访问 引言 如何访问 Nginx 的静态资源？这其中涉及到了 Nginx 的核心功能 Rewrite 重写技术，本内容将讲解处理访问静态资源的相关知识。...Nginx的跨域问题 同源策略 跨域问题 跨域案例 解决方案 静态资源防盗链 什么是资源盗链 防盗链实现原理 防盗链实现实例 针对目录防盗链 Rewrite功能配置 地址重写与地址转发 set指令 Rewrite...default_type application/json; # return 的格式是 json return 200 '{"id":1,"name":"TOM","age":18}'; } # 静态资源防盗链...# 多级域名 当你配置了多级域名，如二级域名 xxx.frxcat.fun，并且静态资源目录恰好和二级域名的 xxx 可以匹配，则可以使用正则表达式进行匹配，日后，如果又多个 xxx，则再创建对应的该目录即可...stylesheet" href="static/aa.css" /> 但是部署到 Nginx 后，这样写会找不到这两个资源，因为
简介 flask可对实例、配置模板文件路径、静态文路径进行配置 Flask(import_name, static_url_path=None, static_folder='static', static_host...templates', instance_path=None, instance_relative_config=False, root_path=None) static_url_path:前端访问资源文件的前缀目录...static_folder:后端存储资源文件的目录。默认是/static，就是指明你后端的资源文件，是放在/static/目录下，一般不需要改动。...实例讲解 # 默认Flask目录结构 /app.py /static /js /css /img /templates /index.html 前端访问后台静态资源
章节目录 静态资源分类 CDN场景 nginx作为静态资资源web服务_配置语法 浏览器缓存 服务器端设置浏览器缓存过期实践 跨站访问 静态资源分类 静态资源：非服务器动态运行生成的文件 类型 种类 浏览器端渲染...html、js、css 图片 jpeg、gif、png 视频 flv、mpeg 文件 txt、excel CDN场景 ?...nginx作为静态资资源web服务_配置语法 配置语法-tcp_nopush 要求实时性不高的场景下使用，不着急返回给客户端 语法：tcp_nopush on | off; 默认配置：tcp_nopush...on; 可配置模块：http、server、location 作用：keepalive连接下，提高网络包的传输实时性 配置语法-压缩 解压(浏览器端)---------------->压缩(nginx静态资源服务端...，提高静态资源快速响应的能力,提高服务端的处理效率 浏览器缓存 http协议定义的缓存机制 如:Expires；cache-control等 校验过期机制 校验是否过期 Expires-1.0、Cache-Control
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
