使用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对比整理”

写好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代码重用及常见设计模式”

正则小贴士(匹配URL,中文等)

匹配中文:[\u4E00-\u9FD5] 点击这里获取官网中文编码表

 

匹配一段文本中的URL

这个是群里面有人提的问题,我也试试。确实写这个花了两天时间琢磨。需求大概是这样的:

待匹配的文本如:“匹配URLhttps://zhangxuefei.site以及zhangxuefei.tophttp://www.zhangxuefei.top以及zhangxuefei.top/a以及zhangxuefei.top/a/b.html以及zhangxuefei以及https://zhangxuefei.site/a以及https://zhangxuefei.site/a/b.html以及//zhangxuefei.top/a/b.htmlhttps://zhangxuefei.top/等等” 继续阅读“正则小贴士(匹配URL,中文等)”

通过嵌套形式的闭包保持对象状态以及对象扩展

javascript中的基础类型(primitive)和字面值(literal)的区别

基础类型有这5种:Number,String,Boolean,null,undefined

字面值:一个可以代表具体类型的值(基础类型中的一种)

创建字面值:var str1=”Hello World”; var num1=123; var flag1=true;

创建基础类型:var str2=String(“Hello World”); var num2=Number(123); var flag2=Boolean(true); 继续阅读“通过嵌套形式的闭包保持对象状态以及对象扩展”

JavaScript基础之十三(DOM)

Document Object Model(DOM)

window对象下有一个document属性来指向Document对象,这个对象是API集合(DOM)的核心对象。所以常常说的DOM指的就是一堆API的集合,用来呈现和操作document的内容。有一个需要理解并记住的部分:HTML里面的所有元素对应DOM里面的DOM节点树结构。与节点层级相关的重要属性如下:

parentNode,childNodes,firstChild,lastChild,nextSibling, previousSibling,nodeType,nodeValue,nodeName

注意一点,这里所有的对象都包含元素和文本节点,有一个例外就是parentNode(只指向元素节点或null),实际使用中往往只需要获取元素节点。 继续阅读“JavaScript基础之十三(DOM)”

JavaScript基础之十二(window对象)

window对象在浏览器端JavaScript程序中扮演了核心角色,window对象有些重要的属性和方法需要熟悉。

setTimeout/setInterval

过一段时间执行一次或重复执行,如果设置setTimeout(fun1,0),并不表示fun1会马上执行,仍然会先把fun1放入调用的队列,在当前事件处理函数执行完毕,经过0秒调用。代码说明: 继续阅读“JavaScript基础之十二(window对象)”

JavaScript基础之十一(浏览器中的JavaScript)

JavaScript的执行

分为2个阶段:①document加载完毕,javascript代码会至上而下执行  ②第一个阶段完成以后进入第二个阶段——事件驱动的异步阶段:这个阶段浏览器会调用事件处理函数(当然这些函数都是在第一个阶段里面的),响应发生的事件(例如点击等)。

 

浏览器中的JavaScript线程模型

JavaScript核心语言并不包含任何线程机制,线程机制是浏览器提供的,浏览器会分配一个线程给JavaScript程序。JavaScript是一个单线程的,单线程意味着更加简单:例如两个事件处理函数不能同时被触发执行,在一个document里面操作dom不会有并发问题,不用考虑锁啥的。 继续阅读“JavaScript基础之十一(浏览器中的JavaScript)”