HTML5
文章平均质量分 67
王乐平
这个作者很懒,什么都没留下…
展开
-
使用 Electron 来替代本地调试线上代理的场景
Chrome 94 版本不再放行,无法再携带 Cookies,也就是 Electron v14 之后的版本无法通过。新版本(v27),通过复写。原创 2023-11-13 11:24:59 · 757 阅读 · 0 评论 -
主动型页面性能利器:Page Status
1. 背景当页面出现性能问题,如加载慢、页面卡顿等现象时,大多是用户主观上的感受。而要真正客观的去评测性能和定位问题原因,通常需要专业的前端同学通过 DevTools 中的 Performance 等工具来查看(如图 1 所示),这无疑增加了客观看问题的成本。图 1当然,目前也是有一些不错的工具来评测分析页面,但这些工具都存在一些问题。下面主要说一下 PageSpeed Insights、Lighthouse 。1.1. PageSpeed Insights(Lighthouse)PageSpe原创 2021-09-11 12:16:48 · 478 阅读 · 0 评论 -
「浏览器插件」网址小尾巴终结者
前言在我们日常的开发调试中,会在 URL 上添加一些特殊的小尾巴 用来显示调试界面或者开启一些特殊功能,当你接触了越来越多的系统后,你需要使用的小尾巴就变得越来越多,记忆和使用成本非常大,以及含有小尾巴的网址 在跳来跳去的过程中小尾巴可能丢失等问题,迫切需要解决。面临的问题这里主要面临两个问题:1. 小尾巴太多导致的记忆问题当一个平台切入了各种解决方案,每种解决方案都有自己的小尾巴时;或者你需要在多个平台间游走。这个时间会出现巨量的小尾巴,通常你需要用时,很难记清楚,因为小尾巴为了防原创 2021-01-10 18:24:59 · 2348 阅读 · 0 评论 -
「浏览器插件」非常好用的JSON-View
Chrome 商店地址查看/格式化 二合一。功能• 自动识别 JSON 内容,并在页面右下角创建切换按钮。• 支持展开/折叠节点。• 支持全部展开、全部折叠、展开一二三层节点操作。• 支持复制节点信息(Array/Object 节点复制内容自动格式化)。• 复制文本节点值 不会添加引号。• 自动识别超链接,可点击。• 支持在当前页面,原始内容和格式化内容随意切换。• 对于复制的JSON文本,可点击插件打开新的编辑解页面,缩短使用链路。自动识别JSON内容,右下角出现切换按钮为了保.原创 2020-10-23 11:11:20 · 1019 阅读 · 0 评论 -
超方便的 IndexDB 库
前言做为 Web 浏览器层的本地存储,IndexDB 做为一个很好的选择,几乎可以存储任意类型的数据,且是异步的。但是正常使用方式下需要在监听各种事件来处理结果,不是很方便,下面就对这一层进行了包装,使用方便。IndexDBWrapper 库IndexDBWrapper 库是参考 workbox 相关 DB 操作开发的,下面具体说明下使用。包地址:https://www.npmjs.co...原创 2019-06-20 21:41:11 · 5276 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:Push
# 前言很多时候,原生应用会通过一些消息推送来唤起用户的关注,增加驻留率。网页该怎么做呢?有没有类似原生应用的推送机制?推送功能又能玩出什么花样呢?原创 2019-05-29 15:56:12 · 1815 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:Notification
# 前言在很多场景下,需要一种通知的交互方式来提醒用户,传统方式下可以在页面实现一个 Dialog,或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足,在网页最小化的情况下,无法查看任何通知,导致用户无法及时获取通知信息。给力的 W3C 推出了 Notifications API,专注于 WEB 的通知。原创 2019-05-09 22:00:47 · 1318 阅读 · 0 评论 -
PWA(Progressive Web App)入门系列:(五)Web Worker
前言在说Service Worker前有必要说一下Web Worker,因为Service Worker本身就属于Web Worker的延伸,大部分功能也是基于Web Worker进行的扩展。背景众所周知,JavaScript引擎是以单线程调度的方式进行,我们无法同时运行多个JavaScript文件,这种情况下就会导致对硬件资源无法充分利用,并且当在进行一些高耗性能的操作时,会影响主线程的其他任务,原创 2018-01-12 00:14:20 · 2202 阅读 · 0 评论 -
基于HTML5陀螺仪实现ofo首页眼睛移动效果
最近用ofo小黄车App的时候,发现以前下方扫一扫变成了一个眼睛动的小黄人,觉得蛮有意思的,这里用HTML5仿一下效果。ofo眼睛效果效果分析从效果中不难看出,是使用陀螺仪事件实现的。这里先来看一下HTML5中陀螺仪事件的一些概念。陀螺仪事件为deviceorientation,这里主要获取事件中的alpha,beta,gamma。aplha行动装置水平放置时,绕 Z 轴旋转的角度,数值为 0 度到原创 2017-07-18 09:40:22 · 5567 阅读 · 3 评论 -
HTML5 Canvas制作雷达图实战
雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图。下面,用HTML5的Cavas来实现雷达图。效果一、创建Canvasvar mW = 400;var mH = 400;var mCtx = null;var canvas = document.createElement('canvas');document.body.append原创 2017-03-05 13:52:46 · 15706 阅读 · 6 评论 -
一步一步实战HTML音乐播放器
在这里我用HTML5从头开始一步一步来制作一个简约的音乐播放器,大家可以参考一下,接下来正式开始。音乐播放器效果播放器分析这里将播放器分两块来做:视图层(html + css)逻辑层 ( js )视图层分析视图中包含:播放器容器 播放器名称音乐专辑图音乐信息 歌曲名 歌手专辑名控制区 上一曲播放下一曲播放进度条播放时间 当前时间歌曲总时间音频控件 页面背景原创 2017-01-26 16:07:33 · 22411 阅读 · 14 评论 -
Canvas制作动态进度加载水球
前言之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下。样式预览实现思路关于水波的实现,使用了sin()函数,通过每一帧不断的移动sin()函数曲线,实现水波动态效果。然后,通过绘制圆形路径,进行clip(),实现球型效果。sin()函数相关这里说一下sin()函数的相关基础,对于绘制水波的影响。看一下图,回顾一下中学sin()函数的基础。从原创 2016-12-09 13:35:15 · 12269 阅读 · 12 评论 -
Canvas三种动态画圆实现方法说明
前言canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。 这里我个人总结了3种实现方法,大家可以参考一下。方法一:arc()实现画圆效果:代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style typ原创 2016-12-04 15:18:44 · 27445 阅读 · 0 评论 -
HTML5 requestAnimationFrame( ) 动画API
简介当用JS做动画效果时,一般用setTimeout()或setInterval()来进行动画效果的制作,现在好了,出现了一个专门用于处理动画的API——requestAnimationFrame(),表意为“请求动画帧”。用法基本语法:requestAnimationFrame(callback)//callback为回调函数cancelAnimationFrame(id) //requestA原创 2016-12-02 20:32:12 · 1951 阅读 · 0 评论