优化

深入理解前端性能监控

页面的性能问题是前端开发中一个重要环节,但一直以来我们没有比较好的手段,来检测页面的性能。直到W3C性能小组引入的新的API window.performance,目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对象。放置在global环境下,通过JavaScript可以访问到它。

使用性能API

你可以通过以下方法来探测和兼容performance:

var performance = window.performance || 
    window.msPerformance || 
    window.webkitPerformance;
if (performance) {
    // 你的代码
}
复制代码

先来了解一下performance的结构

performance.memory是显示此刻内存占用情况,它是一个动态值,其中: usedJSHeapSize表示:JS 对象(包括V8引擎内部对象)占用的内存数 totalJSHeapSize表示:可使用的内存 jsHeapSizeLimit表示:内存大小限制 通常,usedJSHeapSize不能大于totalJSHeapSize,如果大于,有可能出现了内存泄漏。

performance.navigation显示页面的来源信息,其中:

        

通过PHP单例模式与长连接减少MySql连接数

在Mysql驱动的PHP网站中,MySql连接的一般都是利用脚本的结束来进行释放,在一些分层写的php网站中,若一个页面含有多个数据访问类,由于每个数据访问类都会有数据库的连接,导致这一个页面在脚本结束前会有多个数据库连接,在一些大型的页面连接可能多至数十上百,为此需要进行必要的控制,对于解释性的PHP语言,脚本是顺序执行的,也就是说数据库连接的利用同时只有一个,根据这个特点,可以用单例模式来进行改造。

