Author Archives: yuanxujia

Headless Chrome

无界面浏览器

A headless browser is a web browser without a graphical user interface.Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command-line interface or using network communication.

说白了就是没有界面的浏览器,多用于web测试、截图,爬虫,监控性能等

有哪些?

  • Headless Chrome
  • PhantomJS
  • SlimerJS
  • HtmlUnit
  • TrifleJS
  • Splash

为什么要学习Headless Chrome

目前团队中在使用PhantomJS,存在如下问题:

  • 使用老版本webkit,不支持新的web标准,与真实浏览器有差异
  • 项目的主要开发者停止维护了
  • 目前的PhantomJS仍旧有很多bug尚未修复

对比Headless Chrome的优势

  • 支持现代web标准、技术,支持新语法
  • 版本能自动更新
  • 由谷歌官方Chronium团队维护

NodeJS相关插件

  • Puppeter – NodeJS API
  • chrome-remote-interface

资料

关于跨域 – options请求

 

跨域请求在使用POST方法向服务器发送数据时,如果Content-Type使用application/x-www-form-urlencoded、multipart/form-data或text/plain之外编码格式会由普通请求变为Preflighted请求。另外使用自定头时也会变为Preflighted请求。

Preflighted 请求与简单请求不同,Preflighted 请求首先会向服务器发送一个Options请求,以验证是否对指定服务有访问权限,之后再发送实际的请求。

当HTTP请求出现以下两种情况时,浏览器认为是简单跨域请求:

  1. 请求方法是GET、HEAD或者POST,并且当请求方法是POST时,Content-Type必须是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一个值。
  2. 请求中没有自定义HTTP头部。

对于简单跨域请求,浏览器要做的就是在HTTP请求中添加Origin Header,将JavaScript脚本所在域填充进去,向其他域的服务器请求资源。服务器端收到一个简单跨域请求后,根据资源权限配置,在响应头中添加Access-Control-Allow-Origin Header。浏览器收到响应后,查看Access-Control-Allow-Origin Header,如果当前域已经得到授权,则将结果返回给JavaScript。否则浏览器忽略此次响应。

以下是CORS协议规定的HTTP头,用来进行浏览器发起跨域资源请求时进行协商:

  1. Origin。HTTP请求头,任何涉及CORS的请求都必需携带。
  2. Access-Control-Request-Method。HTTP请求头,在带预检(Preflighted)的跨域请求中用来表示真实请求的方法。
  3. Access-Control-Request-Headers。HTTP请求头,在带预检(Preflighted)的跨域请求中用来表示真实请求的自定义Header列表。
  4. Access-Control-Allow-Origin。HTTP响应头,指定服务器端允许进行跨域资源访问的来源域。可以用通配符*表示允许任何域的JavaScript访问资源,但是在响应一个携带身份信息(Credential)的HTTP请求时,Access-Control-Allow-Origin必需指定具体的域,不能用通配符。
  5. Access-Control-Allow-Methods。HTTP响应头,指定服务器允许进行跨域资源访问的请求方法列表,一般用在响应预检请求上。
  6. Access-Control-Allow-Headers。HTTP响应头,指定服务器允许进行跨域资源访问的请求头列表,一般用在响应预检请求上。
  7. Access-Control-Max-Age。HTTP响应头,用在响应预检请求上,表示本次预检响应的有效时间。在此时间内,浏览器都可以根据此次协商结果决定是否有必要直接发送真实请求,而无需再次发送预检请求。
  8. Access-Control-Allow-Credentials。HTTP响应头,凡是浏览器请求中携带了身份信息,而响应头中没有返回Access-Control-Allow-Credentials: true的,浏览器都会忽略此次响应。

所以服务端推荐设置:

区块链开源项目

比特币

全球使用最广泛,真正意义上的去中心化区块链技术。

开源地址:https://github.com/bitcoin/bitcoin

以太坊

图灵完备的区块链一站式开发平台,采用多种编程语言实现协议,并利用Go语言编写的默认客户端。

开源地址:https://github.com/ethereum

IBM HyperLedger fabric

带有可插入各种功能模块架构的区块链实施方案,目的打造成一个由全社会来共同维护的一个超级账本。

开源地址:https://github.com/hyperledger/fabric

比特股BitShare

区块链里程碑产品之一,是完整度最高,功能最丰富,性能最强大的区块链产品之一;核心技术结构采用C++语言编写。

开源地址:https://github.com/bitshares

公证通Factom

利用比特币的区块链技术革新商业社会和政府部门的数据管理的数据记录方式,被理解为不可撤销的发布系统。

开源地址:https://github.com/FactomProject/FactomCode

瑞波Ripple

世界上第一个开放式支付网络,是基于区块链的点对点全球支付网络。

开源地址:https://github.com/ripple/rippled

未来币NXT

第二代去中心化虚拟货币,使用全新代码编写,非比特币的山寨币,技术架构采用JAVA编写。

开源地址:https://bitbucket.org/JeanLucPicard/nxt/overview

CSS揭秘读书笔记(1,2章)

