捉个小虫

  我是Chrome的忠实用户,而且此前也帮Chrome抓到了好几个小虫,并提交给了Google——当然了,他们FixBug说不定和我一点关系都没有,这也是很正常的。

  然后今天就又捉到了一只虫子。

  在浏览器中,载入javascript文件自然是使用script标签(动态加载也需要创建这货)。然后这个标签有一个defer属性(IE6及其同伙看到这里就可以关闭浏览器了,下面没你们什么事)。这个属性的作用,是告诉浏览器(Chrome、Firefox、Opera和IE10+,山寨货这里不考虑):我现在被加载,但在整个页面都加载完毕后才运行我里面的代码。

  这货配合async标签不错,异步加载,且等到整个界面都加载完成后再阅读,基本不会对HTML部分产生BLOCK——当然了,网络环境太渣就不考虑了。

  一般来说,当body的onload事件结束后,才会执行defer的script。多个defer的script也是按照他们的先后顺序来执行——如果使用了async标签,那么是script标签的加载结束顺序为真正的执行顺序,所以先后是不一定的——这个大家可以看webkit的resource管理源码,包括css、script和图片,都是这么一个流程——话说去年发现的webkit的一个bug就是在图片的resource的管理上出了问题,那个模块是三丧提供的,鄙视一个。

  有点扯远了,拉回来。

  这次抓到的Chrome的小虫,就是这个defer属性。

  按照正常流程,我只要页面加载了,那么script块就会运行——运行实际要么是加载完成时(没有defer),要么是整个页面加载完成时(设置了defer)。

  如果你写了一个页面,第一次加载的时候,的确是这样。

  每次按F5(或者执行window.location.reload()),也都是正常加载的。

  这些都很正常。

  但如果你进入新的页面然后按后退键返回(或者window.history.back()),此时你会惊喜地发现defer的代码块没有执行……

  有时,甚至是通过anchor标签超链接跳转到一个新页面,这个新页面defer了同样的script,它也会不执行。

  由于工作项目换了,所以没用GDB跟进去,但预估还是resource管理的问题,即Chrome的缓存机制将script都缓存了,导致defer没有接受到onload事件,所以也就不会在页面整体onload后执行defer的代码块——它压根就认为这些东西还没好呢。

  解决方法其实很简单,不用defer标签,将所有需要defer的script块都挪到整个页面的最后,就完了。

  当然,这个做法和defer还是有本质区别的,那就是defer是在script位置对文件加载,加载完成后再加载解析和渲染其后的内容;但如果你是把script搬到最后,那script加载就挪到了页面其它内容之后。考虑上加载时的网络环境很糟,可能就会发生页面已经显示了,但交互用的script还没OK的情况,从体验上来说就比defer要糟。

  当然,更常用的方法当然不会如此无脑,而是将script中的执行代码放在一个callback中,然后将这个callback放到最后运行,或者在body的onload中调用。

  此问题在Firefox中没有,算是Chrome特有吧——当然,Safari和Opera现在也是Webkit,但还没有测试这个问题。不排除是Chrome的Blink才有的问题。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容

  • 浏览器中script标签加载顺序是如何的呢?这个问题折腾了好几次了,之前弄清楚了以后,觉得做不做笔记的无关紧要,可...
    世事如烟_f411阅读 1,505评论 0 1
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 2,389评论 1 5
  • 本文总结一下浏览器在 javascript 的加载方式。关键词:异步加载(async loading),延迟加载(...
    4ea0af17fd67阅读 1,025评论 0 2
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,451评论 1 19
  • 亲爱的年轻人,你好: 我没法不这么打一句招呼,毕竟,你们都有可能是陪我走过那么一段路的人。 今天天气不错,窗外的流...
    文君1阅读 527评论 18 13