LiNPX https://www.linpx.com/ zh-CN LiNPX系一个个人博客,里面的内容当然主要是偏向程序员和互联网这块的,绝大多数是个人的学习和备忘,当然还有一些其他的教程和一些心得看法,希望自己成长的同时也能帮助大家. Fri, 06 Jan 2017 00:04:00 +0800 Fri, 06 Jan 2017 00:04:00 +0800 DNS Prefetching的小实践 https://www.linpx.com/p/small-practice-of-prefetching-dns.html https://www.linpx.com/p/small-practice-of-prefetching-dns.html Fri, 06 Jan 2017 00:04:00 +0800 Chakhsu Lau 在实践之前,我们先介绍一下“资源预拉取”的性能优化的技术,这是一种通过预拉取可以告诉浏览器用户在未来可能用到哪些资源的技术。

而预取,一共有两部分:一部分是资源的预取;还有一部分是DNS的预解析。

以前这种实践也被称为“prebrowsing”,但这并不是一种单一的技术,实际上可以拆分成很多小点:dns-prefetch, preconnect, prefetch, subresource, prerender等等。

而今天要讲的“DNS prefetching”就是DNS的预解析的一小部分。

DNS prefetching可以做什么

DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源,告诉客户端可以尽早的解析DNS。

比如我们需要让example.com的静态资源提前加载域名解析,在<head>就可以这么写:

<link rel="dns-prefetch" href="//example.com">

当请求这个域名下的文件时就不需要等待DNS查询了。

DNS prefetching是怎么工作的

如chromium的官方文档所说,chrome 会自动把当前页面的所有带href的link的dns都prefetch一遍:

Manual Prefetch
Chromium uses the "href" attribute of hyperlinks to find host names to prefetch. However, some of those hyperlinks may be redirects, for example if the site is trying to count how many times the link is clicked. In those situations, the "true" targeted domain is not necessarily discernible by examining the content of a web page, and so Chromium not able to prefetch the final targeted domain.

再根据官方文档发现,a标签的默认启动在HTTPS不起作用:

DNS Prefetch Control
By default, Chromium does not prefetch host names in hyperlinks that appear in HTTPS pages. This restriction helps prevent an eavesdropper from inferring the host names of hyperlinks that appear in HTTPS pages based on DNS prefetch traffic. The one exception is that Chromium may periodically re-resolve the domain of the HTTPS page itself.

<head>就加上下面的一句代码,就可以强制启动:

<meta http-equiv="x-dns-prefetch-control" content="on">

DNS prefetching有什么好处

合理的dns prefetching能对页面性能带来50ms ~ 300ms的提升,有人做了这方面的统计。

再如chromium的官方文档所说,dns prefetching的网络消耗是极低极低的:

Each request typically involves sending a single UDP packet that is under 100 bytes out, and getting back a response that is around 100 bytes. This minimal impact on network usage is compensated by a significant improvement in user experience.

DNS prefetching的实践

这次实践是在lpisme主题上实现,主要是对header.php文件操作。而DNS prefetching的实践对象就是www.linpx.com用的CDN上的静态资源,当然我博客只是CDN了图片资源和公共JS

打开header.php,在<meta charset="<?php $this->options->charset(); ?>">后面,添加:

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="<?php $this->options->cdn_add(); ?>" />
<link rel="dns-prefetch" href="//cdn.bootcss.com" />

其中<?php $this->options->cdn_add(); ?>是主题设置里的七牛云存储域名

还有,如果你没有开启HTTPS,<meta http-equiv="x-dns-prefetch-control" content="on">这句是可以删掉的

为了更严谨,还需要添加一个条件判断来圈住上面的代码

<?php if ($this->options->cdn_add): ?>
···
<?php endif; ?>

至此lpisme主题完成DNS prefetching的功能的添加。如果嫌麻烦,我已经push到github上了,直接clone或fetch项目即可。

参考

