admin 发布于 11月01, 2018

一个小弹窗的故事

TLDR;

本文解决了一个问题:在浏览器中,一个URL只对应一个打开的弹窗,而且反复调出弹窗不会刷新页面。

大家在写前端应用的时候,应该都用window.open做过打开新窗口的功能。

笔者最近做的项目里,也有类似的功能。原先只需要用window.open(url)打开一个URL就可以了。有一天产品经理提需求:从网站任意地方弹窗打开一个URL,必须保证浏览器只为这个URL开一个窗口。

阅读全文 »

admin 发布于 10月29, 2018

精打细算浏览器空闲时间

有时候我们希望在浏览器中执行一些低优先级的任务,比如记录统计数据、做一些耗时的数据处理等,暂且将其称为后台任务。这些任务跟动画计算、合成帧、响应用户输入等高优先级的任务共享主线程。我们可能会面临这样的问题:正在执行的后台任务很耗时,会阻塞高优先级任务的执行,出现卡顿或者无响应的情况。

有同学提出建议:把后台任务拆分到最小的可执行块,将其放到间隔极短的setTimeout中异步执行。这样就不会阻塞主线程上其他任务啦。但是不停地将小任务发给事件循环会带来额外开销,而且实现起来也不优雅。

阅读全文 »

admin 发布于 10月21, 2018

法国里昂秋游记-10月20日

今天早上6点半就醒了,天还黑着。大概是作息改变,有点感冒,一直流鼻涕,鼻塞。喝了佳佳带的板蓝根颗粒,再喝了几杯热水,舒服多了。8点的时候天色变成深蓝,我们决定去酒店后面的公园走走。博文放弃了这次公园探险,选择了睡懒觉。

公园

两位同伴没有带跑鞋。我是跑鞋不离身的人,穿上了跑步装备,三人出发了。

公园名叫Parc de la Tête d'Or,Google Map翻译成金头公园。进入公园,发现花草上面都是露水,有种小时候放假在乡下家里的感觉。草木清香把我们包围。园林景观很棒。各种玫瑰、雏菊,还有不认识的花。有很多松树、枫树、梧桐等。公园里面小动物也很多,比如乌鸦、喜鹊、小鸽鸽、小凶许、小鸭鸭。还有小鸭鸭从我们面前踱步走过,激萌:

阅读全文 »

admin 发布于 10月21, 2018

法国里昂秋游记-10月19日

第一次来欧洲,是同事四人出差来里昂参加W3C的TPAC会议。

坐飞机

我们10月19日的凌晨12点半从北京首都国际机场出发,乘坐中国南航与KLM联运的大飞机到达荷兰阿姆斯特丹机场,然后再乘坐KLM的小飞机转机抵达里昂圣修伯利机场。

我们在大飞机上飞了10个小时,飞机提供了枕头和毯子(小枕头好评,救了我的颈椎)。每个座椅背后都有固定的小电视,存储了很多电影和音乐,还能实时查看到当前所在的位置。 睡到北京时间4点的时候,起来上厕所,喝水,看了一部《精灵旅社3》,听着电视里的音乐继续睡觉。庆幸自己带了降噪耳机,因为坐在靠近大涡轮的窗边,噪音特别大。睡觉和看电影的时候戴着耳机感受好很多。

阅读全文 »

admin 发布于 09月19, 2018

Prefetch和预加载实践

之前介绍了利用Preload优化首屏关键资源的加载。今天跟大家介绍另一个性能优化手段——Prefetch。文末会结合常见工具,教大家在项目中使用Preload和Prefetch。

跟Preload类似,Prefetch也是Link的一种关系类型值,用于提示浏览器提前加载资源。跟Preload不同,Prefetch指示的是下一次导航可能需要的资源。浏览器识别到Prefetch时,应该加载该资源(且不执行),等到真正请求相同资源时,就能够得到更快的响应。

它的使用方式与Preload类似:

  • 在HTML的<head>中:

    <link rel="prefetch" href="/library.js" as="script">

  • 通过JS动态插入:

    var hint = document.createElement("link");
    hint.rel = "prefetch";
    hint.as = "html";
    hint.href = "/article/part3.html";
    document.head.appendChild(hint);
    
  • 在HTTP头中:

    Link: <https://example.com/banner.jpg>; rel=prefetch; as=image;

