萨尔茨堡的树枝

前言 此篇文章实际上是《H5页面性能优化之加载篇》的姊妹篇。主要想从CSS 动画的角度给大家介绍下 FLIP 技术，可以帮助大家创建真正轻量级的动画，以此来提高 Web 动画的性能。 很多同学平时并不重视动画，认为动画相比较业务逻辑画蛇添足，有时还影响页面性能，所以开发时则是能省就省，其实不然，开发中业务逻辑当然是要放在首位的，但是同样也不要小看了动画，在某些特定场景下，其所能起到的作用甚至可以与业务的目标并驾齐驱。但是这有一个大前提，那就是需要流畅的动画，FLIP 技术应运而生，可以帮助你创建真正轻量级的动画。 FLIP 技术FLIP是一种记忆设备和技术，最早是由@Paul Lewis提出的，FLIP是First、Last、Invert和Play四个单词首字母的缩写。 FLIP 将一些性能低下的动画映射为 transform 动画。通过记录元素的两个快照，一个是元素的初始位置（First – F），另一个是元素的最终位置（Last – L），然后对元素使用一个 transform 变换来反转（Invert – I），让元素看起来还在初始位置，最后移除元素上的 transform 使 ...

此篇文章是上一篇《写作利器——Markdown语法指南基础篇》的进阶版，上一篇主要介绍 Markdown 的基础语法，如果你已经完全掌握上一篇的知识，现在你已经可以轻松的完成一篇文章的撰写了，那为什么会有后面的进阶版呢？其实就是介绍一些 Markdown 的小技巧和不常用到的图表类展示, 最后教大家如何在 Markdown 中使用 emoji，让你的文章更鲜活~ 😉 本文我将从以下四个方面总结，如后期有更新，可以关注我的个人博客和公众号。 转义字符 常用数学公式 流程图 emoji 以下是正文 转义字符 Markdown 利用很多特殊符号标识语法，但是需要输入这些符号就需要利用 转义字符 来控制，避免 Markdown 语法解析。 1. Markdown中使用反斜杠 \ 作为转义字符例如我想单独输入 *，直接输入则直接被解析为无序列表，此时在星号前面加上转义字符就可以正常展示如下：* Markdown 中常用的符号有： 123456\*\*\*\-\>\[\]\(\) 2. 使用 HTML 中的转义字符html中包含一系列字符实体（特殊符号），利用转义字符可以将这些在ht ...

前言最近因为工作的原因，需要帮助组内制定文章书写规范，审查文章格式，目前文章均按照 Markdown 格式书写，我发现虽然大家都能正常的完成一篇文章，但是在格式细节上还有很多问题，为了帮助大家规范文章格式，特此整理一下 Markdown 基本规范，方便后面的小伙伴更好的畅所欲言~ 为什么选择 Markdown？在学习语法之前，我们先来看下什么是 Markdown： Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，文档后缀为 .md。目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。 鉴于 Markdown 以上的特性，用 Markdown 有如下好处： 什么人都能打开，因为是纯文本，所以不需要特殊的软件，最简单的记事本就可以浏览； 转HTML非常方便，HTML是 web 的标记语言，用 Markdo ...

引言 在用户体验方面，网站的加载时间是决定成功的因素之一。各种研究的结果表明： 将近50％的互联网用户期望网页加载时间少于2秒。如果是在3秒后加载页面，则很大一部分访问者会离开该网站。 同样，将近80％的用户表示会避免访问曾经体验差的一些网址。将网页加载时间延迟一秒会使客户满意度降低约16％。例如，谷歌在2006年进行了试验，显示的搜索结果数量从10增加到30，加载时间仅增加了半秒，但是结果确是流量和收入下降了约20％。 那么我们需要做些什么来留住用户呢？ 背景618大促活动主要有两个活动，会场类活动和互动类活动。 会场类活动通常是一个庞大的页面,包含大量的数据请求和图片渲染，如果我们在页面初始化时就将所有数据请求回来并进行楼层渲染，页面加载速度会非常慢，但其实用户有时并不会滚动去看下面的内容, 这样就造成了非首屏部分的渲染, 所以我们需要进行首屏渲染优化。 互动类活动通常是大屏游戏，包含大量图片和动效，如果未加载完成就展示会影响动效展示效果，所以通常我们会进行预加载处理。 预加载处理首先我们先了解下 什么是预加载技术： WEB中的预加载就是在网页全部加载之前，对一些主要内 ...