JavaScript

PC端大型单页式商业内容管理系统的JS模块化构建探索

前提 为了不被喷得太惨,给标题加了这么多的限制定语也是相当不容易的了。此文讨论的是我所处的环境下对JavaScript构建的一些简单探索,因此有相当多的前提限制。 首先,何为大型。从我们的系统来看,20多个业务模块,近100个页面组成的单页系统,对应的业务源码代码量如下: 对应的依赖库,除underscore和moment外均为公司内部库,代码量为: 其次,所谓的“模块化”指我们使用AMD进行构建,使用符合社区AMD标准的Loader进行模块的加载。 而“PC端单页式商业内容管理系统”则代表着系统的不少特性: 使用是相对强制的,对用户来说这是一项工作,而不是爱用不用的用户产品。 商业公司通常拥有较好的网络环境,面向PC设计更使得带宽不是一个需要着重考虑的因素。 单页系统使得所有功能被包含在一个HTML页面内,不存在页间的跳转,因此资源不以页面为单位进行切分。 为何要构建 第一个问题是,AMD有自然的按需加载的属性,

JavaScript

浅谈eval的影响

听闻最近由于老赵在其Wind.js关于eval这一函数使用上与BYVoid进行了一系列的争论,甚至为此写了一篇博客来证明eval对性能的影响可以忽略这一观点。 而不幸由于在这一次讨论中,起于Ericpoon_智对eval性能影响的疑问,也不知不觉参与了一些讨论,随后_Franky提出要有数据上的事实来说明这一问题,于是在好久没有新的博客出产的时候,决定对这一问题进行一下非常浅薄的挖掘,提供一些客观的数据。 首先在此文中,需要声明的是: 个人倾向于不要计较eval产生的影响。 此文会从**eval有负面影响**这一角度进行表述和举例,与老赵的博客属于完全相反的观点,但并不是一种对其的驳斥或者反对,仅仅是希望可以提供一些客观的理论依据。 本文只谈V8引擎,由于这一问题是不同引擎的表现会大不相同,不可能完全覆盖,因此数据不可作为权威参考。 本人不懂C或C++,看不懂V8,因此完全是黑盒的推断,各结论也不具权威意义,完全可能是臆测,当然数据保证真实。 以下是本次测试使用的Chrome版本详细信息: Google

性能

浏览器渲染原理PPT

这是今天一次内部分享的PPT,其中内容主要来自于Winter大大分享的相关材料,和How Browser Work这一文的一些内容。 由于内部分享是以讲为主,因此PPT并不包含所有内容,仅仅是一个摘要的形式,另有以下几点: 配合PPT中的注解,可以有更好的效果。 相关的DEMO均链接到了jsfiddle的地址,由于仅为演示使用,因此DEMO页面没有经过严密的处理,仅支持Chrome和Firefox查看,且“运行”按钮需按顺序点击,第一个示例未完成前运行第二个可能造成悲剧性后果。 绝对不要使用IE9以下浏览器打开特别是“布局”章节中的示例,否则造成任何实物及精神上的操作概不负责。使用Chrome等高级浏览器打开该示例会造成一定程度的假死现象,请耐心等待。 PPT仅说明了整个分享的主要内容点,由于涉及的内容较多,也无法在其中对每个细节进行详细的阐述,如果对任何细节有所疑问,可以回复本篇博客,我会在时间宽裕的时候努力回复(最近忙得想去撞动车,回复不及时请勿见怪)

性能

各浏览器对页面外部资源加载的策略

这个总结来源于一次优化的请求,最初某个页面的加载十分缓慢,load事件迟迟无法触发,因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化,拿得load事件尽可能早地触发。 于是我查看了页面的源码,并对外部资源进行了整理,基于下面2个理念画出了一个推测的瀑布图: 浏览器对同一个域只能并发2个HTTP请求 – 网上盛传已久。 javascript文件的加载会阻塞浏览器其他资源的加载 – 同样网上盛传已久。 然而,当我看到各浏览器中实际的瀑布图时,我知道自己又犯了一个简单的错误:太过相信所谓的权威和大众的声音,而没有更早地进行实践来检验理论的正确性…… 本篇文章就使用几种流行的浏览器,针对同一个页面的外部资源加载过程进行分析,推测各浏览器加载外部资源的策略、特征,并最后给予一定的比较和总结。 测试样例 测试的页面结构如下: head 1.css + 1.js body 1.jpg + 2.

JavaScript

记一次失败的jQuery优化尝试

我经常抱怨jQuery的DOM操作性能并不优秀,并且经常尝试用一些方法去进行优化,但是越是优化,越是沮丧地发现jQuery其实已经做得很好,从使用者的角度能够进行的优化实在有限(这并不意味着jQuery的性能是优秀的, 反之只能说它是一个相对封闭的库,无法从外部介入进行优化)。这篇文章就记录一次失败的优化经历。 优化思想 这一次优化的思想来自于数据库。在数据库优化的时候,我们常会说将大量的操作放在一个事务中一起提交,能有效提高效率。虽然对数据库不了解的我并不知道其原因,但是“事务”的思想却为我指明了方向(虽然是错的……)。 因此我尝试将“事务”这一概念引入到jQuery中,通过打开和提交事务,从外部对jQuery进行一些优化,其最重要的在于减少each函数的循环次数。 众所周知,jQuery的DOM操作,以get all, set first为标准,其中用于设置DOM属性/样式的操作,

JavaScript

一小段jQuery代码的分析与优化

今天刚回家,QQ群里就看到有人求助优化一段jQuery代码,简单看了一下,发现如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来。这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌。 需要优化的代码大致是这样的,也不方便直接把人家的代码复制过来,就大概地表达下意思: $.fn.beautifyTable = function(options) { // 定义默认配置项,再用options覆盖 return this.each(function() { var table = $(this), tbody = table.children('tbody'), tr = tbody.children('tr'), th

JavaScript

预加载资源研究

什么是预加载 所谓预加载,就是通过一定的编程方法,使浏览器在空闲的时候,在后台通过HTTP请求访问某些资源。当用户在一段时间后真正使用这些资源的时候,相比一个完整的(返回200)的请求,可以更快地获得这些资源(返回304或者直接命中浏览器缓存)。 预加载在部分情况下有着十分重要的意义,特别是当确定某些资源用户在短时间内会使用,如分页列表的上一页和下一页、以及一些常用的LOGO之类的图片等。 预加载资源可能的方式 预加载的原理就是想办法发送一个HTTP请求,对响应的缓存等都由浏览器完成,因此一切有可能读取远程资源的方案都可以成为预加载资源的方案,大致有以下几类: 常规方式 使用<script>标签:<script type="other/prefetch"

JavaScript

二维数组转JSON格式字符串的思考

上周有一个同事求一函数,作用是将一个二维数组转换成JSON格式的字符串,其数据结构固定为数组-数组-整数,即要求的函数输入与输出如下: var array = [[10, 100, 1000], [1000, 100, 10]]; var s = encode(array); assert(s === '[[10,100,1000],[1000,100,10]]'); 函数的实现本身不难,但结果经过1小时的思考,函数有了好几个形态。 基本模式 首先是一个基本的将数组转成字符串的函数,由于数组中只有可能出现Array和Number两种类型,因此不需要额外处理Date、