8.2k 7 分钟

# requestAnimationFrame 官方介绍

# requestAnimationFrame 用处概述

window.requestAnimationFrame() 告诉浏览器 —— 你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行...

官方文档对应截图

img

官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

10k 9 分钟

转自:https://zhuanlan.zhihu.com/p/163032982

Object Oriented Programming (OOP) 面向对象衍生出的精华之一 —— 设计模式,在过去几十年的软件开发历史中被证明是行之有效的一系列软件设计最佳实践

img

这本《设计模式:可复用面向对象软件的基础》是讲述设计模式的经典书籍,懂 Java 的朋友务必要看看这本书。

如果是纯前端的同学,Java 语法看起来可能有点不习惯。但事实上,或许也不一定要看懂这本书的代码,而是去理解里面描述的设计模式到底是什么。

5.7k 5 分钟

# PWA 初次体验

前言:本示例不用安装任何东西

部分资源来自网络资源及 PWA 官网,不要把 PWA 想象的太复杂,跟着示例走一下,你行的。

2.5k 2 分钟

# Grid 布局

Grid 布局是一种新型 CSS 布局方式,特点为 二维布局 ,他比较擅长将一个页面划分为几个主要区域,能够轻松实现下列布局方式。

image.png

1.1k 1 分钟

在 CSS 中,在网格(Grid)布局中,如果你想让一个元素在其父容器中水平和垂直居中,你可以使用 align-items 和 justify-items 属性,或者在单个网格项上使用 align-self 和 justify-self 属性。下面是一些常见的方法来实现水平和垂直居中:

1.6k 1 分钟

在使用 ECharts 进行图表绘制时,可以利用 CSS Grid 布局来组织页面元素,确保图表能够在容器中正确显示。以下是一个简单的例子,展示了如何使用 CSS Grid 布局来搭建一个包含 ECharts 图表的页面。

重点在这一句: grid-template-columns: repeat(3, 1fr);

4.8k 4 分钟

Google 在 2020/5/4 号发布了新的搜寻引擎演算法更新 "The May 2020 Core Update",影响许多站主的来客流量,正当大家还摸不著头绪时,5/5 又提出了新的使用者体验量化方式"Web Vitals",在 5/28 更指出此量化方式将开始至少试验一年的时间,在 2021 年之后某个时间点成为 Google 搜寻排序指标之一,符合 AMP 或 良好 Web Vitals 的网站都能出现在 Search Top Stories 上。究竟什么是 Web Vitals 以及 Google 发展体验量化标准能够对他们的业务带来什么帮助,以下部份内容包含自己的观点,希望能抛砖引玉,互相切磋成长。

2.4k 2 分钟

目前前端没有很好的 api 支持流式的文件的分片下载。如果直接把整个文件保存到 Blob 对象中再保存,有可能出现很多不可以预期的问题,可能会因为达到浏览器的 Blob 对象上限而下载失败。也有机会因为客户端内存太低而导致 OOM。那如果我们有额外的文件服务器的话,可以选择把文件先导出到文件服务器,然后前端再通过文件路径由浏览器处理下载。但是如果又没有额外的文件服务器,又想要支持分片下载,这就是这篇文章的主题。

798 1 分钟

当请求的凭据模式为 include 时,相应中的 Access-Control-Allow-Origin 标头的值不能是通配符 "*"

  • 如在请求定义中设置 withCredentials 标志,则会在请求中传递 cookie 等。
  • 如果服务器返回任何 set-cookie 响应头,那么必须返回 Access-Control-Allow-Credentials: true , 否则将不会在客户端上创建 cookie
  • 如果你这样设置,你需要同时指定了确切的 Access-Control-Allow-Origin 响应头,因为 Access-Control-Allow-Origin: 不具有凭证兼容

所以,当请求中携带 cookie 时, Access-Control-Allow-Origin 必须要有确切的指定,不能是通配符 (*),而 withCredentials 是跨域安全策略的一个东西。

10k 9 分钟

ServiceWorker 是一个运行在浏览器背后的独立线程,它拥有访问网络的能力,可以用来实现缓存、消息推送、后台自动更新等功能,甚至可以用来实现一个完整的 Web 服务器。

因为 ServiceWorker 运行在浏览器背后,因为这个特性,它可以实现一些不需要服务器参与的功能,比如消息推送、后台自动更新等。