前端动画交互类优化

前端优化是个很广泛的命题，铺开去得出本书了（事实上我也没那本事），实际上市面上也有很多相关的书籍。动画与交互上的性能问题最容易被察觉，特别是在机能较低的移动端。由于自己有过一段移动开发的经历，较为关注这块且作为一个爱拾人牙慧的切图狗，现将一些他人成熟的优化方法总结如下：

当然，所有的优化都是有场景，请根据实际的场景去选择最优的方案使用。

Read More »

更好的 box-shadow 动画

引子

某日移动端有一需求：要求一 App Logo 有一层外阴影闪动效果，实现起来倒也不复杂。简单粗暴直接在 keyframes 中定义 box-shadow 动画即可交差，最终代码如下：

Read More »

Media Query 学习笔记

Media Query 简介

Media Query 即媒体查询，借助其可实现响应式设计。Meidia Queries，该网站收集了很多优秀的 RWD(Responsive web design) 的网站。

在 HTML4 和 CSS2 只支持对于不同的媒体类型来设置样式，而 Media Query 扩充了 Media Type 的功能，并且使我们能够更精准的应用样式表。

Read More »

前端学习资料

编码规范

HTML && CSS

  1. CSS Guide Lines
  2. 编码规范

在线教程

CSS

  1. 学习CSS布局
  2. CSS参考手册

JavaScript

  1. JavaScript 标准参考教程（alpha） – 阮一峰的JavaScript 标准参考教程
  2. JavaScript 秘密花园
  3. ECMAScript 6 入门 – 阮一峰的《ECMAScript 6 入门》在线版

Node.js

  1. Node入门 – 一本 Node.js 入门书

综合类

工具

正则工具

兼容性查询

  1. Can I Use – 兼容性查询
  2. Browserhacks
  3. W3 Help – 兼容性问题比较权威的查询

浏览器份额统计

  1. 百度统计

测试工具

  1. JSON 2 HTML – 将JSON转化为可视的HTML嵌套展示
  2. jsPerf – JavaScript性能测试

标准校验

  1. https://validator.w3.org/
  2. https://validator.ampproject.org/

性能优化

  1. How to lose weight (in the browser)

图书资源

理解 CSS 权重

权重值的计算

在最开始学习 CSS 的时，由于自己对 CSS 权重计算认识还很模糊的，在编码的时候单纯的堆积选择器数量来实现样式覆盖，导致代码非常臃肿不利于维护或者经常会疑惑某条 CSS 规则为何没有生效。正所谓“基础不牢，地动山摇”，今天就来好好回顾回顾 CSS 权重的基础。

Read More »

CSS 浮动

说来让自己羞耻：自称写了 HTML + CSS 快一年的我连最基础的浮动都没搞清楚过。脑子里关于浮动的知识点一直处于“大概、好像、应该”这种混沌状态。这样的恶果就是：平时虽然我也在像模像样的在用 float 布局，却常常因为摸不清浮动了的元素的怪脾气而感到沮丧，这种无法掌控页面元素的感觉太糟糕了，就像面对淘气顽皮切不听话的孩子却又手足无措。治本才是关键，我尝试着去重新审视浮动，试图去深入理解浮动，于是便生出此文——我以自己的方式去解读浮动。

Read More »