优化

11s到⚡1s,性能优化之首屏加载

全文共6511字/词,阅读大概需要13分钟,太长不看党请直接移步「开始优化」部分直接查看优化手段

背景

前段时间公司服务器网络波动,网站访问变慢,一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下,访问新项目时,加载了近1分钟都没加载出来,而访问其他页面顶多也就30-40s。

在网络恢复后,尝试访问了下页面,无缓存首次打开需要等待近11s的时间,最大的资源达到了3.7M...

在对项目做了一些优化处理后,再次无缓存打开可以发现网页几乎是秒开,平均耗时在1s以内

在这里总结记录一下,基本上都是一些常规可复制的优化手段,希望能为同样想优化网页性能的你提供思路~

优化效果

Network

Slow3G条件下22-25s加载完成

lighthouse

hiper

关于性能优化

在开始之前,我们需要明白一个原则:性能优化的最终目的是提升用户体验
简而言之就是让用户感觉这个网站很「快」(至少不慢hh),这里的「快」有两种,一种是「真的快」一种是「觉得快」

  • 「真的快」:可以客观衡量的指标,像网页访问时间、交互响应时间、跳转页面时间
  • 「觉得快」:用户主观感知的性能,通过视觉引导等手段转移用户对等待时间的关注

做好这两方面都能提升用户对网站的性能评价。

权衡取舍

另外就是软件工程没有银弹,一种优化方案可能适用于大多数项目,但是某些特殊情况下很可能会起反效果。

举个,由于浏览器有单域名下并发请求限制,通常我们会将依赖统一打成一个vendor包(vue-cli默认策略),减少首屏请求数,且依赖不变动的情况下文件指纹不变,可以有效利用304缓存。在依赖不多的情况这么处理确实有助于提升加载速度,但一旦依赖多起来,vendor就会特别的大,在弱网条件下,会严重拖慢页面显示。这显然不是我们想要的,所以我们根据情况会对vendor进行拆分,比如拆分到CDN,或者直接拆分到页面中

因此,我们在做性能优化过程中,必须根据最终能给用户体验带来的提升权衡后做出适合当前项目的选择

指标和目标

目标会影响我们在过程中的决策
指标则用来度量我们的目标

目标

首先我们需要确定目标,根据场景和项目复杂度不同,制定的目标也不同,比如希望比竞品快20%,或者符合标准的"2-5-10"原则等等

这里我定下的目标是

  • 正常网速下,2s内加载完成
  • 弱网下,30s内加载完成

指标

关于指标这块,简单介绍下常见指标

  • FCP(First
    

Zend Engine中的函数内联-使用完全限定函数名称提高PHP程序性能

Zend Engine中的函数内联

 Zend Engine(PHP)特殊功能内联

现代PHP很快!它具有多项性能功能,例如OPCache,JIT和其他编译阶段的改进,可针对许多PHP应用程序进行智能优化。

检查OPCode是确保PHP可以进行最佳优化的简便方法。使用列出的OPCode,可以更清楚地了解给定的PHP代码段是否采用了执行预期任务所需的最短数量的OPCode。

目前,PHP有30多个这样的函数,它们使用特殊的OPCode或内联以提高性能。


展示这种效果的一个例子是 strlen函数。它返回给定字符串的长度,PHP尝试抢先优化。

if (strlen('Test') < 2) {
    echo "Test";
}

在此代码段中,该strlen函数在静态字符串文字上调用,并且PHP可以完全消除此块,因为Test字符串的长度是固定的,并且比较值也是静态值。

使用OPCode dump可以更好地揭示这一点

优化之前

php 
        

使用 webpack 代码分割和魔术注释提升应用性能

1. Web 应用性能优化的关键

关于 Web 应用性能优化,有一点是毫无疑问的:「页面加载越久,用户体验就越差」。我们几乎可以说 Web 应用性能优化的关键之处就在于:减少页面初载时,所需加载资源的「数量」和「体积」。

那么当所需加载的资源数量到达多少或资源体积小于多少,我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢?下面是给出的一些参考值,该参考值考虑到了移动端与国外等多种访问环境:

  • 页面初载时,所有未压缩的 JavaScript 脚本大小:<=200KB
  • 页面初载时,所有未压缩的 CSS 资源大小:<=100KB
  • HTTP 协议下,请求资源数:<=6 个
  • HTTP/2 协议下,请求资源数:<=20 个 ;
  • 90% 的代码利用率(也就是说,仅允许 10%
    

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

作者 | Rumesh Eranga Hapuarachchi

译者 | 张健欣

策划 | 田晓旭

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

1. Content-visibility

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

            

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
            

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

前言

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

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

        

实践带你了解–http缓存

这次文章为了了解http缓存的机制,自己搭建nginx和设置nginx配置
网上的文章其实有很多,但是大部分都是文字表达,缓存这块又比较偏向理论,导致我一开始也是云里雾里的

所以这次我通过截图和步骤图来说明,并且进行文字补充, 不喜欢看文字的话其实看图片就行啦

以下每次截图都是无痕模式的…