国内的

  • www.alloyteam.com/2015/10/prefetching-preloading-prebrowsing/
  • segmentfault.com/a/1190000003944417
  • zhuanlan.zhihu.com/p/22362198?refer=jscss

国外的

  • patrickhamann.com/workshops/performance/tasks/2_Critical_Path/2_3.html
  • calendar.perfplanet.com/2012/speed-up-your-site-using-prefetching/
  • csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/#section:dns-prefetching
  • medium.com/@luisvieira_gmr/html5-prefetch-1e54f6dda15d#.6tv1ne3rn
  • www.bramstein.com/writing/preload-hints-for-web-fonts.html
  • blog.secure64.com/?p=367
]]>
12 https://www.linpx.com/p/small-practice-of-prefetching-dns.html#comments https://www.linpx.com/feed/p/small-practice-of-prefetching-dns.html
再一篇关于“柯里化”的函数传递的小思考 https://www.linpx.com/p/small-thinking-again-about-currying-transfer-function.html https://www.linpx.com/p/small-thinking-again-about-currying-transfer-function.html Thu, 29 Dec 2016 01:01:00 +0800 Chakhsu Lau 在洗澡的时候继续思考柯里化的东西,洗完就跑去电脑前继续测试一下,好像然并卵,但还是先写来下来,感觉以后可能会对后面的学习会有帮助。

还是JavaScript编写,这次就不列出运行结果。

一个函数传递

function say(word) {
    console.log(word);
}

function execute(someFunction, value) {
    someFunction(value);
}

execute(say, "yes");

多个函数传递的使用

function say(arg1) {
    console.log(arg1);
}

function write(arg2) {
    console.log(arg2);
}

function listen(arg3) {
    console.log(arg3);
}

function execute(someFunction, value) {
    someFunction(value);
}

execute(say, "yes");
execute(write, "no");
execute(listen, "welcome");

我们有时候需要同时去做听读写这三件事,或者其中的两件

function listen(arg1) {
    console.log(arg1);
    return (callback) => {
        return callback && callback(arg1);
    }
}

function say(arg2) {
    console.log(arg2);
    return (callback) => {
        return callback && callback(arg2);
    }
}

function write(arg3) {
    console.log(arg3);
    return (callback) => {
        return callback && callback(arg3);
    }
}

function review(value) {
    console.log(value);
    return (callback) => {
        return callback && callback(value);
    }
}

review(3);
review(3)(say);
review(3)(say)(listen);
review(3)(say)(listen)(write);

大概就这样子,好像没什么用···我还是看看书好了

/逃

]]>
8 https://www.linpx.com/p/small-thinking-again-about-currying-transfer-function.html#comments https://www.linpx.com/feed/p/small-thinking-again-about-currying-transfer-function.html
关于“柯里化”的小笔记 https://www.linpx.com/p/about-curry-small-notes.html https://www.linpx.com/p/about-curry-small-notes.html Tue, 27 Dec 2016 14:59:00 +0800 Chakhsu Lau 真的是小笔记···真的··真·

在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。(摘自wiki)

下面是我实战柯里化的Demo例子,语言是JavaScript。

一个参数的情况下:

例子:

function a(n){
    console.log(n);
}

执行:

a(123);

这,没什么好说的,函数带参然后打印参数,结果返回:

123

两个参数的情况下:

例子:

function b(n){
    console.log(n);
    return function c(m){
        return n*n + m*m;
    }
}

在一个参数的情况下,执行:

b(1);

打印参数,返回里面的c()函数,结果返回:

1
function c(m){
        return n*n + m*m;
}

在两个参数的情况下,执行:

b(1)(2);

打印第一个参数,然后将第二个参数传入给c(),执行计算,结果返回:

1
5

函数之间回调的柯里化

例子:

function c(n1) {
    const m1 = 2;
    console.log(n1);
    return (callback) => {
        return callback && callback(m1);
    }
}

