蒲公英 · JELLY技术周刊 Vol.33: 前端基础课堂开课啦～

蒲公英 · 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），不定时推送文章。