使用puppeteer爬取网页数据实践小结

简单介绍Puppeteer

Puppeteer是一个Node库,它通过DevTools协议提供高级API来控制Chrome或Chromium。Puppeteer默认以无头方式运行,但可以配置为有头方式运行。Puppeteer中文”木偶”,很贴切,它可以使用node程序来模拟人操作浏览器的行为,比如点击某个按钮等。

Puppeteer可以做什么

在浏览器中手动执行的大多数操作都可以使用Puppeteer完成!例如:

  • 生成页面的屏幕截图和PDF。
  • 抓取SPA(单页面应用程序)并生成预渲染内容(即“SSR”(服务器端渲染))。
  • 自动化表单提交,UI测试,键盘输入等。
  • 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
  • 捕获时间线跟踪 您的网站,以帮助诊断性能问题。
  • 测试Chrome扩展程序。

继续阅读“使用puppeteer爬取网页数据实践小结”

ECMAScript6新特性及ES5对比整理

这里整理ES6新特性以及跟ES5的对比用法

1.const 常量定义

const URL="https://zhangxuefei.site";

定义的常量不能被直接赋值修改,但是如果a=URL,那么a的值是可以修改的,如果PI是一个引用类型,那么对a的修改也会影响到URL

ES5定义如下:

Object.defineProperty(typeof global==="object"?global:window,"URL",{
 value:"https://zhangxuefei.site",
 enumerable:true,
 writable:false, //不能赋值
 configurable:false //不能delete
 });

 URL=2;
 console.log(URL);//https://zhangxuefei.site

继续阅读“ECMAScript6新特性及ES5对比整理”

zepto.js源码小摘抄

这里我不是要去解读源码,是在看zepto源码的过程中,把我觉得有用的地方记录下来,毕竟zepto直接面向了现代浏览器,够轻量,够高效。就像读了一篇非常优秀文章,写点摘要吧!

1.命名规范:构造函数pascal命名,变量驼峰,正则已RE结尾

2.声明一个emptyArray = [],在使用数组原型上的方法时,用变量代替[](相当于new Array()),提高了性能。

3.判断是否为数组方法

isArray = Array.isArray || function(object){ return object instanceof Array }

继续阅读“zepto.js源码小摘抄”

写好js代码DOM和浏览器模式

写高效js代码的一些最佳实践:分解关注点。HTML:内容构建  CSS:样式呈现  JavaScript:行为交互。DOM操作是非常耗性能的,尽量遵循以下原则:

DOM访问遵循:①避免在循环里面访问DOM  ②把DOM元素引用赋值给一个局部变量来使用  ③使用选择器API()  ④缓存HTML元素的length

DOM操作遵循:DOM增删改操作会触发浏览器重绘(渲染)和回流(布局),尽量批量操作,构建大的DOM树,先在内存构建好了在添加。 继续阅读“写好js代码DOM和浏览器模式”

写好js代码重用及常见设计模式

谈到代码重用,首先想到的就是继承,GoF有这样的建议:对象组合优于继承。js继承通过原型来实现,基本实现如:function inherit(C,P){C.prototype=new P();}

或function inherit(C,P){var F=function(){};F.prototype=P.prototype;C.prototype=new F();} 继续阅读“写好js代码重用及常见设计模式”

涉猎ECMAScript6(ES6/ES2015)Promise(异步流控制)

Promise不是用来取代回调的,而是管理回调函数,增强代码的可读性。另一种理解Promises是一个事件监听器,我们可以注册一个监听函数,在任务执行完时通知我。只是这些事件只触发一次。Promise能够把这些异步任务链接到一起,提供一套异步流控制的机制。Promise仅仅有两种可能的结果:满足或拒绝(fulfilled or rejected),只能被resolved(fulfilled or rejected)一次,一次执行完以后就不能再改变。 继续阅读“涉猎ECMAScript6(ES6/ES2015)Promise(异步流控制)”

涉猎ECMAScript6(ES6/ES2015)模块化

能够写js代码是一回事,能够有效的把代码组织好,改善代码的可读性和易理解就是另外一回事了。ES6提供了模块化的方式来书写代码。传统的代码模块化编写的方式基于闭包,外层函数通过内部的变量或对象返回内部的函数。像这样:

继续阅读“涉猎ECMAScript6(ES6/ES2015)模块化”