前端小作坊-腾讯云开发者社区

开发者社区

文档建议反馈控制台

腾讯云架构师技术同盟

文章/答案/技术大牛

发布

前端小作坊

专栏成员

24

文章

31113

阅读量

13

订阅数

CSS动画的性能优化

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

2018-08-06

1.8K0

Javascript 原型链

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

2018-08-06

5660

CSS animation和transition的性能探究

你可能已经在你的项目中用上了CSS Animation和CSS transition。如果还没有用上，那你有点out了。快去看下CSS-Trick上的这两篇关于animation和transition的文章。你在使用中一定发现了有些动画很流畅，而有些则很卡。为什么呢？

2018-08-06

1.4K0

CSS硬件加速的好与坏

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

2018-08-06

1.1K0

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

本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起：Google Analytics（以下简称GA），是Google提供的用于网站监测等一系列功能的服务。网站开发者将GA提供的投放代码放到自己网站上需要监测的页面（一般是全站添加）。

2018-08-06

9890

iOS 5 Mobile Safari中label的bug

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

2018-08-06

6780

CSS3着重符及其fallback

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

2018-08-06

1.8K0

CSS Counters是一个很有意思的特性，它配合 content 属性和伪元素可以实现自动编号的效果。它是CSS2.1提出的标准，主流浏览器对它的支持很好，即使是IE8都支持。利用CSS Counters可以实现“标题自动编号”、“复杂样式的有序列表”等等以前需要后端配合才能实现的样式。例如下面是由RED TEAM DESIGN提供的特殊有序列表样式：

2018-08-06

5870

中文排版二三事

前段时间一直在折腾中文排版相关的事情，自认为结果还算不错。故开源之，即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库，可以用来快速搭建中文博客主题或是用于项目文档的样式。在这篇博文中会介绍下在做这个库过程中学到的一些中文排版知识，以及它的特色。

2018-08-06

8640

浏览器的overflow事件

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

2018-08-06

8590

Permissions API

如果你以前使用过Geolocation API，那么你很可能希望可以检查自己是否有权限来使用Geolocation API并且不展示确认框。这个简单的愿望目前是不可能的。你必须要先请求获取目前的位置，然后或许能拿到位置，这表示你有权限。也有可能弹出一个确认框给用户确认是否给权限。

2018-08-01

9750

原型链上的DOM Attributes

Chrome开发小组最近发表声明他们正在將DOM properties移动到原型链中。这个更新将会在Chrome 43（2015年4月发布beta版本）中实现。这可以让Chrome与Web IDL标准以及其他浏览器（IE和Firfox）保持一致。注：旧的基于Webkit的浏览器与标准不兼容但是safari已经与标准兼容了。

2018-08-01

7440

CSS vs JS动画：谁更快？

Javascript 动画怎么可能总是和 CSS transition 一样快，甚至更快呢？到底是什么秘密呢？Adobe 和 Google 是怎么做到让他们的富媒体移动网站的速度和 native app 媲美的？

2018-08-01

2.1K0

加载第三方JS的各种姿势

如果你的网站上面有很多第三方JS代码，那么“下载速度的不可控”很有可能导致你的网站会被拖慢。因为JS在执行的时候会影响到页面的DOM和样式等情况。浏览器在解析渲染HTML的时候，如果解析到需要下载文件的script标签，那么会停止解析接下来的HTML，然后下载外链JS文件并执行。等JS执行完毕之后才会继续解析剩下的HTML。这就是所谓的『HTML解析被阻止』。浏览器解析渲染页面的抽象流程图如下：

2018-08-01

6.3K0

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

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

2018-08-01

6570

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

网络安全 http

cookie的本质是存储在浏览器端的一段简单数据（多个键值对），浏览器会从服务器接受或者发送给服务器cookie。这样便可以为没有状态的HTTP协议提供了记录状态信息的方法，知道多个不同的HTTP请求是否来自同一个浏览器。

2018-08-01

1.7K0

ECMAScript 6之WeakMap

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

2018-08-01

5830

网页上的复制与剪切

html5 api 人工智能 java

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

2018-08-01

1.5K0

watch.js 源码解读

用麻雀虽小五脏俱全来描述Watch.js比较合适。“观察者”模式是我们在开发的时候经常需要用到的。使用Watch.js那么我们就可以实现在“每当对象属性改变的时候，执行你的函数”。虽然有很多其他的库可以实现相同的功能，但是Watch.js却可以不改变你平时书写代码的方式，并且实现属性改变的监听功能。

2018-08-01

1.3K0

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

GA监控脚本一般都放在开发者的网页上。域名往往和Google不一样，这样发送请求到Google服务器的时候会涉及到跨域。普通的Ajax请求是做不到的，通常称这种请求为beacon或是ping。业内常用的一个方案是发送一个图片请求（GET方式），将请求参数放在图片请求的地址后面。例如：

2018-08-01

1.3K0

点击加载更多

社区活动

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·干货材料·成员作品最新动态