function b(n2) {
    const m2 = 3;
    console.log(n2);
    return (callback) => {
        return callback && callback(m2);
    }
}

function d(n3){
    console.log(n3);
}

在一个参数的情况下,执行:

c(123);

结果返回:

123
(callback) => {
        return callback && callback(m);
    }

在一个参数和一个函数的情况下,执行:

c(123)(b);

结果返回:

123
2
(callback) => {
        return callback && callback(m2);
    }

在一个参数和一个函数的情况下,执行:

c(123)(b)(d);

结果:

123
2
3

不得不说“柯里化”可以更好地理顺闭包的思想。

/逃

]]>
2 https://www.linpx.com/p/about-curry-small-notes.html#comments https://www.linpx.com/feed/p/about-curry-small-notes.html
不够用的ngx_pagespeed的配置教程 https://www.linpx.com/p/not-enough-with-the-ngxpagespeed-configuration-tutorial.html https://www.linpx.com/p/not-enough-with-the-ngxpagespeed-configuration-tutorial.html Sun, 27 Nov 2016 17:04:00 +0800 Chakhsu Lau 从上一篇中,我们知道了如何给自己的nginx装上ngx_pagespeed,那么这篇将会告诉你如何配置使用ngx_pagespeed来加速你站点的前端资源。其中一些配置需要根据自己的站点情况进行筛选使用,例如你的站点的css会保持一直更新的情况下,就不要配置使用CSS的压缩、合并、级联、内联。

创建ngx_pagespeed缓存文件夹

mkdir /tmp/cache/ngx_pagespeed_cache
chown www.www /tmp/cache/ngx_pagespeed_cache

打开你站点的conf配置文件

假设我的配置文件是在 /usr/local/nginx/conf/vhost 的目录

vim /usr/local/nginx/conf/vhost/www.linpx.com.conf

server {}内添加下面配置代码

# 启用ngx_pagespeed    
pagespeed on;    
pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;    
# 禁用CoreFilters    
pagespeed RewriteLevel PassThrough;    
# 启用压缩空白过滤器    
pagespeed EnableFilters collapse_whitespace;
# 把多个CSS文件合并成一个CSS文件    
pagespeed EnableFilters combine_css;    
# 把多个JavaScript文件合并成一个JavaScript文件    
pagespeed EnableFilters combine_javascript;    
# 删除带默认属性的标签    
pagespeed EnableFilters elide_attributes;    
# 改善资源的可缓存性    
pagespeed EnableFilters extend_cache;    
# 更换被导入文件的@import,精简CSS文件    
pagespeed EnableFilters flatten_css_imports;    
pagespeed CssFlattenMaxBytes 5120;    
# 延时加载客户端看不见的图片    
pagespeed EnableFilters lazyload_images;    
# 启用JavaScript缩小机制    
pagespeed EnableFilters rewrite_javascript;    
# 启用图片优化机制    
pagespeed EnableFilters rewrite_images;    
# 预解析DNS查询    
pagespeed EnableFilters insert_dns_prefetch;    
# 重写CSS,首先加载渲染页面的CSS规则    
pagespeed EnableFilters prioritize_critical_css; 
# 禁止pagespeed 处理WordPress的/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
# 禁止pagespeed 处理typecho的/admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/admin/*";

location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }

优化ngx_pagespeed的配置

pagespeed on;下添加memcached的配置(得先有memcached)

pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";

重启nginx

配置完后请记得重启Nginx!

CentOS 6.x:

service nginx restart

CentOS 7.x:

systemctl restart nginx

