可简单避免的三个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与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
对比分析json及XML
Nov 28 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
Javascript Promise用法详解
May 10 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
15种PHP Encoder的比较
2007/04/17 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
python写的一个文本编辑器
2014/01/23 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
scrapy爬虫实例分享
2017/12/28 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
简单了解django文件下载方式
2020/02/10 Python
Python post请求实现代码实例
2020/02/28 Python
python中的插入排序的简单用法
2021/01/19 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
C语言面试题
2015/10/30 面试题
新闻专业个人求职信
2013/12/19 职场文书
语文教师求职信范文
2015/03/20 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
优质服务标语口号
2015/12/26 职场文书