admin 发布于 01月13, 2019

基于Puppeteer实现网页自动化操作

之前在文章《你有懒癌?我有WebDriver~》中用Webdriver实现了在网页中模拟人类登录以及操作DOM的功能。其中比较难搞的就是模拟登录,以及cookie的存储和写入。文章发出后很多读者表示期待puppeteer版本。

笔者最近终于抽空用puppeteer重写了这个脚本。没想到用puppeteer处理登录和cookie要简单得多。虽然笔者现在已经用不着这个脚本了,但是作为puppeteer的入门示例还是很好的。

先解释一下puppeteer的实现原理。puppeteer的意思是操纵木偶的人。顾名思义,它使用DevTools协议来操纵浏览器( Chromium或者Chrome),从而允许开发者用它提供的API编程,用来实现Node.js爬虫程序、有/无UI的网页自动化测试、前端监控、生成PDF文件等功能。

下面就看看如何用puppeteer实现网页自动登录和操作DOM的功能。

阅读全文 »

admin 发布于 12月18, 2018

Node.js定时邮件的那些事儿

基于Exchange Web Service 和 ThinkJS 实现定时发邮件功能。

最近开发一个项目,需要在Node.js程序里实现定期给管理员发邮件的功能。

笔者平时只会在Web界面收发邮件。对邮件的原理完全不懂(可能大学教过,然而全忘了),直到要解决这个问题。请教了几个业务的同事,得到的答复是:“你需要搭一个SMTP服务,还要装一个mail agent,巴拉巴拉……” 你们在说什么,我瞎了听不见……

听起来很复杂,有没有开箱即用的服务啊?一打听还真有。同事告知我司有提供Exchange服务。笔者的内心独白:“Exchange啊,我见过,跟outlook什么关系?”。好在最后还是在同事的帮助下,冰雪聪明的笔者实现了这个功能。踩了一些坑,记录一下,顺便复习一下基础知识。

阅读全文 »

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大显身手啦。

阅读全文 »