1.web资源防盗链
盗链概念
盗链是指在自己的页面上展示一些并不在自己服务器的内容
防盗链工作原理
通过referer或者签名,网站可以检测目标网页访问的来源页,一旦检测到来源页不是本站即进行阻止或者返回指定页面
解决方案1
Referer
nginx 模块ngx_http_referer_module用于阻挡来源非法的域名请求
location ~ .*\.(gif|jpg|png|swf|bmp|jpeg)$
{
valid_referers none blocked bobo.com
if ($invalid_referer)
{
return 403
}
}
缺点:可以进行伪装referer
解决方案2
使用第三方HttpAccessKeyModule模块实现NGINX防盗链
location ~ .*\.(gif|jpg|png|swf|bmp|jpeg)$
{
accesskey on;
accesskey_hashmethod md5;
accesskey_arg sign;
accesskey_signature "bobo$remote_addr";
}
缺点:要在每个资源后面加个签名
2.减少http请求次数
为什么要减少http请求次数
HTTPl连接产生的开销
域名解析->TCP连接->发送请求->等待->下载资源->解析时间
解决方案1
图片地图
使用
标签
解决方案2
CSS精灵
通过指定css的backgroud-image和backgroud-position来显示元素
解决方案3
合并脚本和样式表
使用外部js和css文件引用方式
解决方案4
图片使用base64编码减少页面的请求数
使用外部js和css文件引用方式
3.浏览器缓存和压缩优化技术
HTTP缓存机制
1.200 from cache: 直接从本地缓存中获取响应,最快速,最省流量,因为根本没有向服务器发送请求
2.304 not modify:协商缓存,浏览器在本地没有命中情况下请求头发送一定的校验数据到服务端,如果服务端数据没有改变浏览器从本地缓存响应,返回304,快速,发送的数据小,只返回一些基本的响应头信息,数据量很小,不发生实际响应体
3.200 OK:以上两种缓存全都失败,服务器返回完整响应,没有用到缓存,相对最慢。
NGINX配置
location ~ .*\.(gif|jpg|png|swf|bmp|jpeg)$
{
expires 30d; //缓存30天
}
前端代码和资源的压缩
js代码压缩常用工具:UglifyJs, YUI Compressor, Closure Compiler
css代码压缩常用工具:YUI Compressor, CSS Compressor
html代码压缩常用工具:htmlcompressor
图片压缩
常用工具:tinypng, JpegMini, ImageOptim
gzip压缩
location ~ .*\.(gif|jpg|png|swf|bmp|jpeg)$
{
gzip on|off //是否开启
gzip_buffers 32 4K | 16 8K //缓冲
gzip_comp_level [1-9] 推荐6 压缩级别(级别越高,压的越小,越浪费CPU资源)
gzip_disable //什么样的uri不进行gzip压缩
gzip_min_length 200 //开始压缩的最小长度
gzip_http_version //开始压缩的http协议版本
gzip_types text/plain application/xml //对哪些类型的文件用
gzip_proxied//设置请求者代理服务器,该如何缓存内容
gzip_vary on|off //是否传输gzip压缩标志
}