js资源加载优化

简介:

互联网应用或者访问量大的应用,对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.某些浏览器不支持


转载:http://www.cnblogs.com/lovesong/p/4338146.html

目录
打赏
0
相关文章
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
131 70
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
62 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
68 11
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
192 62
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
103 31
介绍一下 JavaScript 中数组方法的常见优化技巧
通过合理运用这些优化技巧,可以提高 JavaScript 中数组方法的执行效率,提升代码的整体性能。在实际开发中,需要根据具体的业务场景和数据特点选择合适的优化方法。
60 6
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。

热门文章

最新文章