Prefetch的兼容性如下:

跟Preload比起来,Prefetch的兼容范围更广。唯独在Safari上对Preload的支持度比Prefetch要好。

由于Preload和Prefetch两个小朋友的名字太像了,行为也十分相似。它们站在一起的时候,很多人傻傻分不清楚。下面来说一说它俩的区别:

阅读全文 »

admin 发布于 08月16, 2018

有一种优化,叫Preload

(本文更新时间2018-8-23)

今天给大家介绍一个性能优化利器:Preload。

背景

有时候为了提高网页初始加载的性能,我们会选择延迟一部分资源的加载和执行。

另一种情况是我们想要尽早加载资源,但是要等到合适的时机再执行。时机的影响因素包括依赖关系、执行条件、执行顺序等。

通常的做法是:

  • 通过插入一个页面元素来声明一个资源(比如img、script、link)。这种方式会将资源的加载和执行耦合

  • 用AJAX来加载资源。这种方式只有在时机成熟时才会加载资源,解决了执行时机问题。但是浏览器无法预解析,也就无法提前加载。另外如果页面有大量的阻塞脚本,就会造成延迟

有没有办法既提前加载资源,又能解耦加载和执行呢?这时候就轮到preload大显身手啦。

阅读全文 »

admin 发布于 07月23, 2018

你一定是闲得蛋疼才重构的吧

你一定是闲得蛋疼才重构的吧

随着“发布”进度条走到100%,重构的代码终于上线了。我露出了老母亲般的围笑……

最近看了一篇文章,叫《史上最烂的开发项目长啥样:苦撑12年,600多万行代码》,讲的是法国的一个软件项目,因为各种奇葩的原因,导致代码质量惨不忍睹,项目多年无法交付,最终还有公司领导入狱。里面有一些细节让人哭笑不得:一个右键响应事件需要花45分钟;读取700MB的数据,需要花7天时间。足见这个软件的性能有多糟心。

如果让笔者来接手这“坨”代码,内心早就飘过无数个敏感词。其实,笔者自己也维护着一套陈酿了将近7年的代码,随着后辈的添油加醋……哦不,添砖加瓦,功能逻辑日益复杂,代码也变得臃肿,维护起来步履维艰,性能也不尽如人意。终于有一天,我听见了内心的魔鬼在呼唤:“重构吧~~”

重构是一件磨人的事情,轻易使不得。好在兄弟们齐心协力,各方资源也配合到位。我们小步迭代了大半年,最后一鼓作气,终于完成了。今天跟大家分享一下这次重构的经验和收益。

挑战

此次重构的对象是一个大型单页应用。它实现了云端文件管理功能,共有10个路由页面,涉及文件上传、音视频播放、图片预览、套餐购买等几十个功能。前端使用QWrap、jQuery、RequireJS搭建,HTML使用PHP模板引擎Smarty编写。

阅读全文 »

admin 发布于 01月06, 2018

我的2017,谢谢你啦

2017年刚刚离开了我。前段时间看到了这张漫画:

alt

(图片来源:微博 @登登登Dn)

我想我应该专门写一篇文章来感谢陪我走过一段人生旅程的2017。

阅读全文 »

admin 发布于 10月13, 2017

越南秋游记(一)

(记录于2017年9月27日)

今天是正式在越南度假的第一天。早上6点半我俩就起床酒店到花园中心的露天泳池游泳。到泳池的时候空无一人。这是一个双层泳池,造型精致,池水清澈(没有“消毒水”的味道)。

alt

游了半小时,到餐厅吃自助早饭。鸡汤米粉(越南粉写作 phở,发音:/fʌ/,跟中文的“粉”很像)是我俩都很喜爱的一道早点,汤看上去很清澈,味道却特别浓郁鲜美,放了柠檬草,能闻到很清香的味道。餐厅的小姐姐们很美,走路时纤细的腰肢轻微地摆动,可惜没偷拍,就不放图了。

吃完早饭就穿着比基尼来到沙滩上。这里给各位打算去海边的童鞋们提个醒:如果想穿比基尼拍美美的照片,那么请不要下水游泳;如果想游泳,那就老老实实地穿长袖长裤(别问我为什么……)

阅读全文 »