首页
学习
活动
专区
工具
TVP
发布

前端小作坊

专栏作者
24
文章
29267
阅读量
13
订阅数
CSS动画的性能优化
在Web页面中使用动画效果已经不是什么稀奇的事情了。但凡优秀的UI界面都会有一些点缀用的动画效果。举个例子,Stripe Checkout小组通过UI动画效果来增强支付体验。
mmzhou
2018-08-06
1.7K0
Javascript 原型链
本来想写一篇“如何用JS实现面向对象”,发现自己对prototype原型链还是有很多的不理解的地方。先看一张原型链关系图:
mmzhou
2018-08-06
5330
CSS animation和transition的性能探究
你可能已经在你的项目中用上了CSS Animation和CSS transition。如果还没有用上,那你有点out了。快去看下CSS-Trick上的这两篇关于animation和transition的文章。你在使用中一定发现了有些动画很流畅,而有些则很卡。为什么呢?
mmzhou
2018-08-06
1.3K0
CSS硬件加速的好与坏
每个人都痴迷于60桢每秒的顺滑动画。为了实现这个顺滑体验现在用的最流行的一个做法就是使用『CSS硬件加速』。在一些极端例子中,强制使用translate3d意味着大大提高应用程序的性能。
mmzhou
2018-08-06
1K0
第三方Javascript开发系列之投放代码
本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起:Google Analytics(以下简称GA),是Google提供的用于网站监测等一系列功能的服务。网站开发者将GA提供的投放代码放到自己网站上需要监测的页面(一般是全站添加)。
mmzhou
2018-08-06
9330
iOS 5 Mobile Safari中label的bug
前几天在codepen上看到了不错CSS用法,今天打算在写新博客的时候使用类似的思路:
mmzhou
2018-08-06
6400
CSS3着重符及其fallback
在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:
mmzhou
2018-08-06
1.7K0
CSS Counters
CSS Counters是一个很有意思的特性,它配合 content 属性和伪元素可以实现自动编号的效果。它是CSS2.1提出的标准,主流浏览器对它的支持很好,即使是IE8都支持。利用CSS Counters可以实现“标题自动编号”、“复杂样式的有序列表”等等以前需要后端配合才能实现的样式。例如下面是由RED TEAM DESIGN提供的特殊有序列表样式:
mmzhou
2018-08-06
5410
中文排版二三事
前段时间一直在折腾中文排版相关的事情,自认为结果还算不错。故开源之,即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库,可以用来快速搭建中文博客主题或是用于项目文档的样式。在这篇博文中会介绍下在做这个库过程中学到的一些中文排版知识,以及它的特色。
mmzhou
2018-08-06
8080
浏览器的overflow事件
Webkit和Firefox其实是原生支持探测元素overflow状态改变的事件。参看这个DEMO:
mmzhou
2018-08-06
7940
Permissions API
如果你以前使用过Geolocation API,那么你很可能希望可以检查自己是否有权限来使用Geolocation API并且不展示确认框。这个简单的愿望目前是不可能的。你必须要先请求获取目前的位置,然后或许能拿到位置,这表示你有权限。也有可能弹出一个确认框给用户确认是否给权限。
mmzhou
2018-08-01
8730
原型链上的DOM Attributes
Chrome开发小组最近发表声明他们正在將DOM properties移动到原型链中。这个更新将会在Chrome 43(2015年4月发布beta版本)中实现。这可以让Chrome与Web IDL标准以及其他浏览器(IE和Firfox)保持一致。注:旧的基于Webkit的浏览器与标准不兼容但是safari已经与标准兼容了。
mmzhou
2018-08-01
6960
CSS vs JS动画:谁更快?
Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富媒体移动网站的速度和 native app 媲美的?
mmzhou
2018-08-01
2K0
加载第三方JS的各种姿势
如果你的网站上面有很多第三方JS代码,那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候,如果解析到需要下载文件的script标签,那么会停止解析接下来的HTML,然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下的HTML。这就是所谓的『HTML解析被阻止』。浏览器解析渲染页面的抽象流程图如下:
mmzhou
2018-08-01
6K0
GA源代码里的小技巧之preview和prerender
Safari浏览器有个Top site功能,它会展示最长访问的几个页面的截图。示例如下:
mmzhou
2018-08-01
6080
GA源代码里的小技巧之cookie篇
cookie的本质是存储在浏览器端的一段简单数据(多个键值对),浏览器会从服务器接受或者发送给服务器cookie。这样便可以为没有状态的HTTP协议提供了记录状态信息的方法,知道多个不同的HTTP请求是否来自同一个浏览器。
mmzhou
2018-08-01
1.5K0
ECMAScript 6之WeakMap
ECMAScript 6中加入了很多新的特性,其中有一个有用的API:WeakMap。Nicholas的博文做了详细的介绍。这也是一篇关于WeakMap的笔记。
mmzhou
2018-08-01
5470
网页上的复制与剪切
IE 10及以上的版本修改了Document.execCommand()方法,增加了对剪切和复制的支持。Chrome从43版本开始也支持了这项特性。
mmzhou
2018-08-01
1.4K0
watch.js 源码解读
用麻雀虽小五脏俱全来描述Watch.js比较合适。“观察者”模式是我们在开发的时候经常需要用到的。使用Watch.js那么我们就可以实现在“每当对象属性改变的时候,执行你的函数”。虽然有很多其他的库可以实现相同的功能,但是Watch.js却可以不改变你平时书写代码的方式,并且实现属性改变的监听功能。
mmzhou
2018-08-01
1.3K0
GA源代码里的小技巧之Beacon请求
GA监控脚本一般都放在开发者的网页上。域名往往和Google不一样,这样发送请求到Google服务器的时候会涉及到跨域。普通的Ajax请求是做不到的,通常称这种请求为beacon或是ping。业内常用的一个方案是发送一个图片请求(GET方式),将请求参数放在图片请求的地址后面。例如:
mmzhou
2018-08-01
1.2K0
点击加载更多
社区活动
Python精品学习库
代码在线跑,知识轻松学
【玩转EdgeOne】征文进行中
限时免费体验,发文即有奖~
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
技术创作特训营·精选知识专栏
往期视频·干货材料·成员作品·最新动态
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档