缓存&PWA 实践 一.背景 从上一篇<前端动画实现与原理分析>,我们从 Performance 进行动画的性能分析,并根据 Performance 分析来优化动画.但,前端不仅仅是实现流畅的动画.ToB 项目会经常与数据的保存.渲染打交道.例如开发中,为了提高用户体验,遇到了一些场景,其实就是在利用某些手段,来进行性能优化. Select 下拉:做前端分页展示 → 避免一次性渲染数据造成浏览器的假死状态: indexedDB:存储数据 → 用户下一次进入时,保存上一次编辑的状态 --…

一.背景:页面为何会卡? 1.1 等待时间长(性能) 项目本身包/第三方脚本比较大. JavaScript 执行阻塞页面加载. 图片体积大且多. 特别是对于首屏资源加载中的白屏时间,用户等待的时间就越长,用户感知到页面的速度就越慢.麻省理工学院的 Richard Larson 在讲话中指出,"人类将被动等待高估了 36%"(https://mazey.cn/t/em).这意味着用户感觉到的等待时间比开发工具记录的长得多. 1.2 看起来卡(体验) 页面结构不断调整,不连贯.抖动的页面往…

一.前言 现在市面上的Native  APP成千上万个,各种应用商店里面的APP琳琅满目.原生的APP下载到手机上之后,用户就可以获取一个方便的入口,体验上也十分顺畅.但是再好的事物难免有点缺点: 1.开发成本高,一般同时安卓和ios两个版本: 2.版本迭代.打包.上传.过审这一些的步骤拉长了开发周期,有时候还有面临别被下架的风险: 3.不利于SEO: 相对于原生APP,web网页开发开发周期快,没有过审之类的烦恼,也更加利于SEO,当时也存在很明显的不足: 1.只能借助浏览器访问,没有桌面快捷…

Google搜索解析 是一款相似于Google趋势的SEO 在 线keyword工具,其官方提出的口号是“看看全世界的人们都在搜索些什么”.利用Google搜索解析,能够比較特定区域.类别.时间范围以及搜索资源之间的 搜索量模式,这点也是Google搜索解析相比仅仅能提供基本信息的Googlekeyword工具,Google趋势,Google站点管理员工具以及 Google Analytics更强大的地方. Google搜索解析的功能包含 1)比較根据:搜索字词:地理位置:时间范围. 2)过滤器…

前面的话 渐进式网络应用 ( Progressive Web Apps ),即我们所熟知的 PWA,是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案.PWA 本质上是 Web App,借助一些新技术也具备了 Native App 的一些特性.本文将详细介绍针对现有网站的PWA升级 效果演示 以前端小站xiaohuochai.cc的PWA效果做演示,github移步至此 [添加到桌面] [离线缓存] 由于手机录屏选择无法进行离线录制,改由模拟器模拟离线效果…

2018年的第一篇博客,最近都去挤图书馆了,希望新年新气象... 简介 PWA 是一门Google推出的web前端新技术,全称是Progressive Web App,是Google在2015年提出,2016年6月推广的项目,是结合了一系列现代Web技术的组合,在网页应用中实现和原生应用相近的用户体验. PWA并不是描述一个技术,而是一些技术的合集.PWA 是专门应对手机 Web 开发而提出的,通过新技术的成熟,实现最好的 Web + 手机 APP.就是说,让你在使用 Web 的时候感觉像是在使…

使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-router-dom.redux.styled-components)开发的一套博客后台管理系统,用于前端小站的管理,主要功能包括游客浏览.文章管理.类别管理.评论通知.推荐设置和用户管理 [访问地址] 域名:https://admin.xiaohuoch…

Google Developer Days 2019 2019 Google 开发者大会 GDD Google Developer Days https://events.google.cn/intl/zh-CN/developerdays2019/ https://events.google.cn/intl/en/developerdays2019/ https://events.google.cn/intl/zh-CN/developerdays2019/speakers/ https://…

Chrome & install App & PWA Chrome & install website as an app chrome://apps https://medium.com/@dhormale/install-pwa-on-windows-desktop-via-google-chrome-browser-6907c01eebe4 https://support.google.com/chrome_webstore/answer/3060053?hl=zh-Hans…

在flickr时代,为了专门把站内嵌入相册,还专门写了一篇文章把Flickr相册搬回家.flickr被墙之后,我就把个人相册转到了Web Picasa上.用Picasa Web就简单多了,官方提供了Slideshow Flash,而且形式也比较漂亮,阅微堂之前也是用这样的方式,不过这种方法麻烦的一点是在Picasa上添加相册,就要手动到blog这边更新一次.这两天看到了 Web Picasa API,感觉这玩意儿的功能太强了,完全可以做一个Picasa的站内镜像版. 最后的效果见阅微堂相册. 更…