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ʌ/,跟中文的“粉”很像)是我俩都很喜爱的一道早点,汤看上去很清澈,味道却特别浓郁鲜美,放了柠檬草,能闻到很清香的味道。餐厅的小姐姐们很美,走路时纤细的腰肢轻微地摆动,可惜没偷拍,就不放图了。

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

阅读全文 »

admin 发布于 09月06, 2017

欢迎使用 Firekylin

这是程序自动发布的文章。如果您看到这篇文章,表示您的 Blog 已经安装成功!

如果您对 Firekylin 不是很熟悉,可以先阅读以下常用操作了解一下。

阅读全文 »

admin 发布于 08月17, 2017

Promise读书笔记(一)

Promise是什么?

打个比方:在M记点一个汉堡,收银员给了一张带有订单号的收据,这个收据就是Promise,它向我保证我在未来能够用这个收据换一个汉堡。在这个过程中我可以做别的事情。在Promise世界里,等待一段时间后,会有三种结果:

  • 服务员叫号,我拿到了汉堡。这叫做“完成”(fulfilled)
  • 服务员叫号,告诉我汉堡卖完了。这叫做“拒绝”(rejected)
  • 还没有叫号,可能永远都不会被叫到。这叫做“未决议”(pending)

阅读全文 »

admin 发布于 06月05, 2017

eslint报错导致编译失败

在编译vue项目的时候,eslint报错导致访问页面出错

alt

观察error信息,发现有如下报错: quotes

no-new

可以看出由于在JS中使用了双引号字符串,以及new一个对象却不赋值给变量,导致了eslint报错。 但是必须保留这种写法。因此修改.eslintrc.js文件,在rules中添加以下规则:

'rules': {
    // …
    'no-new': 0,
    'quotes': ['warn']
  }

再次运行,即可正常加载页面。

结论:

  1. eslint的error会导致程序退出。进而影响编译。所以要尽可能将error改为warn。
  2. 修改.eslintrc.js文件中的rules能够添加规则。

参考:

  1. Configuring Rules

阅读全文 »