解决Safari ( WKWebview ) 返回后页面不刷新的问题

写在前面:此文很早之前就写好了,但是因为篇幅较短,一直安静地躺在草稿箱里。。。今天把它发出来吧 这几天在调微信 WKWebview 内核的问题,真的是好蛋疼啊。 发现一个问题,当我点击左上角的返回按钮,或者安卓上点击后退的时候,发生了两个不可思议的事情: 页面没有刷新,而是直接读取的缓存。 页面上绑定在window上的事件莫名其妙的消失了(例如onscroll) 这个时候,肯定就很自然的联想到了可能是微信内核引起的,二微信此次换内核,更换成的是苹果的 WKWebview 内核。Safari很早之前就使用了这个内核,而且微信官方明确表示,更换后,将和Safari 表现出高度的相似性。 所以这个问题就被我当成了 Safari的bug去搜,果然,最终解决办法如下: 首先,我们需要判定它是 iPhone、iPad或者Safari 的一种,然后针对他们进行特殊处理。 window.onpagesho […]

关于IOS设备window.onscroll滚动条滚动事件不触发的问题

写在前面:此文很久之前就写好了,一直没发。当时是微信正在统一的更换 WKwebview 内核。正常的 UIwebview 不会出现这个问题,于是定位成 Safari 的通病。 这两天遇到一个奇葩事,在ios设备上,为了节约设备事件开销,window.onscroll 触发频率极低,只在停止滚动或页面回到顶部、底部才触发,有时甚至不触发。。。 后来去google了这方面的文章,几乎都说用 touchmove 代替 scroll,但是这有一个问题,就是 touchmove 的触发频率依旧不如 scroll 的频率高,当然最重要的问题是,当 touchmove 结束的时候,ios 的页面具有一个类似于惯性的滑动特性,此时发生的滚动,既不能被 window.onscroll 捕获,也不不会执行 touchmove 的代码,甚是蛋疼。 再次,我查到了很多文章说,从 ios8.0 之后苹果放开了 sc […]

WebAssembly 是什么?他的原理和未来前景是怎样的?

生动形象地介绍 WebAssembly 你可能已经听说过,WebAssembly 执行的更快。但是 WebAssembly 为什么执行的更快呢? 在这个系列文章中,我会为你解释这一点。 等等,什么是 WebAssembly? WebAssembly 是除了 JavaScript 以外,另一种可以在浏览器中执行的编程语言。所以当人们说 WebAssembly 更快的时候,一般来讲是与 JavaScript 相比而言的。 我不会暗示大家开发时对二者的选择——或者选择 WebAssembly,或者选择 JavaScript。实际上,我们更希望在同一个工程中,两个你同时使用。 对二者的比较倒是非常有必要的,这样你就可以了解到 WebAssembly 所拥有的独特特性。 一些关于性能的历史 JavaScript 于 1995 年问世,它的设计初衷并不是为了执行起来快,在前 10 个年头,它的执行速度 […]

Node学习笔记-Node中的模块机制

之后会发表一系列的学习笔记,Node 系列的学习笔记是基于我在阅读 朴灵所著《深入浅出 Nodejs》一书的学习总结和札记。这是第一篇。 通过阅读本文章,你可以了解到: 三个重要的 JS 模块规范:CommonJS 规范、AMD 规范和 CMD 规范 Node 的模块加载机制 Node 中的内建模块、核心模块、文件模块和 C/C++ 扩展模块 Node 中的包与 NPM 三个重要的 JS 模块规范 为什么要制定 CommonJS 规范? 因为官方的规范(ECMAScript)所规范的范围太小,这些规范内只提及了最基本的一些要素:词法、类型、上下文、表达式、声明、方法、对象等规范。虽然现在已经流行起了 HTML5,但是html5 仅仅是 W3C 组织针对浏览器端的规范,对于后端 javascript 来说,仍然相对薄弱,或者说,对于JavaScript 本身来说,它依旧是薄弱的。具体缺陷如: […]

新技术栈之-SASS全指南