CSS 揭秘阅读

第一章

  • 1.2 css编码技巧
    • 尽量减少代码重复
      • DRY
      • line-height:1.5 - 表示基于font-size的1.5倍数关系
    • 易维护性
      • 集合属性拆分成独立属性来写,例如’border-width: 10px 10px 10px 0′ -> ‘border-width: 10px; border-left-width: 0px;’
      • currentColor是个真正的css变量
      • 继承 inherit
    • 响应式网页设计
      • Meida Query 会增加成本
        • 断点不应该由具体的设备来决定,应该根据设计自身来决定
        • 使用百分比长度取代固定长度
        • 在较大分辨率下时,使用max-width取代width
        • img、object、video 设置max-widht:100%
        • 铺满背景的的图片,使用background-size: cover - 注意图片尺寸权衡
        • 元素行列式布局,推荐使用flexbox或者display:inline-block
    • 合理使用简写
      • 例如backgroundbackground-color
    • 权衡使用预处理器
      • 预处理的缺点
        • CSS的文件体积和复杂度可能会失控
        • 调试难度增加(不过有sorucemap,就方便了)
        • 有编译时间消耗
        • 学习成本
        • 抽象泄露法则:所有重大的抽象机制在某种程度上都存在泄露的情况.

第二章 – 背景与边框

  • 1 半透明边框
    • 半透明颜色: rgba() 和 hsla()
    • background-clip: 设置元素的背景(背景图片或颜色)是否延伸到边框下面
      • 默认值: border-box
      • padding-box: 边框下面没有背景,即背景延伸到内边距外沿。
      • content-box: 背景裁剪到内容区 (content-box) 外沿。
  • 2 多重边框
    • 古老方式是使用border-image 或者 hack用多个元素模拟边框
    • box-shadow
      • 支持第四个参数: box-shadow: 0 0 0 10px #655
      • 支持逗号分隔语法,可以创建任意数量的投影,效果是蹭蹭叠加的
      • 注意事项
        • 投影的行为跟边框不完全一致,不影响布局,不收box-sizing影响
        • 不响应鼠标事件,内阴影可以
    • outline
      • 可以实现虚线
      • outline-offset可以控制跟元素边缘的间距,可以为负值
      • 不会贴合border-radius产生的圆角
  • 3 灵活的背景定位
    • background-position的扩展
      • background-position: right 20px bottom 10px;
      • 回退方案: background: url() bottom right #58a;
    • background-origin
      • 默认值:padding box
    • calc()
      • 可以进行继续并进行偏移

内嵌页面分享降级处理

现状

app内嵌页分2中形态:

  • 一种简单的呈现大部分是说明页、简单活动页、结果页
  • 另外一种是SPA的业务线

SPA型页面因为业务会跟Native进行交互或者通信会通过Bridge进行交互

降级处理点

下面详细说一下有哪些功能点需要降级处理

  • APP Name

    不同APP中嵌入的页面可能会有区别,目前钱包(conch)跟美团(group)的业务表现应该是一样的

  • 导航条
    • 导航条的显示跟隐藏处理
    • 导航条右上角按钮处理
  • KNB相关
    • 设置标题时同时也设置document.title
    • closeWebView降级处理为history.back
    • openWebView降级处理为location.href=url
  • 业务相关注意点
    • 距离信息依赖于地理位置,所以分享出去的页面无法显示距离信息
    • 目前i版页面不支持H5地图

关于分享组件开发的思考

页面分享后被分享的页面底部需要显示下载App提示,考虑到多个页面使用,需要抽离成share-card组件,编码时考虑了2中调用方式:

2种不同方式调用,ShareCard的是想方式也是不同

以JS方式调用,可以将组件以单例模式处理,并且可以在任意时刻创建组件并展示,不过组件的控制需要额外去实现方法

以HTML声明式调用,可以放在任意布局位置,比JS方式更灵活,组件的显示跟隐藏可以通过调用组件的v-if或者v-show控制

学习月报2017-08

2017-08

第一周

第二周

第三周

第四周

Vim简介入门

###简介

Vim 是一个功能强大、高度可定制的高级文本编辑器,她提供了Unix下编辑器 ‘Vi’ 的功能并对其进行了完善。

