原创

响应式图像正确设置方法

响应式图像正确设置方法,代码如下:

PC,平板,手机显示良好:

我们用<picture>标签来实现同时适配不同像素密度、不同大小的屏幕。srcset属性用来指定多张图像,适应不同像素密度的屏幕。

通过 媒体查询,来为不同宽度的屏幕设置不同的图片。

其中,1x 2x 3x 代表设备像素比

通常 pc的设备像素比为1,iphone7为2,iphone7 plubs为3,一些手机为4,还有一些为1.5,3.65等非整数值。

在下面,所有的设备像素比都要用同一张图片,这样才能显示正常。…

                

php设置samesite cookie,有效防止CSRF

php设置samesite cookie,支持所有PHP版本。

PHP 7.3 的setcookie函数已经支持samesite属性,但对于7.3以下版本,可以用以下函数代替:

<?php
$options = [
    'expires' => time()+18400,
    'domain' => 'localhost',
    'httponly' => false,
    'samesite' => 'Lax',
    'secure' => false,
    'path' => '/'
  ];

function samesite_setcookie($name, $value, array $options)
{
    $header = 'Set-Cookie:';
    $header .= rawurlencode($name) 
                

聊聊你不知道的网页无闪烁刷新效果

先看几个网站的效果:

1.CSDN首页

 

2.QQ.com

 

3.GraphQL中文网

4.phalcon中文网

 

现象研究:

仔细查看上面的4个视频,

上面演示的是用chrome浏览器打开以上网站的首页完成后,点击刷新按钮,页面呈现的刷新效果。

第1个是csdn的首页,刷新后可以看到的是整个页面都在闪。

第2个是QQ.com首页,刷新后,可以看到只有一少部分局部区域在闪。

第3个是GraphQL中文网,刷新后,可以看到也是一局部区域在闪(是一个动画效果)

第4个是phalcon中文网,刷新后,整个页完全不闪。

 

普及知识:

在现代浏览器比如:chrome,firefox等浏览器中,当一个页面完全加载完成后,会缓存到内存中,这时再去点刷新按钮或按Ctrl+R去刷新页面,页面通常来说是不会闪的。

如果发生了闪的现象,一般原因是,有些元素是动态js生成的,或在页面加载后期由css或js 改变了其位置或大小造成的。

但是当你按Ctrl+F5去强制刷新页面或清空浏览器缓存后再刷新页面,这时就会发生页面闪的现象。因为这是重新去服务器获取页面,而不是从浏览器缓存读取!

 

注:用IE浏览器刷新的话,一般总是会发生闪的现象的(未测试所有IE版本)

 

 

原创文章,转载请注明来自Lenix的博客,地址https://blog.p2hp.com/archives/6276

 

        

通过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 
                    

最新配置Nginx实现图片防盗链并排除对搜索引擎的屏蔽教程

配置Nginx实现图片防盗链并排除对搜索引擎的屏蔽

有时候我们不希望自己网站的图片被别的网站调用,因为这会消耗我们服务器大量的带宽,把服务器拖慢,我们可以用图片防盗链技术来达到我们的目的。

于对nginx服务器,我们使用ngx_http_referer_module模块来实现上述需求。

nginx referer指令简介

nginx模块ngx_http_referer_module通常用于阻止对“Referer”(来源)头字段中具有无效值的请求访问站点.我们应该牢记,有些合法的请求是不会带referer来源头部的,所以有时候不要拒绝来源头部(referer)为空的请求.…

    

使用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程序