友情提示：推荐阅读时间10分钟 + 练习时间10分钟 上一期给大家分享了Gulp插件的安装与使用，只要掌握了Gulp插件安装的流程与配置，对于其他Gulp插件的使用基本上就没有太大的问题。毕竟Gulp的插件太丰富了，大家也没有太多的精力把所有的插件都去研究一遍。当一个网站进行改版升级的时候，会遇到静态资源版本更新的问题，那么对于前端开发工程师来说，该如何解决这个问题？所以今天要和大家一起探讨如何解决静态资源版本更新的问题和package.json的作用。 相关阅读：前端工程化 | 定制专属提速“外挂”（上）
现代互联网企业，为了进一步提升网站性能，会把静态资源和动态网页分集群部署，静态资源会被部署到 CDN 节点上，网页中引用的资源也会变成对应的部署路径：
示例 <html> <head> <link href='a.css' type='text/css'/> <script src="b.js"></script> ... </head> ... </html> 这个页面引用了2个静态资源： a.css、b.js 随着产品的不断发展，简单的静态资源更新也就不再简单 阶段一 产品初期，访问量不大，网络带宽充足，每次用户访问都重新加载静态资源也很快 这种情况下，静态资源的升级就非常简单，用新的文件直接覆盖线上文件即可 阶段二
一般网站优化都是优化后台，如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下，对前端web优化也是非常重要的。 下面说说几种常见的优化措施。 1、HTML CSS JS位置 一般需要将CSS放页面最上面，即HEAD部分，而将JS代码放页面底部。因为页面需要加载为CSS才进行渲染，而JS如果不是在页面加载之前就要执行就要放到页面最底部，以免在页面展示之前因JS过多加载而影响页面渲染速度。 2、引用文件位置 有一些插件需要引用到远程的图片、CSS、JS、图标等，如果远程的资源连接网速
必须配置SpringMvc对访问静态资源的支持，idea默认就是在main/webapp 下的文件路径，要在web-info同级的resource文件下放置，JSP中
例如同一个域名 CDN 服务器上的 a.js，b.js，c.js 就可以按如下方式在一个请求中下载：
大家用vue脚手架搭建前端工程时，常被缓存问题所困扰，具体的表现就是，当程序版本升级时，用户因为缓存访问的还是老的页面，然后很多同学很暴力的直接在index.html中加入了这几行代码：
为了优化对外服务时前端页面加载性能，TAPD SaaS产品打算将静态资源文件接入腾讯云CDN进行访问加速。
最近公司里让我研究PWA，经过几天的研究发现PWA竟是如此万能，功能接近手机原生APP，最大的优点是它的离线缓存机制，这主要得益于ServiceWorker！
阅读量: 57 动静分离 为了加快网站的解析速度，可以把动态页面和静态页面由不同的服务器来解析，加快解析速度。降低原来单个服务器的压力。 动态页面与静态页面区别 静态资源（css、js、images、html等）： 当用户多次访问这个资源，资源的源代码永远不会改变的资源。 动态资源（php、jsp等）：当用户多次访问这个资源，资源的源代码可能会发送改变。 什么是动静分离 静分离是让动态网站里的动态网页根据一定规则把不变的资源和经常变的资源区分开来，动静资源做好了拆分以后，我们就可以根据静态资源的
Hexo 是一款基于 Node.js 的静态博客生成器。有别于传统的 WordPress、Typecho 等由服务端渲染的动态博客程序，Hexo 可以遍历博客的各个页面，将博客文章等内容渲染到主题（即页面模板）之中，生成全部页面的 HTML 文件及其引用的 CSS、JS 等静态资源。这些静态资源文件常常通过托管到 Pages、托管到对象存储或者自建 Nginx 服务器的方式来对外提供访问。
业务系统的一个测试环境出现一台电脑的浏览器访问网页始终展示异常，控制台没有报错，另外的电脑访问是正常的。强制刷新可以解决问题。
先从简单的静态页面开始，众所周知，前端资源由 HTML、JavaScript、CSS 三剑客组成，假设我们有一个简单的页面，用Nginx作为 Web 服务器，资源组织结构大概如下：
2016-06-0109:12:42 发表评论 231℃热度 由于网站已经迁移完成，所以昨天在优化服务器和WP，加快读者们的访问速度，毕竟有强迫症的我不能忍受网站点击下还在加载读条中，那是极其糟糕的，
在前端项目开发完成，我们肯定是需要对前端的项目进行测试优化。我们可以先用一些第三方工具对网站进行分析。工具例如
今天给大家推荐一个不错的开源库，非常的不错，可以突破系统限制，让缓存更简单，更灵活。它就是：CacheWebView。 CacheWebView CacheWebView 是 Android W
前端的性能优化是一个很宽泛的概念，最终目的都是为了提升用户体验，改善页面性能。面试的时候经常会遇到问谈谈性能优化的手段，这个我分几大部分来概述，具体细节需要自己再针对性的去搜索，只是提供一个索引（太多了写不过来+主要是懒得写）。这里PC端和移动端分开说了，业务场景不同，需要考虑各自的优化手段
优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源，所以在web.xml中配置DispatcherServlet的请求映射，往往使用 *.do 、 * .xhtml等方式。这就决定了请求URL必须是一个带后缀的URL，而无法采用真正的REST风格的URL
主要是nginx处理静态页面的效率远高于tomcat的处理能力，如果tomcat的请求量为1000次，则nginx的请求量为6000次，tomcat每秒的吞吐量为0.6M，nginx的每秒吞吐量为3.6M，可以说，nginx处理静态资源的能力是tomcat处理能力的6倍，优势可见一斑。
所谓系统动静分离，其实，就是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用服务器的请求。后台应用服务器只负责动态数据请求。
很久没写文章了，博客已经长草了，今天挤点时间分享一些小干货，也是回应一下不少站长朋友的留言问题。 有不少站长朋友问张戈博客的静态文件为啥是另外一个域名？有啥好处？如何实现？ 其实这算是一种动静分离的做
我们的网站简单来说分为 2 种数据资源，一种是动态的数据，即 PHP 等程序语言实时吐出来的数据，在网页内容上主要是 HTML 代码，另一种则是静态资源，比如图片、css、js、视频等（当然，图片等资源也可能是实时动态生成的，比如 PHP 缩略图，这里就不展开讨论了）。
静态资源优化 这方面主要是减少静态资源的加载时间 减少http请求的数量和时间上来考虑 合并压缩css、js文件，制作雪碧图 压缩图片：减少http的请求次数，节省网络请求时间 静态资源cdn分发：客户端可以通过最佳的网络链路加载静态资源 静态资源缓存机制，从而减少不必要的请求 减少DNS的搜索时间 这个在前端处理的少一些 接口访问优化 这个主要还是要从服务端入手，node必不可少 首屏采用服务端渲染 可以使用node做到前后处理都用js语言 使用node来实现基于代理服务的接口合并方案 从而也减少了htt
一个页面的加载快慢，最重要的指标就是静态资源的加载速度了吧。你拼了命得对代码进行优化几十ms，结果静态资源一个不爽就给你耗了几百ms。
挺久以前就有网友给我的 GitHub Pages 博客模板提 Issue，说希望能增加 CDN 用于加速静态资源的加载，由于懒，一直没有动。
很多企业都会特别注重自己产品的体验，尤其是移动端，那移动端的体验为什么这么重要？首先体验本身就很重要，好的体验带给用户的感受是截然不同的，用户选择使用一个产品除了产品本身功能满足需求之外，还有一个更重要的原因就是产品用起来“爽”，产品整个使用流程必然是舒适自然，才能受到大众喜爱；此外，产品体验已成为市场竞争力之一，借用人人都是产品经理上面对体验的论述：
今天我们来聊聊缓存这个话题，看看在微服务环境下如何设计有效的多级缓存架构。主要涉及三方面内容：
expires起到控制页面缓存的作用，合理的配置expires可以减少很多服务器的请求
缓存的作用就是提升网页加载速度。浏览器加载一个完整的网页势必会引用外部资源（图片，js，css）。若每次加载网页都要去加载这些外部资源则会引起不必要的时间和资源浪费，且会影响用户体验。而解决上述问题需要一个优秀的缓存策略。除此之外，web缓存的优点还有很多，例如：减轻服务器压力
现在，我们就要针对wordpress影响网站响应速度的因素进行具体问题具体分析，并探求正确的方法论高效率有效地解决问题。
最近在项目开发中遇到一个需求：项目打包后，可以根据修改配置文件，进而动态替换页面上的文本。由于项目基本不涉及到后端，因此不考虑通过接口来修改。这就需要前端项目打包后需要暴露一个配置文件，每次页面刷新时会获取到最新的配置，达到动态替换页面文本的目的。
因为项目部署在tomcat下，所以使用了default servlet 来处理静态的资源，想必不通过spring mvc 可以加快一些速度，但是后来考虑到静态资源缓存和gzip压缩的考虑，哪种方法好暂且不说，后面列出使用SpringMVC处理静态资源、缓存、GZIP的配置方式。先看下直接使用默认的servlet处理静态资源的配置：
页面加载提速是战场，首当其冲要优化的就是 静态资源（js|css） 的加载速度。我们小组去年基于Vue开发了一个积分商城单页面应用。本文旨在与大家分享在单页应用中使用纯前端手段加速静态资源的获取，从而达到页面加速。
由于lighttpd 作为静态资源服务器，设置客户端浏览器的对静态资源的缓存时间，下面是基于文件类型进行设置基于缓存时间的。
大家好，我是山月，这是我最近新开的专栏：「前端部署系列」。包括 Docker、CICD 等内容，大纲图示如下：
大家好，又见面了，我是你们的朋友全栈君。 前言 之前项目中需要用到百度地图，由于项目的特殊环境，所以需要下载百度的离线地图。我们知道，地图的展示其实就是一张张地图的图片展示，我们在网页上浏览查找位置的时候，其实都是在发送图片请求。这些图片请求相对于jsp，servlet来说就是所谓的静态资源，当然服务中的静态资源不仅仅只是图片，像页面样式css文件，js脚本文件这些都可以看着是静态资源。tomcat既可以静态资源也可以处理动态资源。但是单节点的tomcat本身处理请求的资源是有限的，如果项目中的tomcat
可以看到，静态资源占用了整个页面加载用时的90%以上，而且这个静态资源还是已经在我使用了nginx配置压缩以后的大小，如果没有对这些静态资源压缩的话，那么静态资源加载应该会占用这个页面展示99%以上的时间。听起来是不是已经被吓到了，但是数据已经摆在这里了，这可不是危言耸听。
前端 性能优化 可以分为三个level：静态资源优化、接口访问优化、页面渲染速度优化，在操控门槛上依次递增，优化效果上越发没有这么明显，所以很多小团队只会做到了第一个level
1、gzip压缩 在所有的web前端项目，静态资源基本都放在cdn上，gzip的压缩是非常必要的，它直接改变了js文件的大小，减少两到三倍。nginx的gzip配置非常简单，在你对应的域名底下，添加下面的配置，重启服务即可。gzip_comp_level的值大于2的时候并不明显，建议设置在1或者2之间。 # 开启gzip gzip on; # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用C
npm run build 的原理是利用 Vue CLI 的构建工具，根据项目中配置的各种规则，将源代码转换成可在浏览器中运行的静态文件。 npm run build 主要做了以下几个操作：
标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
作者：ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，我们常常竭尽全力进行前端页面优化，但却忽略了这样做的效果和意义。先不急于探究前端优化具体可以怎样去做，先看看什么是前端性能，应该怎样去了解和评价前端页面的性能。 通过性能测速和分析，我们基本可以
上网去搜索访问资源对于我们来说并不陌生，通过浏览器发送一个 HTTP 请求实现从客户端发送请求到服务器端获取所需要内容后并把内容回显展示在页面的一个过程。这个时候，我们所请求的内容就分为两种类型，一类是静态资源、一类是动态资源。
上世纪八十年代末，不列颠的伯纳斯-李爵士发明了万维网，距今已有三十年。万维网并非互联网的全部，然而它的出现，为普罗大众开启了新世界的大门。从此之后，互联网的风口轮动不休，静态资源这棵门前的早树却安静如故。许多年过去了，静态资源服务的基础构架没有发生大的改变，改变的只是它所承载的内容和服务的对象。
围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕 PC 浏览器和移动端浏览器的优化策略进行罗列 注意，是罗列不是展开，遇到不会不懂的点还请站外扩展 开车速度有点快，坐稳了。 tips : 这么多前端优化点你都记得住吗？反正我是收藏起来备查的。 PC 浏览器前端优化策略 PC 端优化的策略很多，如 YSlow（YSlow 是 Yahoo 发布的一款 Firefox 插件，现 Chrome 也可安装，可以对网站的页面性能进行分析，提出对该页面性能优化的建议）原则，或者 Chrome 自带的 Audits
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