###基础

  • 模式
  • 编辑模式, 俗称vim模式
  • 插入模式
  • 命令模式
  • 切换模式
  • 进入vim模式:默认键是ESC
  • 进入插入模式(有如下几个按键):
    • i - 当前位置插入
    • s - 删除当前字符并插入
    • a - 光标位置后面插入
    • x - 剪贴当前字符并插入
    • o - 向下新建一行
    • O - 向上新建一行
  • 进入命令模式: 使用: 冒号
  • 基本移动
  • H – 向前一个字符移动
  • J – 向下一行移动
  • K – 向上一行移动
  • L – 向后一个字符移动
  • 快速移动
  • e - 以单词为单位向后移动
  • w - 以句子为单位向后移动
  • b - 以单词为单位向前移动
  • $ - 移动到行尾
  • ^ - 移动到行首
  • n<h,j,k,l> - n表示数字

    例如: 10j - 向下移动10行

    例如: 8h - 向前移动8位

  • gg - 回到页面首行
  • shift + g - 移动到页面最后一行
  • shift + h - 移动到当前可视范围的第一行
  • shift + m - 移动到当前可视范围的中间位置
  • shift + l - 移动到当前可视范围的最后一行
  • :n - 移动到第n行,n是数字
  • 搜索

    在编辑模式下,按/后输入想要查找的字符串,然后按’enter’键。n向下继续搜索,N向上搜索

  • 选中
  • v
  • 删除
  • dd - 删除当前行
  • dw - 删除光标右侧的单词
  • db - 删除光标左侧的单词
  • x - 删除当前光标所在的字符
  • ra - 用字符 a 替换当前字符
  • d10j - 向下删除10行, d5k - 向上删除5行
  • 3dd - 向下删除3行
  • d4h - 向前删除4个字符
  • 替换
  • S - 大写S 删除当前行,并进入插入模式;
  • cw - 删除右边的单词,并进入插入模式
  • cd - 删除当前行,并进入插入模式
  • 复制 & 黏贴
  • yy - 复制一整行
  • p - 黏贴
  • 撤销 & 重复
  • u - 撤销刚才的命令
  • . - 重复上一次命令
  • 键盘图示

图示

资料

学习月报2017-07

第一周

第二周

第三周

第四周

HTTP2 知识要点

发展历程

  1. HTTP1.0
  2. HTTP1.1
  3. SPDY (用于增强HTTP)
  4. HTTP2

HTTP2中具体变化

二进制

  • HTTP/2数据通信的最小单位。

  • 消息

    指 HTTP/2 中逻辑上的 HTTP 消息。例如请求和响应等,消息由一个或多个帧组成。

  • 存在于连接中的一个虚拟通道。流可以承载双向消息,每个流都有一个唯一的整数ID。

HTTP/2 采用二进制格式传输数据,而非 HTTP 1.x 的文本格式,二进制协议解析起来更高效。

多路复用的流

多路复用,代替原来的序列和阻塞机制。所有就是请求的都是通过一个 TCP连接并发完成。HTTP 1.x 中,如果想并发多个请求,必须使用多个 TCP 链接,且浏览器为了控制资源,还会对单个域名有 6-8 的个数限制

优先级和依赖性

每个流都包含一个优先级(也就是“权重”),它被用来告诉对端哪个流更重要。当资源有限的时候,服务器会根据优先级来选择应该先发送哪些流。

头部压缩

HTTP/2对消息头采用HPACK(专为http2头部设计的压缩格式)进行压缩传输,能够节省消息头占用的网络的流量。而HTTP/1.x每次请求,都会携带大量冗余头信息,浪费了很多带宽资源。

重置

HTTP 1.1的有一个缺点是:当一个含有确切值的Content-Length的HTTP消息被送出之后,你就很难中断它了。当然,通常你可以断开整个TCP链接(但也不总是可以这样),但这样导致的代价就是需要通过三次握手来重新建立一个新的TCP连接。

一个更好的方案是只终止当前传输的消息并重新发送一个新的。在http2里面,我们可以通过发送RST_STREAM帧来实现这种需求,从而避免浪费带宽和中断已有的连接。

服务器推送

服务端可以主动推送,客户端也有权利选择接收与否.当一个客户端请求资源X,而服务器知道它很可能也需要资源Z的情况下,服务器可以在客户端发送请求前,主动将资源Z推送给客户端。这个功能帮助客户端将Z放进缓存以备将来之需。

如果服务端推送的资源已经被浏览器缓存过,浏览器可以通过发送RST_STREAM帧来拒收。主动推送也遵守同源策略,服务器不会随便推送第三方资源给客户端。

扩展

资料

微信小程序开发经验总结

经验

wxml

  • 允许使用html标签,但会被当做inline标签,不支持所有属性
  • view组件上有hidden属性,可以直接使用表达式控制元素显示隐藏
  • 在合适的地方实用scroll-view组件
  • wx:if条件变话会导致组件重复渲染,没有wx:show指令
  • 大量文案显示使用text组件
  • 处理图文混合的技巧,图文分离重新生成imagetext组件
  • scroll-view的scroll-to-view属性值为字符串,纯数字不行

js

  • App的生命周期函数Page的生命周期函数不一样
  • JS 的运行环境和view的运行环境是隔离的,只能通过’page.data’属性传递数据,不可传递函数引用
  • 资源加载,注意目录,针对JS推荐使用module.exports导出
  • 跨页面通信
    • 将数据挂载到全局App对象上
    • 利用一个全局对象进行中转

wxss

  • 选择器: id, class, 元素,子父级,伪类(after,before)
  • 推荐使用rpx作为单位,取代px
  • 不支持引入字体,icon只能使用图片
  • 图片资源不建议放在本地,放在远程更好,有助于减少项目大小
  • pages下的wxss会覆盖app.wxss的同名样式,不是样式合并!!
  • @import 注意文件目录

其他资料