最后结语:因为工作需要给公司其他站点用上ngx_pagespeed,所以才有了这个教程,但我拖了很久才写,可能会有错漏,欢迎补充完善。

]]>
24 https://www.linpx.com/p/not-enough-with-the-ngxpagespeed-configuration-tutorial.html#comments https://www.linpx.com/feed/p/not-enough-with-the-ngxpagespeed-configuration-tutorial.html
够用的ngx_pagespeed安装教程 https://www.linpx.com/p/enough-ngxpagespeed-installation-tutoria-l.html https://www.linpx.com/p/enough-ngxpagespeed-installation-tutoria-l.html Sat, 12 Nov 2016 21:44:00 +0800 Chakhsu Lau ngx_pagespeed 是 Nginx 的一个扩展模块,主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说,可以省去优化css、js以及图片的过程。ngx_pagespeed对nginx自身负载能力的提升基本是看不到的,甚至会因为进行服务器端的优化而使系统增加负载;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。

ngx_pagespeed模块的主要功能如下:

  • 图像优化:剥离元数据、动态调整,重新压缩
  • CSS和JavaScript压缩、合并、级联、内联
  • 小资源内联
  • 推迟图像和JavaScript加载
  • 对HTML重写、压缩空格、去除注释等
  • 提升缓存周期

这次安装教程是在系统为 CentOS7.2 64位 下实践的。

新的系统或者是低版本的系统需要安装或升级ngx_pagespeed所需的依赖:

RedHat, CentOS, or Fedora

sudo yum install gcc-c++ pcre-devel zlib-devel make unzip

Ubuntu or Debian

sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip

如果已经安装了则需要更新依赖(要求 gcc ≥ 4.8 or clang ≥ 3.3)

官方依赖相关的说明与教程:here

因为我想求稳,所以接下来的配置所需的软件都是11月12日前的最新的稳定版。

下载各种软件

下载ngx_pagespeed

cd /usr/local/src
wget https://github.com/pagespeed/ngx_pagespeed/archive/latest-stable.tar.gz
tar -xvzf latest-stable.tar.gz
mv ngx_pagespeed-latest-stable ngx_pagespeed
cd ngx_pagespeed
wget https://dl.google.com/dl/page-speed/psol/1.11.33.4.tar.gz
tar -xzvf 1.11.33.4.tar.gz && rm -rf 1.11.33.4.tar.gz
./scripts/pagespeed_libraries_generator.sh > /usr/local/nginx/conf/pagespeed_libraries.conf

下载nginx

cd /usr/local/src
wget http://nginx.org/download/nginx-1.10.2.tar.gz
tar -xvzf nginx-1.10.2.tar.gz && rm -rf nginx-1.10.2.tar.gz

下载OpenSSL

cd /usr/local/src
wget https://www.openssl.org/source/openssl-1.0.2-latest.tar.gz
tar -xzvf openssl-1.0.2-latest.tar.gz && rm -rf openssl-1.0.2-latest.tar.gz

查看latest版本号

ls
openssl-1.0.2j

下载PCRE

wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.39.tar.gz
tar -xzvf pcre-8.39.tar.gz && rm -rf pcre-8.39.tar.gz

安装ngx_pagespeed

获取configure arguments

nginx -V
--prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=../openssl-1.0.2j --with-pcre=../pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc

重新整理所需的软件

openssl的目录位置:

/usr/local/src/openssl-1.0.2j

pcre的目录位置:

/usr/local/src/pcre-8.39

ngx_pagespeed的位置目录:

/usr/local/src/ngx_pagespeed

整理新的configure arguments

根据获取到的configure arguments和上面软件的位置,重新整理configure arguments

然后再加上--add-module=/usr/local/src/ngx_pagespeed

整理后的结果为:

--prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2j --with-pcre=/usr/local/src/pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed

开始安装

这里选择重新安装和编译

cd /usr/local/src/nginx-1.10.2
./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2j --with-pcre=/usr/local/src/pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed
make && make install

检查是否安装正常

nginx -V
nginx version: nginx/1.10.2
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-4) (GCC)
built with OpenSSL 1.0.2j  26 Sep 2016
TLS SNI support enabled
configure arguments: --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2j --with-pcre=/usr/local/src/pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed
nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

