Web 优化 ——— 添加骨架屏
摘要:
最近做网页优化,发现页面会有一段白屏时间,给人的体验就是网页会有一闪而出的感觉,也就是我们常说的闪屏,查了一些资料,发现实现思路都是异曲同工的,就是在页面节点还没加载之前,先插一段静态网页,节点加载了再去掉这段静态代码,显示数据渲染出来界面。一般需要加骨架屏的界面,是一些动态加载数据的界面,因为数据没出来,会有一段比较长的白屏时间会给用户网加载慢的感觉。加了骨架屏,用会觉得网页加载比较快,属于一种视觉欺骗的手段吧。
摘要:
最近做网页优化,发现页面会有一段白屏时间,给人的体验就是网页会有一闪而出的感觉,也就是我们常说的闪屏,查了一些资料,发现实现思路都是异曲同工的,就是在页面节点还没加载之前,先插一段静态网页,节点加载了再去掉这段静态代码,显示数据渲染出来界面。一般需要加骨架屏的界面,是一些动态加载数据的界面,因为数据没出来,会有一段比较长的白屏时间会给用户网加载慢的感觉。加了骨架屏,用会觉得网页加载比较快,属于一种视觉欺骗的手段吧。
# Merge two sorted linked lists and return it as a new list. The new list should be made by splicing together the nodes of the first two lists. |
# 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效。 |
用别人的组件总有各种不可控的问题,而且不好维护,还是造轮子比较舒畅。
下拉列表是工作中经常用到的一个功能,点击按钮,显示下拉列表,点击列表中的项目显示对应的值到按钮中,这是下拉列表的常用交互。这里的一个比较有意思的点就是如何在点击别的地方时关闭列表。我采用的方法是监听组件最外层的 blur 事件,当该组件失去焦点时,关闭列表。由于按钮用的是 div 实现,默认 div 是没有 blur 事件的,这里添加一个 tabindex 属性, blur 就有效了。
这个函数是一个用于画 canvas 路径的,也就是把 canvas 画线的过程演示出来的一个东东。采用的是纯 js 和 canvas 描绘方法。当然前提是得有路径的点集,不然画不了。