代码改变世界

[置顶]简析hotjar录屏功能实现原理

2018-10-10 16:30 by JerremyZhang, 3572 阅读, 1 推荐, 收藏, 编辑
摘要:简析hotjar录屏功能实现原理 众所周知,hotjar中录屏功能是其重要的一个卖点,看着很牛X酷炫的样子,今天就简单的分析一下其可能实现(这里只根据其请求加上个人理解分析,并不代表hotjar中真实实现必然如此)的原理。 1、获取完整DOM内容 如果要实现完整的录屏功能,在客户端在没有客户允许的 阅读全文

[置顶]实现node端渲染图表的简单方案

2018-05-31 23:48 by JerremyZhang, 2388 阅读, 3 推荐, 收藏, 编辑
摘要:实现node端渲染图表的简单方案 这个题目有点小,本篇博客真正谈论的应该是服务端生成图表的简单方案,这里面有两个关键字:服务端 & 简单,我们知道基于js有很多的图表库,知名的如D3、echarts 、highcharts等等,对于做数据可视化方向的同学可能自己都做过此类chart的研发,无论从 阅读全文

如何阻止冒泡&&浏览器默认行为

2018-12-27 10:20 by JerremyZhang, 1564 阅读, 2 推荐, 收藏, 编辑
摘要:摘要 很多同学对阻止事件冒泡和阻止事件默认行为容易混淆,项目中因为一些原因也需要阻止浏览器的一些默认行为,这里就简单总结一下。 阻止事件冒泡 什么是事件冒泡这里就不再赘述了,网上的文章一大把,这里就简述一下如何阻止事件冒泡,阻止事件冒泡在使用浏览器原生API的情况下,是需要分情况考虑的,毕竟有个个性 阅读全文

超越Ctrl+S保存页面所有资源

2018-05-19 22:59 by JerremyZhang, 1765 阅读, 0 推荐, 收藏, 编辑
摘要:如何抓取页面所有内容 基本需求 抓取页面所有内容主要包括一下内容: 1. 页面内元素 页面元素包含服务端直接返回的元素,动态构建的元素 2. 页面内所有资源 页面所有资源包含本页面所在域资源以及第三方域资源,同主域的资源也认为第三方域资源,这种资源一般是以绝对路径的方式标识,同域下资源主要有 阅读全文

基于puppeteer模拟登录抓取页面

2018-05-08 19:49 by JerremyZhang, 9805 阅读, 0 推荐, 收藏, 编辑
摘要:关于热图 在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine) 上图中能很清晰的看到用户关注点在那,我们不关注产品中热图的功能如何,本篇文章就热图的实现做一下简单的分析和总结。 热图主流的实现方式 一般实现 阅读全文

基于puppeteer的网络拦截工具flyover

2018-05-04 12:35 by JerremyZhang, 2052 阅读, 0 推荐, 收藏, 编辑
摘要:为什么需要网络拦截工具 通常我们会遇到这样的场景: 1. 线上一个图片有异常,线下修正之后需要发布之前进行测试,有些情况下,QA同学有直接在线上环境测试的需求,只是链接本地资源,通常在windows下有一个很好的工具fiddler可以完成这个功能,当然mac下也有其对应的工具Charles,但是工具 阅读全文

使用Puppeteer抓取受限网站

2018-05-04 12:35 by JerremyZhang, 1995 阅读, 0 推荐, 收藏, 编辑
摘要:不要相信前端是安全的,今天简单验证一下,但是希望大家支持正版,支持原作者,毕竟写书不易。 安装Puppteer 选择目标网站 我们这里选择胡子大哈大神的网站 http://huziketang.mangojuice.top ; 爬取所有文章 基本思想思路 + 实现方案 爬取书籍目录 根据目录爬取没 阅读全文

Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】

2018-04-20 16:01 by JerremyZhang, 1307 阅读, 0 推荐, 收藏, 编辑
摘要:接上篇 防止重新渲染 其实说不对客户端代码做任何修改是忽悠人的。在我们的Express 应用中,通过Puppteer加载页面,提供给客户端响应,但是这个过程是有一些问题的。 js脚本在服务端的Headless Chrome 中执行过一次,但是等浏览器拿到真正的结果后,并不会阻止js再次执行,所以这种 阅读全文

Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】

2018-04-19 15:19 by JerremyZhang, 2017 阅读, 0 推荐, 收藏, 编辑
摘要:tips:Headless浏览器完全可以作为服务端渲染的一个替代方案,在服务端转化js 站点为静态html页面;在webserver 上运行Headless 浏览器完全可以预渲染现代js 模式的应用,增加响应速度,对SEO也更加友好 本篇涉及到的技术展示了如何通过Google Headless 框架 阅读全文

一步一步学习Vue(十三)

2018-04-19 14:00 by JerremyZhang, 891 阅读, 0 推荐, 收藏, 编辑
摘要:最近比较忙,忙着工作交接,忙着招人、忙着各种会,更新很少,这一篇也是作为本入门系列的最后一篇了,以后可能会写一些自己在前端这块的心得或者体会了,无关乎使用什么框架,可能就是原生的js、dom、编程模式或者框架相关,比如vue比如ng等等,入门篇虽然每一篇都写的比较粗糙,主要是因为我没有一个好的规划, 阅读全文