Ok,至此ngx_pagespeed的安装完毕,至于怎么配置使用下一篇再说吧。

]]>
11 https://www.linpx.com/p/enough-ngxpagespeed-installation-tutoria-l.html#comments https://www.linpx.com/feed/p/enough-ngxpagespeed-installation-tutoria-l.html
终端ssh登录你的服务器 https://www.linpx.com/p/terminal-ssh-login-to-your-server.html https://www.linpx.com/p/terminal-ssh-login-to-your-server.html Sat, 05 Nov 2016 21:50:00 +0800 Chakhsu Lau 一点点声明,这不是严格意义上的教程,目的是记录mac下的ssh配置登录过程,对我来说算是个小笔记。

另外我也写过一篇在CentOS配置SSH密钥的教程:Here

配置登录信息等步骤

1、打开你的iTerm,输入下面命令

vim ~/.ssh/config

2、进入编辑模式,填下ssh登录信息

Host qcloud
        HostName ip或者是域名
        User root或者是其他账户
        IdentityFile 密钥文件所在的详细位置,例如 ~/.ssh/qcloud

Host aliyun
        HostName ip或者是域名
        User root或者是其他账户
        IdentityFile 密钥文件所在的详细位置,例如 ~/.ssh/aliyun

举个栗子:

Host aliyun
        HostName 192.168.1.1
        User root
        IdentityFile ~/.ssh/aliyun

3、确保输入的信息准确无误,保存退出

输入下面命令进入服务器操作,这次要登录qcloud的服务器

ssh qcloud

如果想进入aliyun的服务器操作,则输入

ssh aliyun

4、其他情况

当你登录你的服务器,出现下面的警告

It is required that your private key files are NOT accessible by others. This private key will be ignored.

意思是你的密钥访问权限太大了,要设置小权限,所以输入下面的命令去设置即可

chmod 400 密钥文件所在的详细位置

5、用iTerm2的profiles配置登录

进入Profiles点击右下角的Edit Prodfile...
然后,点击左下角的 + 进入设置界面
修改你的basic的Name名字,并输入 qcloud
选择Command的Command,并输入 ssh qloud
这样你就可以选择你的qcloud的Profiles来登录你的服务器

]]>
7 https://www.linpx.com/p/terminal-ssh-login-to-your-server.html#comments https://www.linpx.com/feed/p/terminal-ssh-login-to-your-server.html
Web缓存优化的进阶认知 https://www.linpx.com/p/web-cache-optimization.html https://www.linpx.com/p/web-cache-optimization.html Sun, 28 Aug 2016 00:02:00 +0800 Chakhsu Lau 一般情况下,网站在第二次加载时,加载时间会大大被提升,这是因为网页中的一些资源被客户端缓存下来了,网页在二次加载的时候就不需要重新从远处服务器请求资源,而是直接应用客户端缓存好的数据。

扯远了···


Web缓存优化是一种提高现有系统利用率的方式,是处于用户和Web服务器之间的信息缓冲机制,基本思想是:利用了Web页面访问的时间的局部性,把用户经常访问的信息放到用户的附近或本地,以便用户后续访问能从客户端和本地服务器获取信息,不必访问远程服务器。Web缓存通过信息的本地化来加快网页浏览速度,在一定程度上节省网络带宽,减少服务器负荷。

由缓存实现的位置不同可以将Web缓存分为三类,即客户端缓存代理缓存服务器端缓存

客户端缓存主要在客户机浏览器端实现,将用户请求的数据缓存在本地,这种方法响应时间最短,但是不能被局域网所共享;代理缓存指代理服务器缓存,代理服务器位于客户端与服务器之间,代理服务器在接到用户请求时,将缓存信息返回给用户,如果请求信息不在缓存中,则请求远程服务器,代理缓存的优点是可以被局域网共享;服务器缓存指将服务器端动态数据缓存给客户端使用。

可缓存优化

