Maoli

Be your own hero


  • 首页

  • 分类6

  • 标签42

  • 归档37

  • 关于

  • 搜索

浅谈现代浏览器的网页生命周期

发表于 2022-05-18 | 更新于 2022-05-19 | 分类于 Web前端 | 评论数:
本文字数: 20k | 阅读时长 ≈ 18 分钟

前言

在Android、IOS和Windows等的平台上,系统可以随意启动和中止应用程序的运行,这使得这些平台能够重新分配资源,以提供最好的操作体验给用户,当系统做这类干预时应用程序通常是知晓的,这是因为操作系统为应用程序提供了标准化的应用生命周期。

对于网页来说,并没有类似的生命周期机制。随着浏览器中被打开网页数量增加,内存、CPU、等系统关键资源都被过度使用,导致系统性能下降,从而降低了用户的操作体验,因此现如今,各大浏览器也像操作系统一样通过干预页面来节省资源。

但是这也引发了一些问题:开发人员可能无法为系统发起的干预做准备,这就可能导致浏览器在优化页面的过程中如果对页面造成了破坏,而开发者对此一无所知。

因此浏览器为了解决上面的问题,提出了页面生命周期的方案(Page Lifecycle API),方案的目标主要有三点:

  1. 在网页中将生命周期状态的概念标准化

  2. 定义新的页面状态,允许浏览器限制网页,防止页面持续占据系统资源

  3. 创建新的API和事件,允许开发人员响应这些页面状态之间的转换

阅读全文 »

没想到你是这样的npm install

发表于 2021-11-16 | 分类于 Web前端 | 评论数:
本文字数: 19k | 阅读时长 ≈ 18 分钟

前言

使用npm install这个条命令对于我们前端开发者来说应该是形成“肌肉记忆”,之前一直对 npm 的相关知识停留在“会用”的阶段,但是内部的原理却不甚了解。直到项目中出现了一次由 npm 包引起的问题后,才开始下决心对 npm 包其中的工作流程做一个详细的梳理。

npm install 大概会经过以下图例中的几个阶段,下文将会梳理各个流程的实现细节,以及设计背景。

image-20211111174114492

阅读全文 »

测一测你的代码:关于前端自动化测试

发表于 2021-09-06 | 分类于 自动化测试 | 评论数:
本文字数: 47k | 阅读时长 ≈ 42 分钟

开篇:我们需要自动化测试吗

所谓自动化测试就是把人对软件的测试行为转化为由机器执行测试行为的一种实践,对于最常见的 GUI 自动化测试来讲,就是由自动化测试工具模拟之前需要人工在软件界面上的各种操作,并且自动验证其结果是否符合预期。

你是不是有点小激动?这似乎开启了用机器代替重复手工劳动的自动化时代,你可以从简单重复劳动中解放出来了。

阅读全文 »

写了个支持图片裁切与合并的工具类

发表于 2021-04-27 | 分类于 Web前端 | 评论数:
本文字数: 15k | 阅读时长 ≈ 14 分钟

由于目前业务需要对图片进行渲染优化相关的工作,现阶段准备从网络请求角度入手,主要的解决思路是将较大的图片在上传前在前端裁剪为多段后上传。最终显示时可以按照裁切的顺序进行逐个加载,或者懒加载,如此一来,首屏等待时间大大减少。

阅读全文 »

Web音视频串流

发表于 2021-04-21 | 分类于 Web前端 | 评论数:
本文字数: 19k | 阅读时长 ≈ 17 分钟

摘要

这次分享主要是对在浏览器环境中实现直播的相关技术介绍,其中包括了对音视频的格式以及推送、播放技术的探索。分享过程中还会对目前自己已经实现的一套Web直播方案进行分析。最后还会简单介绍现在比较热门的WebRTC技术。

音视频串流简介

音视频串流从广义角度来说,就是能够实现设备A将音视频画面同步传输给设备B进行播放,例如电视投屏、会议投屏。而今天所介绍的Web音视频串流主要是实现允许用户在浏览器环境就能完成串流。

阅读全文 »

装饰器工具函数[持续更新]

发表于 2021-04-02 | 分类于 Web前端 | 评论数:
本文字数: 11k | 阅读时长 ≈ 10 分钟

TypeScript中的装饰器

随着TypeScript和ES6里引入了类,在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。

阅读全文 »

TypeScript渐进式入门

发表于 2021-04-02 | 分类于 Web前端 | 评论数:
本文字数: 126k | 阅读时长 ≈ 1:54

本部分主要是一些基础概念,掌握后可以从JavaScript语法习惯转变为TypeScript。

基础类型

表示形式:

1
const foo:string = "test"
  • 字符串:string
  • 数字:number
  • 布尔值:boolean
  • 空值:void (主要用于表示函数无返回值或返回值为null时的定义)
  • 任意值:any (意味着不限制类型,可以为任意值)
  • 其他:undefined、null
阅读全文 »

深入理解Promise

发表于 2020-09-10 | 分类于 Web前端 | 评论数:
本文字数: 49k | 阅读时长 ≈ 45 分钟

ES6提供的Promise对象是异步控制相较于回调的更好的一种方法。包括ES8提供的asyncFunction本质上也是基于Promise和生成器的结合,因此在已经了解Promise对象的常用API基础上,更加深入的去了解如何使用Promise去解决一些常见的难题对于开发将会有一些帮助。

阅读全文 »

在Vue中使用Echarts

发表于 2020-05-04 | 分类于 Web前端 | 评论数:
本文字数: 25k | 阅读时长 ≈ 23 分钟

在Vue中使用Echarts

实际的Vue项目开发中可能需要用到Echarts来制作图表。本文将分享在VueCli3中使用Echarts的小经验。

阅读全文 »

Node.js通过cron模块实现定时执行脚本

发表于 2020-05-04 | 分类于 Web前端 | 评论数:
本文字数: 2.6k | 阅读时长 ≈ 2 分钟

Node.js通过cron模块实现定时执行脚本

实际开发中,可能会由定时执行某段代码的需求。下面分享如何使用cron在Node.js中如何实现该需求

阅读全文 »
12…4下一页
Jacky Mao

Jacky Mao

爱吃酱油的人运气不会差😁

37 日志
6 分类
42 标签
简书 GitHub Gitee E-Mail WeiBo CSDN
friends
  • Power林
  • Momento
© 2018 — 2022 Writer Jacky Mao | 186k | 2:49
0%