蒲公英 · JELLY技术周刊 Vol.33

页面文件太大?图片过大了吧;页面加载白屏?很有可能是字体文件还没加载完;页面加载时间过长?多半是主进程被阻塞……该怎么办呢?快来小葵,咳咳,「蒲公英」前端基础课堂补课看看,可别自己一人学废了。

登高远眺

天高地迥,觉宇宙之无穷

基础技术

怎么使用 WebWorker 提高用户界面的响应速度

浏览器执行javascript脚本是单线程的,当执行一些耗时较长的任务时,本来响应用户操作的任务会阻塞;一个解决方法是把这些耗时长的任务改造成异步操作,但在一些不好改造的任务,如图片像素分析或处理等,可以使用WebWorker处理,以让出主线程响应用户界面操作。

如何优雅的使用自定义字体

使用自定义字体时,如果先加载字体文件,再渲染文本内容,则会加长文本渲染前的空白时间。本文介绍了一种使用预连接、异步加载的方法加载字体文件,并使用和自定义字体相近的系统字体作为兜底,从而达到内容渲染速度与避免文本闪动的平衡。

CSS3 Patterns: 纯 CSS 图案效果

通过纯 CSS3 渐变特性实现的一系列非常有趣的图案效果的集合,如透明底、墙面、棋盘、鱼纹、蜂窝、Lined Paper、各类布料纹理等,代码简洁明了,可以方便地应用到我们的实际项目中。如果你也有创意与技巧,独乐乐不如众乐乐,去提交一个分享吧。

2020 年 CSS 年度报告

2020 年 CSS 使用报告,可以借此了解 CSS 的开发者现状,了解特性使用情况及周边工具等。

设计哲学

在千亿的成交额背后,前端工程师是如何做“资损防控”的?

资损,顾名思义就是平台发生了与用户或客户心理预期不符、直接或间接产生经济损失的场景。本文通过阿里前端同学的思考以及淘系双 11 的实践为大家提供一些资损防控的经验参考。

跨端框架技术

什么?Kubernetes已然弃用Docker?

目前,Kubelet 中的 Docker 支持功能现已弃用,并将在之后的版本中被删除。Kubelet 之前使用的是一个名为 dockershim 的模块,用以实现对 Docker 的 CRI 支持。但 Kubernetes 社区发现了与之相关的维护问题,因此建议大家考虑使用包含 CRI 完整实现(兼容v1alpha1或v1)的可用容器运行时。

沧海拾遗

沧海拾遗,积跬步以至千里

怎么使用 Service Workers 动态响应图片

有一个困扰 web 用户多年的难题——丢失网络连接。即使是世界上最好的 web app,如果下载不了它,也是非常糟糕的体验。Service Worker 可以使你的应用先访问本地缓存资源,所以在离线状态时,在没有通过网络接收到更多的数据前,仍可以提供基本的功能。

从浏览器渲染层面解析 CSS3 动效优化原理

在网页开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题,减少页面DOM操作,减少页面的重排,开启硬件加速……那么这些和动画优化又有何关系?就让小编。。额,小助手为你揭开其中原理。

「蒲公英」期刊,每周更新,我们专注于挖掘「基础技术工程化跨端框架技术图形编程服务端开发桌面开发人工智能设计哲学前端框架」等多个大方向的业界热点,并加以专业的解读;不仅如此,我们还会推介精选凹凸技术文章,向大家呈现团队内的研究技术方向。

抬头仰望,蒲公英的种子会生根发芽,如夏花绚烂;格物致知,我们登高远眺、沧海拾遗,以求积硅步而至千里。

蒲公英 · JELLY技术周刊贡献指南

欢迎关注凹凸实验室博客:aotu.io

或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