并不是所有Web资源都是可以被缓存的。那么从客户端优化角度,提高Web资源的可缓存话就会提高客户端的性能。

影响Web缓存的因素主要有HTTP请求方法,请求参数设置以及HTTP状态码。
HTTP/1.1规定Web请求方法有GET、HEAD、POST、DELETE、OPTION、CONNECT和TRACE八种,只有GET与POST请求是可缓存的。

根据HTTP状态码可将Web对象缓存性分为三种。
可缓存的HTTP状态码:200、203、300、301、401;
消极缓存的HTTP状态码:204、305、400、403、404、405、414、500、502、504;
不可缓存的HTTP状态码:100、101、201、202、205、206、302、303、304、307、401、402、406、407、408、409、411、412、413、415、501、505.

Web缓存中的生命周期是指Web对象相邻两次修改的时间。

HTTP中对Web生命周期进行描述的参数有Expireslast modified等,大部分时候靠last modified参数来判断Web对象的生命周期。当某一Web资源进行修改后,Web缓存服务器中并没有进行相应的修改,这时候用户请求该资源并访问Web对象是否包含Expires字段,如果包含则进行校验,符合则返回当前资源,如果不包含该字段,Web缓存服务器会向远程服务器发起GET-If-modified请求,并发送当前last modified字段,如果响应不包含last modified字段,则使用当前last modified值。

不可缓存Web对象的HTTP参数设置

不可缓存HTTP头部信息 不可缓存HTTP头部信息参数含义
缺少 last modified 参数的对应信息 last modified time 指出服务器认出Web对象被修改的最后日期和时间,即若对象在 last modified time 值域以后被修改过,则该对象是不可缓存的。若服务器的返回值是304 not modified,则对象可被缓存
设置 set cookie 当缓存控制信息 cache-control 被设置为“不可缓存”或是“私有”时,该对象是不可缓存的
设置 Pragma:no-cache 当头部信息中有此设置时,服务器禁止请求从缓存响应。此时该对象是不可缓存的
设置 authorization 当返回的头部信息中包含个人信息时,缓存对象的效率很低。此时该对象是不可缓存对象

添加Expires字段可以增长Web对象生命周期。Expires字段告诉Web客户端,在指定的时间之前都可以使用现有的Web对象,不需要重新下载。假如在HTTP响应中出现这样的Expires:

expires:Sat, 03 Sep 2016 14:33:39 GMT

这个字段告诉浏览器,该资源的生命周期可以持续到2016年9月3日。如果Web网页中某一段资源返回了这个头,那么浏览器在以后加载这个页面时,会使用缓存中的本地资源,用户在二次访问的时候就节省了下载时间。

Nginx给静态资源添加Expires头

打开Nginx的站点配置文件,这里考虑给图片资源添加30天的有效期,给css和js添加7天有效期,也给字体资源添加30天的有效期。

server{}里添加下面代码:

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ {
    expires 30d;
    access_log off;
}

location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
}

location ~ .*\.(eot|ttf|otf|woff|svg)$ {
    expires 30d;
    access_log off;
}

其他

实践的东西不多,另外再次对网站进行一次提速,过几天再对服务器进行升级,希望会更大的访问速度的提升。这篇文章写得好累啊!

]]>
5 https://www.linpx.com/p/web-cache-optimization.html#comments https://www.linpx.com/feed/p/web-cache-optimization.html
证明:减少HTTP请求数能减少网页传输时间 https://www.linpx.com/p/proof-reducing-the-number-of-http-requests-can-reduce-the-page-transmission-time.html https://www.linpx.com/p/proof-reducing-the-number-of-http-requests-can-reduce-the-page-transmission-time.html Mon, 20 Jun 2016 11:15:00 +0800 Chakhsu Lau 这应该是一道标准的初中数学题吧,至少初中学历的应该能看得懂吧~(我猜的/逃

既然有看得懂的能力,那就开始吧~