没错,最近发文的频率提高了,主要是因为最近公司部门正在进行新技术栈的变革,从 backbone + marionette 的框架变身为 webpack + react + redux 的框架,其中拥有诸多变革,包括全版本 ES6 的推荐支持和 sass 等流行框架的运用。个人也在学习当中,学习的同时,就会把过程总结和发表出来,大家一起交流和学习。 今天带来的是 sass 的相关内容,是我对 sass 官方文档的理解和重点知识的整理。废话不多说,现在就开始吧。 sass基础 Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本,这份参考资料使用的就是此语法。 也就是说,所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外,SCSS 理解大多数 CSS hacks 以及浏览器专属语法,例如IE 古老的 filter […]

从头复习-ES6必知必会

一、let和const 01.块级作用域 for循环的计数器,就很合适使用let命令。 另外,for循环还有一个特别之处,就是循环语句部分是一个父作用域,而循环体内部是一个单独的子作用域。 为什么需要块级作用域? ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。 内层变量可能会覆盖外层变量。 用来计数的循环变量泄露为全局变量。 02.无变量提升 变量一定要在声明后使用,否则报错。 03.暂时性死区 只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。 (temporal dead zone,简称 TDZ) 04.禁止重复声明 05.const命令 一旦声明,常量的值就不能改变。 只声明不赋值,就会报错。 ES6一共有6种声明变量的方法:var、function、let、const、import、class 06.顶 […]

我也来谈谈前端的XSS攻击

其实任何项目只要做到中期,都会开始考虑安全性的问题,当然,有前瞻的设计师会在项目建立初期就考虑项目的安全性。其中前端谈到最多的就是 XSS 攻击了,其实看看能够在前端考虑解决的似乎也只有 XSS 攻击。 很多前端对 XSS 攻击有误解(当然也有可能是全世界都没有误解,只有我错了),甚至有很多前端根本不知道什么是 XSS 攻击,还有一些则认为 XSS 的预防与前端没有任何关系。至于最后这个观点,考虑到最后,其实我是赞同的,因为你永远无法通过代码可见的前端来预防别有心机的人。但是这并不意味着我们在这件事情上妥协(没错我们还能临死前挣扎一下)。 那么,什么是 XSS 攻击勒? XSS 跨站脚本攻击(Cross Site Scripting),是一种向目标浏览器内注入指定 html 或 js, 目标在访问页面的时候,会同时执行这些恶意代码,从而进行危害使用者的行为,例如欺骗session、向指定地 […]

秋天的味道,家的味道。

十一大学的哥们结婚,没能回家,折折腾腾两三天,终于是把事办成了,合法了。
祝福你啊@王蒙蒙 & @李萌萌,早点种蘑菇哈!我等着当干爹!
回来北京,送走哥们,走在路上突然就感觉到这不知不觉间已经秋天了。
北京的秋天太短了,短到来没来得及感受 ,他就即将溜走。
我能感觉到秋天的气息从鼻子到咽喉再到肺,满满的都是旧时的时光。

git 删除远程分支

每个迭代都会在项目里新建一个分支,时间久了项目里的分支简直不堪入目: 那么如何把这些没用的分支删除呢? 例如你要删除hooper分支,则运行下方代码: 实际上,我们是对远程push 了一个空的同名分支,覆盖了当前的分支,起到了删除分支的作用。

HTML5 手势检测原理和实现

关于作者 周林,github,陆金所前端程序员,专注 Hybrid APP 性能优化和新技术探索。欢迎任何形式的提问和讨论。 前言 随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提供开箱即用的手势系统,但是提供了更底层一些的对 touch 事件的监听。基于此,我们可以做出自己的手势库。 手势 常用的 HTML5 手势可以分为两类,单点手势和两点手势。单点手势有 tap(单击),double tap(双击),long tap(长按),swipe(挥),move(移动)。两点手势有 pinch(缩放),rotate(旋转)。 接下来我们实现一个检测这些手势的 js 库,并利用这个手势库做出炫酷的交互效果。 移动 关于移动手势检测我们在这篇博文中做过详细介 […]