蒲公英 · JELLY技术周刊 Vol.33: 前端基础课堂开课啦~的更多相关文章

  1. 蒲公英 · JELLY技术周刊 Vol.32: 前端的自我进化之路

    蒲公英 · JELLY技术周刊 Vol.32 前端开发不过是切图仔在那儿瞎鼓捣,没啥门槛,不需要懂计算机原理,不需要懂算法,微服务.高并发这些都不需要懂,拖组件写个页面就好了,数据.逻辑.测试都可以交 ...

  2. 蒲公英 · JELLY技术周刊 Vol.29: 前端智能化在阿里的那些事

    蒲公英 · JELLY技术周刊 Vol.29 前端智能化是指借助于 AI 和机器学习的能力拓展前端,使其拥有一些超出现阶段前端能力的特性,这将是未来前端方向中一场重要的变革.目前各家互联网厂商都有自己 ...

  3. 蒲公英 · JELLY技术周刊 Vol.28: Next.js 10 发布

    蒲公英 · JELLY技术周刊 Vol.28 前端应用到底该选 SSR 还是 CSR?每个项目技术栈决策的时候都会根据实际需求有自己的看法,而在不久前 React 17 发布之后,自然而然也会有同学好 ...

  4. 蒲公英 · JELLY技术周刊 Vol.03

    蒲公英 · JELLY技术周刊 Vol.03 「蒲公英」期刊全新升级--JELLY技术周刊!深度挖掘业界热点动态,来自团队大咖的专业点评,带你深入了解团队研究的技术方向. 登高远眺 天高地迥,觉宇宙之 ...

  5. 蒲公英 · JELLY技术周刊 Vol.16 谷歌首个线上 Web 开发者大会

    蒲公英 · JELLY技术周刊 Vol.16 近期,谷歌有史以来的第一次线上谷歌 Web 开发者大会,Web Vitals.PWA.DevTools 和 Lighthouse 6.0 等一系列特性或产 ...

  6. 蒲公英 · JELLY技术周刊 Vol.17: 90 行代码实现 React Hooks

    蒲公英 · JELLY技术周刊 Vol.17 React Hooks 相信大家都不陌生,自被设计出以来就备受好评,在很多场景中都有极高的使用率,其中原理更是很多大厂面试中的必考题,很多朋友都能够如数家 ...

  7. 蒲公英 · JELLY技术周刊 Vol.19 从零开始的 Cloud IDE 开发

    蒲公英 · JELLY技术周刊 Vol.19 你是否也会有想法去开发一个自己的 IDE 却苦于时间和精力不足,完成 Desktop IDE 却又被 Cloud IDE 的概念追在身后难以入睡,这样的两 ...

  8. 蒲公英 · JELLY技术周刊 Vol.20: Vue3 极致优化——分析 Vue3 Compiler 告诉你为什么这么快

    蒲公英 · JELLY技术周刊 Vol.20 性能优化是一条无尽的路,我们总是可以找到各种途径去提升体验,不论是响应时间还是按需加载,亦或是根据框架或者组件有针对性的优化都会是不错的方法.如果你在使用 ...

  9. 蒲公英 · JELLY技术周刊 Vol.22: npm i react-router@6.0.0-beta.0

    蒲公英 · JELLY技术周刊 Vol.22 近期 React Router 已经释出了 6.x 的 beta 版本,正式版本已经不远了,作为 React 生态中的重要组成部分,React Route ...

随机推荐

  1. 对udp dns的一次思考

    目前昨天查一个线上问题:""dns服务器在我们的设备, 有大量的终端到设备上请求解析域名,但是一直是单线程,dns报文处理不过来", 然而设备是多核,dns服务器一直不能 ...

  2. 如何开发一个maven插件

    maven是当下最流行的项目管理工具,其丰富的插件为我们的工作带来了很大的便利. 但是在一些情况下,开源的插件并不能完全满足我们的需求,我们需要自己创建插件,本文就从0开始带大家一起创建自己的插件. ...

  3. Innodb之(临时)表空间、段、区、块

    引用连接:https://www.cnblogs.com/duanxz/p/3724120.html 对于innodb存储引擎而言,其数据文件最小的存储单位为页.默认为16KB大小.在页的基础上又分为 ...

  4. 调整PG分多次调整和一次到位的迁移差别分析

    前言 这个问题来源于我们研发的一个问题,在进行pg调整的时候,是一次调整到位好,还是分多次调整比较好,分多次调整的时候会不会出现某个pg反复挪动的问题,造成整体迁移量大于一次调整的 最近自己的项目上也 ...

  5. 预估Ceph集群恢复时间

    一.前言 本章很简单,就是预估集群恢复的时间,这个地方是简单的通过计算来预估需要恢复的实际,动态的显示 二.代码 #!/usr/bin/env python # -*- coding: UTF-8 - ...

  6. Linux_Python版本控制

    第1步:更新gcc,因为gcc版本太老会导致新版本python包编译不成功 复制代码代码如下: yum -y install gcc 系统会自动下载并安装或更新,等它自己结束 第2步:安装wget,这 ...

  7. python3处理csv文件

    1. 基础语句 1.1 文件的读取 如果需要读取一行数据如下表1所示,那么需要读取域名下面的数据,便使用如下代码: with open('A.csv','rb') as csvfile: reader ...

  8. FL Studio钢琴卷轴之刷子工具以及其他

    上一篇文章我们重点讲解了FL Studio钢琴卷轴的画笔工具,今天我们就来讲解钢琴卷轴窗口中剩下的工具.由于接下来的工具都很简单,所以我们将放在一起讲,现在就和小编一起来看看FL Studio钢琴卷轴 ...

  9. Vegas干货分享,如何制作霓虹灯效果

    在各色各样的展会中,各种炫彩华丽的灯光和光影一直都能吸引到人们大量的关注.同样,在视频制作中,光线的气氛渲染也是常用的方法,常用也就代表着效果明显,也是很多刚学视频剪辑小伙伴们想要学习的一种方法. 今 ...

  10. Centos7安装Nginx详细步骤

    前言 Nginx 是一款轻量级的Web 服务器 .反向代理服务器及电子邮件(IMAP/POP3)代理服务器. 常用用途: ✓ 1. 反向代理 ✓ 2. 正向代理 这里我给来2张图,对正向代理与反响代理 ...