关于前端优化
一.尽量减少HTTP的请求数
1)将css文件和js文件合并,但由于css结构和共用等方面的考虑
阿里的解决方案是,开发时,css和js依然分开开发,在后台部署进服务器时,对其进行合并
但在访问量过大情况下:则建议将css和js直接写在页面文件html中,而不是外部引用
2)将一些图标,则可采用为字体图标
3)背景图片啥的,则可用一些工具css sprites将其背景图片合并为一张(用的时候在进行截取)
二.使用CDN(内容分发网络)
通过中心平台的负载均衡、内容分发、调度等功能模块,使用户访问就近的边缘服务器
DNS负载均衡:在DNS服务器中为同一主机名配置多个ip地址,DNS服务器对具体的url进行负载均衡,使请求发送到不同的主机服务器上.
三.添加Expire/Cache-Control头:
通过设置Expires header头来缓存这些文件,Expire就是通过header报文来指定特定类型的文件在浏览器中的缓存时间
其中通过服务器端脚本设置Cache-Control和Expires可以完成。
如,在php中设置30天后过期:
pHeader("Cache-Control: must-revalidate"); $offset = 60 * 60 * 24 * 30; $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; Header($ExpStr);
但注意,需要判断清楚哪些需要缓存,哪些不需要缓存,如果服务器经常性更改的则不需缓存,因为客户端需很久才能感觉到服务器端的变化
四.启用Gzip压缩:
首先,一些需传输的文件先在服务器中进行Gzip压缩,因为很多浏览器都支持Gzip解压缩,
五.将css文件放在页面的最上面
1.因为在css中,高优先级的css样式可以替换掉低优先级的css,然后在ie中,css不加载完全,会阻止页面的显示,但火狐中,不会,但最后的css可能会导致页面重画
六.将javaScript放在页面的最下面:
防止script的阻塞导致页面下载的阻塞
七.尽量不在css中使用表达式样式
八.把js文件和css文件都写在外部,也有内联(直接写在标签中的)
九.减少DNS查询:
在域名和ip地址之间的转换工作称为域名解析,也称为DNS查询(一个域名可能代表着多个ip地址,多台主机),DNS通过负载均衡找到具体的主机
雅虎的建议是一个页面的域名数量尽量控制在2-4个.
十.避免重定向:
十一.移除重复的脚本
十二.配置实体标签ETag,全称为:Entity Tag,意思是实体标签
用于判断客户端所用的内容版本与服务器端的版本是否一致.
十三.使 AJAX 缓存:ajax在处理数据时对一些重复相同的数据会进行一个缓存的操作
解决当服务器端已更改,但ajax还从缓存中读取数据的问题:
1.在进行缓存时,保存文件最后一次修改时间,根据服务器端的文件最后一次修改时间判断是否读取缓存
2.直接禁用缓存:
> 客户端设置: 在ajax发送请求前加上xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);
> 服务器端设置:在服务端加上header(“Cache-Control: no-cache, must-revalidate”);