可简单避免的三个JS发布错误的详细介绍


Posted in Javascript onAugust 02, 2013

Web应用程序开发是倾向于在客户端运行所有用户逻辑和交互代码,让服务器暴露REST或者RPC接口。编译器是针对JS作为一个平台,第二版 ECMAScript正是考虑到这一点在设计。客户端框架例如Backbone, Ember和Require鼓励创建功能丰富的应用程序,不仅有丰富的代码,而且各个组件,组件与数据之间有很多相互作用。
这真的很好,或许还能产生一些优秀的用户体验,但是毫无疑问的是,这是很难开发web应用程序和web页面。
根本原因是在互联网上服务你的代码和数据,运行在一些随机的浏览器上,在javascript中,这是一种你需要特别小心的语言,它是一个完全缺乏 代码部署的平台。而且它不会很快就得到改善。我觉得如果星际迷航是现实生活,那么Jean-Luc Picard队长每隔一段时间不能打架的原因是他仍然是克林仪表板加载。
我想强调的是三个相对常见的错误和容易的解决方案,并且谈谈一些我们遇到的从ReadyForZero学到的特别的事情。
剥离“缓存清除”头信息
你可能使用CDN来缓存静态资源,这当然是合理的。如果你向服务器请求非缓存的资源(比如在AWS<Amazon Web Service>端使用"custom-origin"将文件指向真实的网络站点),这就需要小心了。你可能会在部署新版本的文件后添加一段缓存清 除的字符串(头信息)到文件名上来达到这个目的,这样你的文件名看起来是这样的:
https://3water.com/js/main__V0123456789abcdef__.js
这很容易做到,你可以选择任意的Hash算法来生成一段指纹信息作为这个字符串,这样它就会随着文件内容变化而变化。当新的url被引用时,它不可 能被缓存,这样就可以获取到服务器上的新版本。错误就发生在这里。在网络上有很多都建议剥离“缓存清除”头信息,而是让你的服务器直接提供新版本的文件。 如果你有多台服务器集群这可能导致你的站点上不同文件(如:html、js)的版本不一致(如js已更新但是html(从另一台服务器请求)仍然是旧 的),不仅如此,更严重是它很容易导致CDN缓存了错误的版本。这个错误是这样发生的:
·初始阶段,所有的服务器都是HTML1 和JS1.
·服务器A重启了,并提供HTML2和JS2.
·一个客户端向CDN请求main__V2__.js,这个时候这个文件是新的所以CDN上没有缓存。
·CDN把这个请求传给了你设置的custom origin, 碰巧这个请求发到了服务器B上。
·服务器B剥离了“缓存清除”字符串并返回旧的版本。
·CDN把旧版的的文件当新的缓存了。
这件事情考虑起来很简单明了,但是盲目的听从网络上的建议很可能导致错误。更糟糕的是在你这看起来一切都是好的你根本不知道发生了错误,但是其它地 区的用户使用了不同CDN很可能缓存了错误的版本。解决方案是不要剥离“缓存清除”字符串并将静态资源存放在能够正确支持各个版本的地方。
2. 处理庞大的JS炸弹
每个人都知道,我们需要压缩我们的javascript文件,并把它们连接在一起。但是盲目地这样做并非明智之举。如果连接的文件很大,那么更有效的方法就是并行化。另外,如果你需要频繁的修改文件的某一部分,你可能会导致很多地方失效,而文件很大部分却没有被修改过。
如果把频繁修改的部分分离出来,那么就可以解决两边的问题。我建议使用require.js - 它可以实现对你的javascript的真正的依赖关系管理,而且第一次使用的时候,设置很简单(稍后添加会很痛苦),而且可以帮助你理解和管理依赖关系,包括一些高级选项,例如异步载入。
需要注意的:require.js会等待一段时间后会放弃载入资源,这个可以通过指定waitSeconds选项实现,这个选项的默认值似乎7秒,它依赖于你的用户在哪里(例如:手机),可以是很短的时间。
3. 没有汇总错误事件
你不能只让你的javascript上线使用,而不关心它的运行情况。你不可能测试每一个浏览器和每个用户的状态组合。另外,不同的载入时间可能导致怪异的状态。所以,建立某种反馈机制来判断你的用户是否遇到错误,变得十分重要。这很简单,你只需通过指定一个全局错误处理程序,收集错误,并发送会服务器。以下是一个例子:
棘手的部分是,很多时候会出现一些非0的错误,因为用户可能安装了各种怪异的插件或者其他。所以你需要跟踪稳定的状态到底是什么,还有是否有任何的偏差。
ReadyForZero,我们在顶层捕获onError事件,并把它们发送会服务器,然后生成一个日报,汇总多少个用户发生了错误,和这些错误发生在哪里。我们发现很多时候,错误消息并不足够,所以我们同样需要从我们的事件系统回传最后几个事件。通过分析用户最近触发的Backbone或者JQuery事件,对于获取当时用户触发错误时候的上下文信息,有很大的帮助。
垂手可得的改进
令人沮丧的是下面这些点不是我们必须担心的。公司更应该关注在产品上,快速高质量地把它们弄出来。但是请记住如果这些垂首可得的改进获得实施,你将能更专注于大动作上。
人们总是被一些琐事纠缠住花费了大量时间,但是仅仅让你的应用正常运行就能获得大的成长。
1,你的客户端代码有没有内存泄露?你确定吗?你是怎么知道的?
2,在ReadyForZero[注1]我们有很多聪明的人们致力于推动这门艺术。
[注1]ReadyForZero:是由 Y Combinator资助的一家公司,公司的目的是通过网络平台帮助消费者摆脱信用卡债务。

Javascript 相关文章推荐
简单的代码实现jquery定时器
Jan 03 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
javascript学习小结之prototype
Dec 03 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 #Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 #Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 #Javascript
Javascript 遮罩层和加载效果代码
Aug 01 #Javascript
JS防止用户多次提交的简单代码
Aug 01 #Javascript
纯文字版返回顶端的js代码
Aug 01 #Javascript
JS实现随机化快速排序的实例代码
Aug 01 #Javascript
You might like
第五节--克隆
2006/11/16 PHP
php单例模式示例分享
2015/02/12 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python FTP操作类代码分享
2014/05/13 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
QML实现钟表效果
2020/06/02 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
Ref与out有什么不同
2012/11/24 面试题
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers