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

Web应用程序开发是倾向于在客户端运行所有用户逻辑和交互代码,让服务器暴露REST或者RPC接口。编译器是针对JS作为一个平台,第二版 ECMAScript正是考虑到这一点在设计。客户端框架例如Backbone, Ember和Require鼓励创建功能丰富的应用程序,不仅有丰富的代码,而且各个组件,组件与数据之间有很多相互作用。
这真的很好,或许还能产生一些优秀的用户体验,但是毫无疑问的是,这是很难开发web应用程序和web页面。
根本原因是在互联网上服务你的代码和数据,运行在一些随机的浏览器上,在javascript中,这是一种你需要特别小心的语言,它是一个完全缺乏 代码部署的平台。而且它不会很快就得到改善。我觉得如果星际迷航是现实生活,那么Jean-Luc Picard队长每隔一段时间不能打架的原因是他仍然是克林仪表板加载。
我想强调的是三个相对常见的错误和容易的解决方案,并且谈谈一些我们遇到的从ReadyForZero学到的特别的事情。
剥离“缓存清除”头信息
你可能使用CDN来缓存静态资源,这当然是合理的。如果你向服务器请求非缓存的资源(比如在AWS<Amazon Web Service>端使用"custom-origin"将文件指向真实的网络站点),这就需要小心了。你可能会在部署新版本的文件后添加一段缓存清 除的字符串(头信息)到文件名上来达到这个目的,这样你的文件名看起来是这样的:
http://www.jb51.net/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资助的一家公司,公司的目的是通过网络平台帮助消费者摆脱信用卡债务。

(0)

相关推荐

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

    Web应用程序开发是倾向于在客户端运行所有用户逻辑和交互代码,让服务器暴露REST或者RPC接口.编译器是针对JS作为一个平台,第二版 ECMAScript正是考虑到这一点在设计.客户端框架例如Backbone, Ember和Require鼓励创建功能丰富的应用程序,不仅有丰富的代码,而且各个组件,组件与数据之间有很多相互作用.这真的很好,或许还能产生一些优秀的用户体验,但是毫无疑问的是,这是很难开发web应用程序和web页面.根本原因是在互联网上服务你的代码和数据,运行在一些随机的浏览器上,在

  • Android通过ksoap2传递复杂数据类型及CXF发布的webservice详细介绍

    Android通过ksoap2传递复杂数据类型及CXF发布的webservice详细介绍 最近在学校搞点东西,搞了2天的webservice,心累呀,今天中午和小伙伴终于弄通了,感觉就是一些细节问题没有注意到,啊,我的时间呀,进这么过去了,为了不让小伙伴们走弯路,我还是认真的把开发文档写一遍吧! 首先,如果我们要用CXF发布webservice用自定义类型的对象来当参数传递的话,我们应该先把这个类序列化一遍,下面就是我测试的代码,我创建了一个TGrade类,实现了KvmSerializable接

  • Node.js模块化的使用详细介绍

    目录 什么是模块化 编程领域中的模块化 模块化规范 Node.js中的模块化 加载模块 Node.js中的模块作用域 1. 什么是模块作用域 2. 模块作用域的好处 向外共享模块作用域中的成员 1. module对象 2. module.exports对象 共享成员时的注意点 exports对象 exports和module.exports的使用误区 Node.js中的模块化规范 什么是模块化 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程.对于整个系统来说,模块是可组合.

  • Javascript模块化编程(三)require.js的用法及功能介绍

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js.  一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. 复制代码 代码如下: <script src="1.js"></script> &l

  • js中prototype用法详细介绍

    prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解: 首先,我们要先了解一下类的概念,JavaScript 本身是一种面向对象的语言,它所涉及的元素根据其属性的不同都依附于某一个特定的类.我们所常见的类包括:数组变量(Array).逻辑变量(Boolean).日期变量(Date).结构变量(Function).数值变量(Number)

  • JS的replace方法详细介绍

    replace() 方法的参数 replacement 可以是函数而不是字符串.在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用.该函数的第一个参数是匹配模式的字符串.接下来的参数 是与模式中的子表达式匹配的字符串,可以有 0 个或多个这样的参数.接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置.最后一个参数是 stringObject 本身. 下文展示了几种javascript正则表示式的repalce方式,有些方式我们很少在别的地方看到,如第二

  • vue.js指令和组件详细介绍及实例

    大家好,本文给各位做一下vue.js一个最基本的概念介绍. vue.js 指令 <div id="app"> <div v-text="message"></div> </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 这个例子我们会得到,v-text所在的div元素的内部插入了'Hello Vue!'这段字符串,那么我们为

  • 简单易用的倒计时js代码

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>简单易用的倒计时js代码</title> <style> *{ margin:0; padding:0; list-style:none;} body{ font-size:18px; text-align:center;} .time{ height:30px; padding:20

  • 关于vue.js发布后路径引用的问题解决

    本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面,这时候index.html里引用的js和css文件路径都会找不到 错误如下 打开index.html文件发现里面引用的文件路径不对 这里只需要更改config/index.js配置就可以了 更改后的配置 这里也视当前环境的具体环境而定. 如果你也遇到这样

  • Mysql使用简单教程(三)

    在上篇文章给大家介绍了mysql使用简单教程(二) mysql中结构相同的两个表进行合并:(注意需要两个表的结构是一样的) 有如下结构的两个表father和person. 合并的步骤为: 1.把person表和father表两个表进行联合输出到临时表tmp中. 命令为:>create temporary table tmp select * from person union select *from father; 2.创建结果表,并创建主键. 命令为:>create table resu(

随机推荐