前端小作坊

24 篇文章
13 人订阅

全部文章

mmzhou

腾讯 · 高级前端工程师 (已认证)

CSS动画的性能优化

在Web页面中使用动画效果已经不是什么稀奇的事情了。但凡优秀的UI界面都会有一些点缀用的动画效果。举个例子,Stripe Checkout小组通过UI动画效果来...

552
mmzhou

腾讯 · 高级前端工程师 (已认证)

Javascript 原型链

本来想写一篇“如何用JS实现面向对象”,发现自己对prototype原型链还是有很多的不理解的地方。先看一张原型链关系图:

791
mmzhou

腾讯 · 高级前端工程师 (已认证)

CSS animation和transition的性能探究

你可能已经在你的项目中用上了CSS Animation和CSS transition。如果还没有用上,那你有点out了。快去看下CSS-Trick上的这两篇关于...

581
mmzhou

腾讯 · 高级前端工程师 (已认证)

CSS硬件加速的好与坏

每个人都痴迷于60桢每秒的顺滑动画。为了实现这个顺滑体验现在用的最流行的一个做法就是使用『CSS硬件加速』。在一些极端例子中,强制使用translate3d意味...

772
mmzhou

腾讯 · 高级前端工程师 (已认证)

第三方Javascript开发系列之投放代码

本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起:Google Analytics(以下简称GA),是Google提供的...

792
mmzhou

腾讯 · 高级前端工程师 (已认证)

iOS 5 Mobile Safari中label的bug

前几天在codepen上看到了不错CSS用法,今天打算在写新博客的时候使用类似的思路:

642
mmzhou

腾讯 · 高级前端工程师 (已认证)

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

752
mmzhou

腾讯 · 高级前端工程师 (已认证)

CSS Counters

CSS Counters是一个很有意思的特性,它配合 content 属性和伪元素可以实现自动编号的效果。它是CSS2.1提出的标准,主流浏览器对它的支持很好,...

722
mmzhou

腾讯 · 高级前端工程师 (已认证)

中文排版二三事

前段时间一直在折腾中文排版相关的事情,自认为结果还算不错。故开源之,即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库,可以用来快速搭建中文博...

731
mmzhou

腾讯 · 高级前端工程师 (已认证)

浏览器的overflow事件

Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:

661
mmzhou

腾讯 · 高级前端工程师 (已认证)

Permissions API

如果你以前使用过Geolocation API,那么你很可能希望可以检查自己是否有权限来使用Geolocation API并且不展示确认框。这个简单的愿望目前是...

822
mmzhou

腾讯 · 高级前端工程师 (已认证)

原型链上的DOM Attributes

Chrome开发小组最近发表声明他们正在將DOM properties移动到原型链中。这个更新将会在Chrome 43(2015年4月发布beta版本)中实现。...

963
mmzhou

腾讯 · 高级前端工程师 (已认证)

CSS vs JS动画:谁更快?

Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

1432
mmzhou

腾讯 · 高级前端工程师 (已认证)

加载第三方JS的各种姿势

如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲...

1091
mmzhou

腾讯 · 高级前端工程师 (已认证)

GA源代码里的小技巧之preview和prerender

Safari浏览器有个Top site功能,它会展示最长访问的几个页面的截图。示例如下:

843
mmzhou

腾讯 · 高级前端工程师 (已认证)

GA源代码里的小技巧之cookie篇

cookie的本质是存储在浏览器端的一段简单数据(多个键值对),浏览器会从服务器接受或者发送给服务器cookie。这样便可以为没有状态的HTTP协议提供了记录状...

1234
mmzhou

腾讯 · 高级前端工程师 (已认证)

ECMAScript 6之WeakMap

ECMAScript 6中加入了很多新的特性,其中有一个有用的API:WeakMap。Nicholas的博文做了详细的介绍。这也是一篇关于WeakMap的笔记。

852
mmzhou

腾讯 · 高级前端工程师 (已认证)

网页上的复制与剪切

IE 10及以上的版本修改了Document.execCommand()方法,增加了对剪切和复制的支持。Chrome从43版本开始也支持了这项特性。

872
mmzhou

腾讯 · 高级前端工程师 (已认证)

watch.js 源码解读

用麻雀虽小五脏俱全来描述Watch.js比较合适。“观察者”模式是我们在开发的时候经常需要用到的。使用Watch.js那么我们就可以实现在“每当对象属性改变的时...

911
mmzhou

腾讯 · 高级前端工程师 (已认证)

GA源代码里的小技巧之Beacon请求

GA监控脚本一般都放在开发者的网页上。域名往往和Google不一样,这样发送请求到Google服务器的时候会涉及到跨域。普通的Ajax请求是做不到的,通常称这种...

741

扫码关注云+社区