本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/52
摘要总结:本文主要介绍了移动端Web开发中一些常用的API,包括DeviceMotionEvent、DeviceOrientationEvent、Gyroscope、Compass、GPS、MediaStream和MediaRecorder,以及这些API在移动应用程序开发中的实际应用和注意事项。
该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签tap的状态变化。 在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时,可使用pageVisibility接口进行相应的事件监听和处理。)
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时,它可以打包成一个单独文件提供浏览器和Node.js来使用。 它的优点有如下:
https://www.cnblogs.com/poloyy/category/1680176.html
这是一个鲜为人知的 web API,在JS现状调查[1]中,它的认知度排名倒数第四。它可以让你知道用户何时离开了页面。准确地说,只要页面的可见性状态发生变化,无论是用户最小化、最大化窗口还是切换标签页,该API都会触发一个事件。
对于入门选手来讲,webpack 配置项很多很重,如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单,基础的配置可以分为以下几个方面: entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等,本文就来重点分析下这些部分。
Page Visibility API 用来检测页面当前是否可见,以及打开网页的时间等
Android 上,因为各个软件使用的浏览器渲染引擎不一样,所以直播卖货系统页面播放的效果差异也很大,这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。
本文将介绍 Page Visibility API 的概念、使用方法、兼容性和实际应用案例。
项目中使用到了websocket,用户在浏览器窗口切换或者浏览器最下话后,websocket的状态有可能断开,且没有重试机制,所以想通过用户回到当前页面的时候,系统能够自动刷新,重新连接socket
目前网上有好多关于electron相关的文章,但是本人在开发的时候发现,网上大部分文章可以说是千篇一律,没有真正的痛点解析啥的很无语 ,好多的问题都需要自己去找、去试,这无异于加大了开发成本与学习成本,所以本篇博客会从electron 的api 到 electron +vue 组合式开发到 打包 及开发过程中遇见的问题分门别类的进行说明, 当然在最后的文末我会将我写的 electron + vue全家桶的git开源项目附上,需要的话就去git 吧
性能在Web应用程序中起着至关重要的作用,甚至谷歌也很在意其查询性能。不要因为一个几KB的文件只需要1毫秒的下载时间就不去重视,因为涉及性能时每个毫秒都需要去关注。最好能优化、压缩和缓存一切。
但是,这些事件在手机上可能不会触发,页面就直接关闭了。因为手机系统可以将一个进程直接转入后台,然后杀死。
据统计,有80%的最终用户响应时间是花在前端程序上,而其大部分时间则花在各种页面元素,如图像、样式表、脚本和Flash等的下载上,减少页面元素将会减少HTTP请求次数,这是快速显示页面的关键所在。 CSS Sprites方法可以组合页面中的图片到单个文件中,并使用CSS的background-image和background-position属性来现实所需的部分图片。 Inline images使用data:URL scheme在页面中内嵌图片,这将增大HTML文件的大小,组合inline images到用户的(缓存)样式表既能较少HTTP请求,又能避免加大HTML文件大小。 Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数,样式表也可采用类似方法处理,这个方法虽然简单,但没有得到大规模的使用。当页面之间脚本和样式表变化很大时,该方式将遇到很大的挑战,但如果做到的话,将能加快响应时间。
背景:最近遇到1个项目,业务方调用了后端1个开销较大的接口,用于页面实时监控一些关键指标,页面是自动定时请求接口刷新数据,随着用户的增加,后端压力比较大,分析发现,很多用户日常使用过程中,并不是一直盯着屏幕看,有时候人离开了(比如下班),或者把监控页切到后台或最小化,干其它事去了,但是页面上的定时请求仍然在一直跑着,造成了相当于部分无用请求。
页面停留时间(Time on Page)简称 Tp,是网站分析中很常见的一个指标,用于反映用户在某些页面上停留时间的长短,传统的Tp统计方法会存在一定的统计盲区,比如无法监控单页应用,没有考虑用户切换Tab、最小化窗口等操作场景。 基于上述背景,重新调研和实现了精确统计页面停留时长的方案,需要 兼容单页应用和多页应用,并且不耦合或入侵业务代码。
互联网上有很多很棒的工具,让我们作为前端开发人员的生活更加轻松。在这篇文章中,我将快速回顾一下我在开发工作中经常使用的11种工具。
VueUse 是专门为 Vue 打造的工具库,它提供了监听页面元素的各种行为、调用浏览器提供的蓝牙、定位、摄像头、连接游戏手柄等能力,适用于 Vue2 和 Vue3。
翻译后发现貌似已经有人翻译过,但是翻译的水平就有点。。。。。那篇文章中不仅忽略了知识点,并且出现了明显的语义和语法错误,有一定的误导作用,所以请务必重新阅读老高的翻译。文章中容易出错的地方老高已经注释(在文章中以【】标出)。
说实话,以上的十四条,有些是我没看懂的,例如Expires Header和配置 ETags,先记录在这里,其实依照我对Web前端开发的理解,也总结出一些优化原则,也可能与上面的有些重复,但可能会更好理解一些
本文是深入浅出 ahooks 源码系列文章的第十五篇,这个系列的目标主要有以下几点:
https://www.quora.com/What-is-Webpack-and-babel-loader
一个 web socket 链接,为了保持活跃,需要定时向服务器发送心跳信令。该机制通常由 setInterval 实现。
本文为joshua317原创文章,转载请注明:转载自joshua317博客 https://www.joshua317.com/article/49
埋点上报是将应用层事件上传至上层平台的过程。比方说,在某购物网站上,用户点击了「收藏」按钮,此时,一个点击事件就生成了,这一事件会被上报至一个数据分析平台。这样,相关的数据分析师、产品经理、运营等同学便可以在数据分析平台,通过这些上报的事件数据分析,得出应用中可以优化的方方面面。由此可见,埋点上报是每个产品走向卓越的重要一环。
本文是深入浅出 ahooks 源码系列文章的第七篇,这个系列的目标主要有以下几点:
初学者,特别是自学的孩子,在学习的过程中常会遇到各种各样的瓶颈,例如:如何写好javascript、要注意什么等等。这篇文章中,总结了过去javascript一些高效的写法,供大家参考。
Webpack是一个模块打包工具,在Webpack里一切文件皆模块。通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合的文件。Webpack专注构建模块化项目。 Webpack可以看作是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其他一些不能被浏览器直接运行的扩展语音(如:Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
本文主要讲述,关于 Chrome Content Download 时间过长问题调查经过,及相关优化方案
Document.hidden属性来自于浏览器Page Visibility API。
前端路由一直是一个很经典的话题,不管是日常的使用还是面试中都会经常遇到。本文通过实现一个简单版的 react-router 来一起揭开路由的神秘面纱。
本文主要是在我读《高性能Javascript》之后,想要记录下一些有用的优化方案,并且就我本身的一些经验,来大家一起分享下,
两周前,我介绍了 Page Visibility API。有了它,就可以监听各种情况的网页卸载。
Android、iOS 和最新的 Windows 系统可以随时自主地停止后台进程,及时释放系统资源。也就是说,网页可能随时被系统丢弃掉。Page Visibility API 只在网页对用户不可见时触发,至于网页会不会被系统丢弃掉,它就无能为力了。
它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行JS代码。JS由ES(ECMAScript),DOM,BOM 组成,目前运行在浏览器内核中,NODE中只能运行ECMAScript,无法使用DOM,BOM。
前几天听一个朋友说到 snowpack, 便去去看了下这个包是干什么的,看了下官网,发现这个东西还是蛮有意思的。号称 无需打包工具(Webpack,Parcel)便能将代码结果实时展现在浏览器中。可以先看以下的图,是不是很诱人?
当用户在浏览器中与网页进行交互时,会触发许多用户输入事件,这些事件会触发浏览器的渲染过程。
内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页面嵌入图像数据 ),合理设置HTTP缓存等。 (2)减少DNS查找 (3)避免重定向 (4)使用Ajax缓存 (5)延迟加载组件,预加载组件 (6)减少DOM元素数量:
Selenium是ThoughtWorks公司研发的一个强大的基于浏览器的开源自动化测试工具,它通常用来编写web应用的自动化测试。早期也即Selenium1.x时期主要使用Selenium RC(Selenium Remote Control)进来自动化测试。Selenium2.x集成了Selenium和WebDriver的功能。
使用Electron开发客户端程序已经有一段时间了,整体感觉还是非常不错的,其中也遇到了一些坑点,本文是从【运行原理】到【实际应用】对Electron进行一次系统性的总结。【多图,长文预警~】
Selenium是ThoughtWorks公司研发的一个强大的基于浏览器的开源自动化测试工具,它通常用来编写web应用的自动化测试。早期也即Selenium1.x时期主要使用Selenium RC(S
前端随着node等JavaScript运行时平台的出现,逐渐向工程化方向发展。项目开发也越来越规范化,但是随着项目的体积越来越大,依赖库越来越多,项目的运行,热更新和打包发布也是越来越慢,甚至卡顿。这个时候就需要对项目进行“瘦身”(性能优化)了。本文就围绕着如何给前端项目进行性能优化等技术点一一展开讨论
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式。
本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 定义 Riot:类似 React 的微型 UI 库 特点: 自定义标签 快速上手的语法 虚拟 DOM 体积超小 很好
领取专属 10元无门槛券
手把手带您无忧上云