题目告诉我们两个关键词是HTTP请求数网页传输时间,那么其他的一些额外条件和影响因素就需要我们去假设,那么就~

假设有资源 r1, r2, r3, r4..., rn,其大小分别为 s1, s2, s3, s4..., sn。当前网络环境是稳定的,每建立一个HTTP连接所耗时为t,网络传输速度为b。这里由于是对同一个站点的请求,请求不同的资源时所发送的请求时间p应该相同,等待资源进行传输的时间w也应该相同(这个时间也可以认为是从服务器收到请求到开始传输返回结果的响应时间)。在现代浏览器中,常采用同时建立多个连接方式并发获取资源,这里假定并发连接数为h。传输所有数据消耗的时间分为四个部分:连接建立,发送请求,等待传输,资源传送。不考虑连接销毁的情况。

我们再简单列出我们的假设好的一些变量和常量

  • 资源有 r1, r2, r3, r4..., rn
  • 资源大小 s1, s2, s3, s4..., sn
  • 一个HTTP连接耗时t
  • 网络传输速度b
  • 发送请求时间p
  • 等待资源进行传输的时间w
  • 并发连接数h

那么在未优化时,传输所有数据需要耗时为T1:

T1=t+np/h+nw/h+(s1+s2+s3+s4+...+sn)/bh

化简为:

T1=t+n(p+w)/h+(s1+s2+s3+s4+...+sn)/bh

假设优化后,资源数量减少到k,那么资源有 R1, R2, R3, R4..., Rk,其大小分别为 S1, S2, S3, S4..., Sk。建立连接需要消耗的时间t,网络传输速度b,发送请求时间p,等待资源传输的时间w,并发连接数h均不变。

那么在优化后,传输所有数据需要耗时为T2:

T2=t+kp/h+kw/h+(S1+S2+S3+S4+...+Sk)/bh

化简为:

T2=t+k(p+w)/h+(S1+S2+S3+S4+...+Sk)/bh

还有一个重要因素,为了保证优化前和优化后,用户都能看到是同一个网页内容,减少资源数量的方式采用的是合并资源,说明 s1+s2+s3+s4+...+sn = S1+S2+S3+S4+...+Sk,合并资源不会造成资源的总大小发生变化。故优化后,减少的网络传输时间为:

T1-T2=(n-k)(p+w)/h

看到这里,不要告诉我已经忘了公式中的字母代表意义。好吧,我知道了,其中

  • n为优化前的资源数
  • k为优化后的资源数
  • p为发送请求时间
  • w为等待资源传输的时间
  • h为并发连接数

通过上面的推理证明可知,要使网页传输时间获取最小值,则k取最小值1,资源最多只能合并为1个。当然在实际情况下,k值应取合理值。

同时,我们还发现发送请求时间p与等待资源进行传输的时间w也是对网页传输时间有着巨大的影响,用户可以通过升级上网宽带等方式实现缩短发送请求时间,和站长提升服务器性能等方式实现缩短等待资源传输的时间来提高上网体现。

那么最后一个问题是,你看懂了吗?

]]>
14 https://www.linpx.com/p/proof-reducing-the-number-of-http-requests-can-reduce-the-page-transmission-time.html#comments https://www.linpx.com/feed/p/proof-reducing-the-number-of-http-requests-can-reduce-the-page-transmission-time.html
简单剖析用户请求响应过程 https://www.linpx.com/p/a-simple-analysis-of-the-user-request-response-process.html https://www.linpx.com/p/a-simple-analysis-of-the-user-request-response-process.html Sun, 19 Jun 2016 22:46:00 +0800 Chakhsu Lau 从浏览器向一个特定的URL发送HTTP请求开始,到浏览器接收到服务器的返回结果,这段过程所花费的时间就是用户的请求响应时间。

该请求过程可以分为四个阶段:
1、建立连接;
2、发送请求;
3、返回响应;
4、关闭连接。

如下图所示:
789745642123123146549999999.png

