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,如需转载请自行联系原作者


相关文章
|
5月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
225 3
|
3月前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
6月前
|
编解码 缓存 算法
Three.js如何降低3D模型的大小以便更快加载
为加快600MB的3D模型在Three.js中的加载速度,可采用多种压缩方法:1) 减少顶点数,使用简化工具或LOD技术;2) 压缩纹理,降低分辨率或转为KTX2等格式;3) 采用高效文件格式如glTF 2.0及draco压缩;4) 合并材质减少数量;5) 利用Three.js内置优化如BufferGeometry;6) 按需分批加载模型;7) Web Workers后台处理;8) 多模型合并减少绘制;9) 使用Texture Atlas及专业优化工具。示例代码展示了使用GLTFLoader加载优化后的模型。
732 12
|
6月前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
6月前
|
JavaScript 前端开发
JavaScript引入全攻略:提升网页加载速度的秘诀!
JavaScript引入全攻略:提升网页加载速度的秘诀!
|
6月前
|
资源调度 JavaScript 前端开发
如何大幅减少 Vue.js 中的包大小和加载时间,提升用户体验!
如何大幅减少 Vue.js 中的包大小和加载时间,提升用户体验!
|
7月前
|
监控 JavaScript 前端开发
Node中的AsyncLocalStorage 使用问题之Node.js内部模块和外部模块的加载的问题如何解决
Node中的AsyncLocalStorage 使用问题之Node.js内部模块和外部模块的加载的问题如何解决
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
68 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    63
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    32
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    27
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    48
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    60
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    59
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    58