如何只使用CSS提升页面渲染速度

作者 | Rumesh Eranga Hapuarachchi

译者 | 张健欣

策划 | 田晓旭

用户喜欢快速的 Web 应用。他们期望页面加载速度快,运行流畅。如果滚动时出现动画中断或延迟,用户很可能就会离开你的网站。作为一名开发者,你可以做很多事情来提升用户体验。本文主要介绍你可以用来提升页面渲染速度的 4 个 CSS 技巧。

1. Content-visibility

一般来说,大部分 Web 应用都有复杂的 UI 元素,并且它的扩展超出了用户在浏览器视图中所能看到的范围。在这种情况下,我们可以使用content-visibility来跳过渲染屏幕之外的内容。如果你有大量屏幕之外的内容的话,这会大大减少页面渲染时间。

            

如何正确使用别人的开源代码?

为什么要写这个?

我之所以写这个话题,是因为最近我看到有些人在他们的项目中使用我的代码而没有保留版权声明(我真的不想在本文中怪任何人)。
他们使用我的代码并不是真正的问题,我喜欢鼓舞其他人根据我的一些概念和想法做一些很棒的事情,并且很高兴能为您提供代码帮助。因此,每个人都可以自由使用我的代码,但是根据给定的许可条款,现在是重要的部分。您也可以说“credit where credits needed”。在软件环境中开源并不意味着您可以复制漂亮的东西并将其粘贴到您的项目中,并告诉所有人您做得很好。那不是它的工作方式,因为原始作者会生气,而当作者感到生气时,他很可能不再发布出色的开源软件,或者至少他不会发布。可以这样考虑:我使用了另一位开发人员的出色代码,这位开发人员投入了大量时间来编写这段出色的代码,至少我可以赞扬编码人员,以展示自己的才能。感谢。我也在写它,是因为我经常看到它,没人在乎许可证。
本文应该是有关软件获得许可并要使用它时的确切摘要。我挑选了最常见的OS(开源)许可证,因为那里有很多许可证,请随时查看所有许可证。您下次可以将本文用作指导;-)我对完整性不承担任何责任,如果您认为我忘记了什么,请告诉我!…

        

谁说明天上线,这货压根不知道开发流程!

一、前言

互联网公司常见工种有哪些?

互联网中一个项目的上线会需要各个工种间的配合,以研发为视角上会承接产品需求,下会交给测试验证,最终完成项目交付上线。其实除此之外,还会有业务、运营、UI设计、运维,来配合项目的发起、使用和运维维护。

图 18-1,互联网工种协同合作。…

connect() to unix:/var/run/php-fpm.sock failed (11: Resource temporarily unavailable)

nginx + php做服务,在高并发的时候会出现一些错误  connect() to unix:/var/run/php-fpm.sock failed (11: Resource temporarily unavailable)  。

目前有两种方法可以试试。

环境: ubuntu + nginx + php7.4

 

一、修改参数:

1、内核修改

sudo vim /etc/sysctl.conf

net.ipv4.tcp_max_syn_backlog = 4096
net.core.netdev_max_backlog = 4096
sudo sysctl -p生效.

2、php-fpm配置修改

修改  /etc/php/7.4/fpm/pool.d/www.conf

listen.backlog = 4096
            

轻松理解HTTP缓存策略

上一篇文章我写了koa-static的源码解析,其中用到了HTTP的缓存策略,给返回的静态文件设置了一些缓存的头,比如Cache-Control之类的。于是我就跟朋友讨论了一下HTTP的缓存策略:

朋友说:“HTTP里面控制缓存的头(header)太多了,啥Cache-ControlETagLast-Modified,一大堆,乱七八糟的,而且之间逻辑关系不强,要掌握基本靠背!”

我有点惊讶:“为什么要去背这个呢?所有的技术都是为了解决问题而存在的,不了解问题而去单纯的学习技术,去,背,去,死记,确实很枯燥,而且效果不好。HTTP缓存策略只是为了解决客户端和服务端信息不对称的问题而存在的,客户端为了加快速度会缓存部分资源,但是下次请求时,客户端不知道这个资源有没有更新,服务端也不知道客户端缓存的是哪个版本,不知道该不该再返回资源,其实就是一个信息同步问题,HTTP缓存策略就是来解决这个问题的。如果我们跳出这种纯粹的技术思维,我们会发现生活中这种信息同步问题也很常见。而我们解决这些问题的思路很多时候都是司空见惯了,如果从这个角度来说,这个问题就很好理解!”

于是我给他讲了一个我小时候租光碟看奥特曼的故事。…

            

explain | 索引优化的这把绝世好剑,你真的会用吗?

前言

对于互联网公司来说,随着用户量和数据量的不断增加,慢查询是无法避免的问题。一般情况下如果出现慢查询,意味着接口响应慢、接口超时等问题。如果是高并发的场景,可能会出现数据库连接被占满的情况,直接导致服务不可用。

慢查询的确会导致很多问题,我们要如何优化慢查询呢?…

        

什么是回流与重绘 (Reflow & Repaint)

写在前面

在讨论今天的主角之前,我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例,Firefox 使用Geoko——Mozilla 自主研发的渲染引擎,Safari 和Chrome 都使用 webkit

我们主要以 Webkit的主流程为例

  • 浏览器使用流式布局模型 (Flow Based Layout)
  • 解析HTML 生成 DOM 树
  • 解析CSS 生成CSSOM 规则树
  • 将 DOM 树与 CSSOM 规则树合并在一起生成渲染树