请求过程看着很简单,而且往往是瞬间完成的,但是在实际执行中是经历很多的步骤。整个过程可以做以下的划分:

1、阻塞时间:包括所有的预处理的时间。比如Cache查找和等待网络连接的时间。
当浏览器向服务器发出HTTP请求时,浏览器会首先查找在缓存(Cache)中是否已经有所需要的资源。如果缓存中存在所需的资源而且是可用的,则使用缓存中的资源,避免了一次HTTP请求;如果缓存中不存在所需的资源,则需要连接服务器,在HTTP/1.1协议下,网络连接是需要排队等待直到这个网络连接可用,所以就造成等待网络连接的时间消耗,我们在浏览多图片的网站时,图片迟迟还未加载出来就是在等待连接可用。

2、连接时间:指创建TCP连接到服务器或者代理服务器所花费的时间。
在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连接是通过TCP来完成的。HTTP是比TCP更高层次的应用层协议,由于规则,只能在底层次协议连接建立之后才能进行更高层协议的连接。因此需要首先完成TCP连接建立,一般TCP连接的端口是80。如果是要建立一个HTTPS的安全连接,那么还需要一个SSL握手过程,此时Keep-Alive连接就会被经常用到,用于保存请求连接,以免多次重复建立连接。

3、发送时间:指发送HTTP请求到服务器的时间。
这个时间长短取决于该请求发送的数据量的大小,例如,使用POST方式则会需要较长的发送时间。

4、等待时间:指花费在等待服务器响应消息的空闲时间。
这个值包括网络延迟和服务器处理请求的时间,同时它也无法通过前端优化方法减少。

5、接收时间:指花费在从服务器读取响应消息的时间。
这个值会受到从服务器返回的消息内容的大小、网络带宽和是否使用HTTP压缩等因素影响。

6、缓存读取:指花费在从浏览器缓存中读取内容或者304响应的时间。
304响应是与条件GET请求相关联的。如果客户端已经完成一个有条件的请求并且请求是允许的,但这个文件并没有改变,服务器应该返回304状态码。304状态码一定不能包含信息主体,通常通过一个头字段后的第一个空行结束。

]]>
0 https://www.linpx.com/p/a-simple-analysis-of-the-user-request-response-process.html#comments https://www.linpx.com/feed/p/a-simple-analysis-of-the-user-request-response-process.html
听说我好像已经搞掂了毕业论文 https://www.linpx.com/p/it-is-said-that-i-seem-to-have-done-the-graduation-thesis.html https://www.linpx.com/p/it-is-said-that-i-seem-to-have-done-the-graduation-thesis.html Sun, 19 Jun 2016 18:29:00 +0800 Chakhsu Lau 真是一把鼻涕一把泪啊、于是我又来水了一篇···

简单说一下毕业设计是做了什么···

就是做一个网站···实验室仪器设备借调管理网站···

基于PHP+MySQL···

还好啦,其实最苦逼的是什么?重点来了···

网站运行环境的要求的PHP版本居然是远古时代的5.1版本,没看错,就是PHP5.1的版本···

5.1、5.1、5.1、5.1、5.1···(咒怨)···

然后没有PDO、没有mysqli、各种没有···

逼着用纯正原生写法去实现网站的设计···

网站设计主要内容有:

1、实验室仪器设备的基本管理功能:入库、分类、配置、维护
2、设计实现人性化的借调过程,使得借调既简单又责任明晰
3、借调需要实验室主任审核,所以需要实现多级权限管理
4、提供实验仪器设备预约借调的管理功能
5、实现借调到期的提醒功能

大概,月底整理一下、请求一下老师的意见把源码放到Github上然后简单说明···

威武

]]>
4 https://www.linpx.com/p/it-is-said-that-i-seem-to-have-done-the-graduation-thesis.html#comments https://www.linpx.com/feed/p/it-is-said-that-i-seem-to-have-done-the-graduation-thesis.html