<?php
  class ConnecToDB
  {
      private static $instance;
      private function _constuct()
      {
      } //私有构造函数,防止外界构造新对象,
      public static function GetConnec()
      {
          if (!self::$instance instanceof self) {
              self::$instance =new self;//若当前对象实例不存在
          }
          $temp=self::$instance; //获取当前单例
            return $temp::Con() ;  //调用对象私有方法连接 数据库
      }
      //连接到数据库
      private static function 
                    

浏览器原生的图片懒加载

在这篇文章中,我们将看看为网络loading带来原生<img><iframe>懒惰加载的新属性。对于好奇的人来说,这里有一个实际的预览:

<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

我们希望能够为loadingChic 75提供支持,并正在深入研究我们即将发布的功能。在那之前,让我们深入了解它的loading工作原理。…

Linux 常用内核网络参数与相关问题处理

本文总结了常见的 Linux 内核参数及相关问题。修改内核参数前,您需要:

  • 从实际需要出发,最好有相关数据的支撑,若您的业务没有受到影响不建议调整内核参数。
  • 了解每一个参数的具体作用,并且同类型或版本操作系统下内核参数可能有所不同。
  • 备份 ECS 实例中的重要数据。参阅文档创建快照

Linux 常用内核网络参数

参数 描述
net.core.rmem_default 默认的 TCP 数据接收窗口大小(字节)。
net.core.rmem_max 最大的 TCP 数据接收窗口(字节)。
net.core.wmem_default 默认的 TCP 数据发送窗口大小(字节)。
net.core.wmem_max 最大的 TCP 数据发送窗口(字节)。
net.core.netdev_max_backlog 在每个网络接口接收数据包的速率比内核处理这些包的速率快时,允许送到队列的数据包的最大数目。
net.core.somaxconn 定义了系统中每一个端口最大的监听队列的长度,这是个全局的参数。
net.core.optmem_max 表示每个套接字所允许的最大缓冲区的大小。
net.ipv4.tcp_mem 确定 TCP 栈应该如何反映内存使用,每个值的单位都是内存页(通常是
                

Linux 实例常用内核网络参数介绍与常见问题处理

Linux 实例常用内核网络参数介绍与常见问题处理

KB: 41334

 ·

更新时间:2018-11-16 20:26:51

   

本文总结了常见的 Linux 内核参数及相关问题。修改内核参数前,您需要:

  • 从实际需要出发,最好有相关数据的支撑,不建议随意调整内核参数。
  • 了解参数的具体作用,且注意同类型或版本环境的内核参数可能有所不同。
  • 备份 ECS 实例中的重要数据。参阅文档创建快照

查看和修改 Linux 实例内核参数

方法一、通过 /proc/sys/ 目录

查看内核参数:使用 cat 查看对应文件的内容,例如执行命令 cat /proc/sys/net/ipv4/tcp_tw_recycle 查看 

                

发现大量的mysql TIME_WAIT解决办法

今天早上一上班,有同事就反映公司好几个网站都打不开,登陆数据库
服务器(windows),发现很卡,于是重启了下服务器,进入系统后,没过一会问题依旧,查看了下系统进程,发现mysql占用率达到99%,可以肯定的是mysql连接出现问题:
netstat -an
192.168.12.13:3306      192.168.12.12:30443      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30444      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30445      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30446      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30447      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30448      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30449      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30450      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30451      TIME_WAIT
192.168.12.13:3306      192.168.12.12:30452      TIME_WAIT…
                

MySQL 数据库优化,看这篇就够了

 

前言

 

数据库优化一方面是找出系统的瓶颈,提高MySQL数据库的整体性能,而另一方面需要合理的结构设计和参数调整,以提高用户的相应速度,同时还要尽可能的节约系统资源,以便让系统提供更大的负荷.

 

1、优化一览图

 

MySQL 数据库优化,看这篇就够了

 

2、优化

 

笔者将优化分为了两大类,软优化和硬优化,软优化一般是操作数据库即可,而硬优化则是操作服务器硬件及参数设置.

 

2.1 软优化

 

2.1.1 查询语句优化

 

1、首先我们可以用EXPLAIN或DESCRIBE(简写:DESC)命令分析一条查询语句的执行信息.

 

2.例:

 

DESC SELECT * FROM `user`

 

显示:

 

MySQL 数据库优化,看这篇就够了

 

其中会显示索引和查询数据读取数据条数等信息.

 

2.1.2 优化子查询

 

在MySQL中,尽量使用JOIN来代替子查询.因为子查询需要嵌套查询,嵌套查询时会建立一张临时表,临时表的建立和删除都会有较大的系统开销,而连接查询不会创建临时表,因此效率比嵌套子查询高.

 

2.1.3 使用索引

 

索引是提高数据库查询速度最重要的方法之一,关于索引可以参高笔者<MySQL数据库索引>一文,介绍比较详细,此处记录使用索引的三大注意事项:

 

1、LIKE关键字匹配'%'开头的字符串,不会使用索引.

 

2、OR关键字的两个字段必须都是用了索引,该查询才会使用索引.

 

3、使用多列索引必须满足最左匹配.

 

2.1.4 分解表

 

对于字段较多的表,如果某些字段使用频率较低,此时应当,将其分离出来从而形成新的表,

 

2.1.5 中间表

 

对于将大量连接查询的表可以创建中间表,从而减少在查询时造成的连接耗时.

 

2.1.6 增加冗余字段

 

类似于创建中间表,增加冗余也是为了减少连接查询.

 

2.1.7 分析表,检查表,优化表

 

分析表主要是分析表中关键字的分布,检查表主要是检查表中是否存在错误,优化表主要是消除删除或更新造成的表空间浪费.

 

1、分析表:
    

Nginx 学习笔记 介绍HTTP / 2服务器推送(Server Push)(译)

原文地址:https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/

我们很高兴地宣布,2018年2月20日发布的NGINX 1.13.9支持HTTP / 2服务器推送。对于NGINX Plus用户,即将发布的NGINX Plus R15版本将包含HTTP / 2服务器推送支持,计划于2018年4月发布。

HTTP / 2规范中定义的服务器推送允许服务器抢先将资源推送到远程客户端,预计客户端可能很快会请求这些资源。通过这样做,您可以在页面加载操作中将RTT(往返时间 - 请求和响应所需的时间)减少一个RTT或更多,从而为用户提供更快的响应。

服务器推送可用于为客户提供样式表,图像以及呈现网页所需的其他资源。您应该注意只推送所需的资源; 不要推送客户端可能已经缓存的资源。

在这篇博文中,我描述了:

配置HTTP /

                    

使用HTTP/2服务端推送(Server Push),大幅提升网页脚本图片加载速度

使用HTTP/2服务端推送(Server Push),大幅提升网页脚本图片加载速度

内容概览

NGINX从1.13.9版本开始支持HTTP/2服务端推送, 使用此特性,能大幅提升前端页面加载速度,如,js.css,image等的加载速度大幅提升。经测试js.css的加载时间,从平均几百毫秒到几秒提升到几毫秒到十几毫秒(1M带宽测试)。

升级工作主要包括:

  1. 升级NGINX
  2. 修改NGINX配置
  3. 修改PHP程序
                        

网页的图片,js ,css ,视频 都加 http accept-ranges头,以提高性能

网页的图片,js ,css ,视频 都加 http accept-ranges头,以支持多线程加载,断点续传,提高性能!目前各大网站都在使用此方式!

nginx 设置为:

server {
  listen 80;
  server_name p2hp.com;
  location ~ ^/(img/|js/|css/|upload/|font/|fonts/|res/|video) {
    add_header Access-Control-Allow-Origin *;
    add_header Accept-Ranges bytes;
    root /var/www/...;
    access_log off;
    expires 30d;
  }
  ...
}