互联网应用或者访问量大的应用,对js的加载优化是不可少的。下面记录几种优化方法

CDN  + 浏览器缓存

CDN(content delivery network)内容分发网络, 最传统的优化方式。其实就是将自己页面所依赖的js(静态的)放置到CDN上,或者使用一些CDN库,以此降低对应用服务器的请求,而浏览器缓存也是不重复加载js文件的性质。

优点:

1.简单、容易维护

2.304 cache

简单来说就是转掉请求,缓存不重加载。

缺点:

1.缓存会失效,当用户强制刷新时会有请求

2.无法增量更新

离线存储(HTML5 AppCache)

通过配置一个manifest文件实现离线缓存

manifest文件包含:

1.当前版本号

2.cache的文件

3.需要网络请求的文件

4.失败响应

优点:

1.真有版本更新才会有请求(CDN方式还是会有请求的,只不过是304请求)

缺点:

1.更新完版本后,必须刷新一次页面才会启用新版本文件。

PS:所以必须监听一个事件,重刷页面

window.applicationCache.addEventListener('updateready', function (e) {
console.warn('页面更新中');
window.applicationCache.update();
window.applicationCache.swapCache();
setTimeout(function () {
location.reload();
}, 10);
}, false); //from http://dd.m.taobao.com/

2.进入离线存储的页面,如果不更新版本,是会将其当初静态页面不请求,这样就无法进行灰度发布等策略。

PS:灰度发布:简单来说就是一部分人使用旧版,一部分人使用新版。

3.无法增量更新

PS:例如一个100KB的文件,你只修改了其中4KB的东西,但你不得不更新整个100KB文件。

4.当需要更新某个文件时,会连带其他文件也跟着更新

本地存储

应用页面通过对用户当前版本与服务端版本的比较(本地存储有版本信息),通过跨域ajax请求有更新的js文件,如果是增量更新,则通过算法计算出新版本的js代码,然后将代码eval一下并将新js字符串存储到本地存储中(localStorage),以供下次增量更新。

优点:

1.减少不必要的请求

2.避免离线存储的问题

3.增量更新(需要算法计算)

PS:1.chunk算法,四个字符为一个块,比对块。

2.编辑距离计算算法

缺点:

1.实现起来比前面几种方法复杂

2.某些浏览器不支持

js资源加载优化的更多相关文章

  1. js文件加载优化

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. ...

  2. 关于cocos2dx for lua资源加载优化方案

    之前我写游戏加载都是从一个json文件写入要加载的文件名来实现加载,但是如果资源 比较多的情况下,会导致非常难管理,需要逐个写入.所以换了另外一种方式来加载文件. 首先,我是通过场景之前的切换时候,加 ...

  3. 前端性能优化 css和js的加载与执行

    一个网站在浏览器端是如何进行渲染的? html本身首先会被渲染成 DOM 树,实际上 html 是最先通过网址请求过来的,请求过来之后,html 本身会由一个字节流转化成一个字符流,浏览器端拿的就是字 ...

  4. vue-cli3.0 资源加载的优化方案

    20180829 更新 今天反复试了,不用区分 测试环境还是 生产环境,统一都用 cdn 就可以了 背景 之前自己搭建了一个 vue + tp5.1 的后台项目(https://segmentfaul ...

  5. 性能优化-css,js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  6. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  7. JS脚本加载与执行对性能的影响

    高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...

  8. js并行加载,顺序执行

    js并行加载,顺序执行 <script>运行脚本或加载外部文件时,会阻塞页面渲染,阻塞其他资源的加载.如果页面中需要加载多个js文件,在古老浏览器中性能会比较糟糕. 因此有了最原始的优化原 ...

  9. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...

随机推荐

  1. java中自动装箱的问题

    package wrapper; public class WrapperDemo { public static void main(String[] args) { Integer a=new I ...

  2. Clank – 快速构建移动 APP 原型的 HTML/CSS 框架

    Clank 是一个自由和开放源码的 HTML/CSS 框架,可以帮助你轻松创建本地手机或平板电脑应用程序的原型.它着重于提供一致的用户界面,不会刻意去模仿一个特定的 OS .该框架是基于组件的,这样我 ...

  3. android gridview几个重要属性(android:listSelector自带内部padding分析)

    一.android:scrollbarStyle  决定状态条的位置     常用属性outsideOverlay,滚动条在最外层,gridview设置的padding在滚动条的内侧   二.andr ...

  4. Kylin的cube模型

    1. 数据仓库的相关概念 OLAP 大部分数据库系统的主要任务是执行联机事务处理和查询处理,这种处理被称为OLTP(Online Transaction Processing, OLTP),面向的是顾 ...

  5. SQL Server存储(6/8) :理解DCM页

    我们已经讨论了各种不同的页,包括数据页.GAM与SGAM页.PFS页,还有IAM页.今天我们来看下差异变更页(Differential Change Map:DCM ),还有差异备份(differen ...

  6. JS魔法堂:再识instanceof

    一.Breif    大家都知道instanceof一般就是用来检查A对象是否为B类或子类的实例.那问题是JS中没有类的概念更没有类继承的概念(虽然有构造函数),那么instanceof到底是怎样判断 ...

  7. C#编程总结(十一)数字证书

    C#编程总结(十一)数字证书 之前已经通过文章介绍了数字证书的基础知识,包括加密和数字签名. 具体可见: 1.C#编程总结(七)数据加密——附源码 2.C#编程总结(八)数字签名 这里来讲述数字证书的 ...

  8. C#中考虑为大对象使用弱引用

    1.无论怎样尽力,我们总是会使用到某些需要大量内存的数据,而这些内存并不需要经常访问.或许你需要从一个大文件中查找某个特定的值,或者算法需要一个较大的查询表.这时,你也许会采用2中不太好做法:第一种是 ...

  9. win8.1安装Team Function Server 2013

    1.系统是Win8.1企业版64位 2.Visual Studio 2013 3.数据库是Sql Server2012 (这里注意需要升级到SP1否则安装可能失败下载地址http://www.micr ...

  10. setcookie第三个值为什么写0