Author: admin

使用javascript Page Visibility API,判断用户是否关闭了浏览器窗口(html页面)

admin web前端 暂无评论 747 浏览

Page Visibility API

 

简介

有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件。

  • pagehide
  • beforeunload
  • unload

但是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。

  • 用户点击了一条系统通知，切换到另一个 App。
  • 用户进入任务切换窗口，切换到另一个 App。
  • 用户点击了 Home 按钮，切换回主屏幕。
  • 操作系统自动切换到另一个 App（比如，收到一个电话）。

上面这些情况，都会导致手机将浏览器进程切换到后台，然后为了节省资源，可能就会杀死浏览器进程。

以前，页面被系统切换，以及系统清除浏览器进程，是无法监听到的。开发者想要指定，任何一种页面卸载情况下都会执行的代码，也是无法做到的。为了解决这个问题，就诞生了 Page Visibility API。不管手机或桌面电脑，所有情况下，这个 API 都会监听到页面的可见性发生变化。

这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的。

  • 对服务器的轮询
  • 网页动画
  • 正在播放的音频或视频

document.visibilityState

这个 API 主要在document对象上，新增了一个document.visibilityState属性。该属性返回一个字符串，表示页面当前的可见性状态，共有三个可能的值。

…
    
Read more

原使用PHP做 http pxory 缓存&代理, 使用redis做缓存,支持毫秒过期,拥有超高性能

admin PHP 暂无评论 458 浏览

使用PHP做 http pxory 缓存&代理, 使用 redis 做缓存,支持毫秒过期,拥有超高性能

<?php

 //PHP http pxory 缓存&代理, 使用redis做缓存,支持毫秒过期,拥有超高性能

 $url=@$_GET['url'];
if (empty($_GET['url'])) {
     echo 'url is empty ';
     exit;
}

 $path=parse_url($url, PHP_URL_PATH);
 $key=$path;

 $redis = new Redis();
 $redis->pconnect('127.0.0.1', 6379);

if ($content=$redis->get($key)) {
     echo $content;
     exit;
}
…
                        
Read more

浏览器中的preflight请求-预检请求

admin 概念 暂无评论 1,136 浏览

什么是preflight请求？

preflight，一个cors预检请求，属于options请求。该请求会在浏览器认为即将要执行的请求可能会对服务器造成不可预知的影响时，由浏览器自动发出。
利用预检请求，浏览器能够知道当前的服务器是否允许执行即将要进行的请求，只有获得了允许，浏览器才会真正执行接下来的请求。
所以，总结有几点：

  • 浏览器自动发出该请求，不需要用户干预
  • 该请求发生在用户发送的请求之前，只有预检请求通过，用户发送的请求才能发送到服务器，否则抛出CORS错误。

prefilght触发条件

preflight预检请求属于cors规范的一部分，是一种服务器验证机制。目前所有浏览器都实现了该规范，但是不免有些浏览器会对规范内容进行扩充。但是必须实现的规范是：只有以下条件都满足的情况下才不会发送预检请求，否则会在发送用户请求之前发送预检请求，以免在获得允许之前对服务器产生不可预知的影响。
条件有：

  1. 请求方法限制

只能使用GET、POST方法

  1. 请求头限制

只能包含九种请求头:

  • Accept
  • Accept-language
  • Content-Language
  • Content-Type
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
  1. Content-type限制

只能包含三种类型：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded
  1. XMLHttpRequestUpload对象限制

该对象没有注册任何事件监听器

  1. ReadableStream对象限制

请求中不能使用ReadableStream对象

如果以上条件有一条不满足，浏览器则会自动发起预检请求

配置preflight请求

浏览器自动发送的预检请求，一般采用三个字段来表示：

  • Origin：表示当前请求的访问来源（域名）
  • Access-Control-Request-Headers：告知服务器实际请求所携带的自定义首部字段
…
Read more

js如何在一个日期上面加上几小时 几分钟 几秒

admin web前端 暂无评论 7,628 浏览

1. 打开任一浏览器，本文以chrome浏览器为例，打开后，按F12，进入开发者模式，点击【Console】标签

2. 在【Console】页签中，书写js代码，首先将当前日期时间赋值给一个js变量curTime，代码如下：

var curTime = new Date();

3.在当前时间curTime变量上加上1个小时，并将结果赋值给addHour变量，代码如下：

var addHour = curTime.setHours(curTime.getHours() 1);

4.从运行效果可以看到，addHour变量的值不是一个日期时间格式，需要使用new Date()，将其转换为日期时间格式，代码如下：

new Date(addHour);

5.在当前时间curTime变量上加上10分钟，再转换为日期时间格式，代码如下：

new Date(curTime.setMinutes(curTime.getMinutes() 10));

6.在当前时间curTime变量上加上10秒钟，再转换为日期时间格式，代码如下：

new Date(curTime.setSeconds(curTime.getSeconds() 10));

7.在当前时间curTime变量上加上1分40秒，其实也就相当于加100秒，代码如下：

new Date(curTime.setSeconds(curTime.getSeconds() 100));

…

Read more

+new Date()是什么意思

admin web前端 暂无评论 367 浏览

js在某个数据类型前使用‘+’，这个操作目的是为了将该数据类型转换为Number类型，如果转换失败，则返回NaN;
例如：

+'2'+1 // 3
+[1]   // NaN

+new Date() 会调用Date.prototype 上面的 valueOf方法，根据
new Date().getTime() === new Date().valueOf() //true
下面的例子返回效果等同：

      console.log(+new Date());
      console.log
…
Read more

原nginx启用proxy cache 代理缓存

admin Nginx 暂无评论 388 浏览

nginx启用proxy cache 代理缓存

nginx.conf中的
http {
下面加

proxy_cache_path /data/nginxcache levels=1:2 keys_zone=my_cache:500m max_size=10g inactive=30d use_temp_path=off;

某个站点的配置文件中增加以下配置:

location / {

proxy_cache my_cache;
proxy_cache_revalidate on;
#proxy_cache_valid 200 206 304 301 302 30d;
proxy_cache_valid any 30d;
proxy_ignore_headers "Set-Cookie";
proxy_ignore_headers "Expires";
#proxy_ignore_headers "Age";
proxy_cache_key …

                
Read more

原ubuntu(linux)系统死机(无响应)后,如何强制重启.

admin 个人日志 暂无评论 4,633 浏览

ubuntu(linux)系统死机后,如何强制重启:

按 Alt+SysRq+B可强制重启.

有的电脑需要按Fn键,即 Fn+Alt+SysRq+B.

注:sysrq键一般和prtsc(print screen)键是一个.

如果你按Fn+Alt+SysRq+B不起作用,请按以下做:

先按Fn+Alt+SysRq,

保持按住Alt,再松开SysRq+Fn,再按B键.

即可.

为了更安全的做法是

按住Fn+Alt+SysRq,再依次按下:REISUB键.(同步 磁盘,防止数据丢失及损坏)

参考 :

https://www.cnblogs.com/reid21/p/9507366.html?ivk_sa=1024320u

https://www.howtogeek.com/119127/use-the-magic-sysrq-key-on-linux-to-fix-frozen-x-servers-cleanly-reboot-and-run-other-low-level-commands/

https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html

https://unix.stackexchange.com/questions/569728/sysrqb-boot-not-working-but-o-turning-off-is

 

…

        
Read more