随着互联网的发展,企业也开始了企业网站建设的征途,但是企业网站做出来企业却不知道网站的运营,只能沦落为一个展示性的网
站,没办法给企业实现利益,导致有一部分的企业无法理解网站这一方面的性能问题还有网站运营问题,深圳网站建设公司企业服务
平台为大家讲解一下性能网站建设的黄金法则;
有10%–20%的最终用户时间花在了下载HTML文档上,其余的80%~90%的时间花在了下载页面中的所有组件上。
关注前端可以很好的提高整体性能
改进前段通常只需要较少的时间和资源
规则1 减少HTTP请求
由于上面的”性能黄金法则”,我们必须减少用户下载html文档的时间,最基本的一个方法是必须减少http请求,包括image,css和js文件。
规则2 使用CDN
什么是CDN?
一组分布在多个不同地理位置的Web服务器用于更有效的向用户发布内容。
如果应用程序的web服务器离用户更近,则1个http请求的响应时间将缩短;如果组件web服务器离用户更近,则多个http请求的响应时间将缩短。
同时,我们需要关注CDN Cache.例如修改了某个js文件,需要及时清除CDN Cache,甚至会出现不同步的情况。
规则3 添加Expires头
Expires: Thu, 15 Apr 2010 20:00:00 GMT
Cache-Control: max-age=315360000
Expires的局限:需要服务器和客户端的时钟严格同步,所以我们可以使用cache-control来控制。
@import 规则必须放在所有其他规则之前,而且会导致组件下载的无序性
规则5 将样式表放在顶部
这个规则其实并不影响性能,但是却关乎用户的体验。
如果样式表放在顶部,那么在下列三种情况下,浏览器会出现白屏
1、在新窗口中打开
2、重新加载
3、作为主页
@import 规则必须放在所有其他规则之前,而且会导致组件下载的无序性。
规则6 将脚本放在底部
规则7 避免CSS表达式
规则8 使用外部的Javascript和CSS
页面中尽量使用外部的js和css文件,虽然会带来额外的http请求访问时间,但是因为缓存机制会节省后期访问时http的请求。
特殊情况:主页。在主页中尽量将js和css写在页面中,这样会节省主页的访问时间。
两全其美的方式
1、加载后下载
在主页加载外币之后,动态加载js和css文件。例如我们的loadJs和loadCss方法。
2、动态内联
可以使用例如cookie的方法,如果js加载过,则写入cookie一个值;动态检测cookie的值,如果不存在则加载,如果存在则跳出加载过程。
规则9 减少DNS查找
DNS查找可以被缓存起来以提高性能,通过Keep-Alive和较少的域名来减少DNS查找。
规则10 精简Javascript
精简:从代码中移除不必要的字符以减少其大小,进而改善加载时间。移除所有的注释和不必要的空白字符
混淆:除了精简,还将函数和变量的名字转换为更短的字符串。
规则11 避免重定向
在下列几种情况下可能会发生
1. 缺少结尾的斜线
2. 连接网站
3. 跟踪内部流量
4. 跟踪出站流量
5. 美化URL
规则12 移除重复的脚本
规则13 配置Etag(Entity Tag)
Etag是Web服务器和浏览器用于确认缓存组件的有效性的一种机制,是唯一标识了一个组件的一个特定版本的字符串.
GET /i/yahoo.gif HTTP1.1
Host: us.yimg.com
HTTP 1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
Etag: “a531782d768ca1:dcc”
Content-Length:1195
GET /i/yahoo.gif HTTP 1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: “a531782d768ca1:dcc”
HTTP 1.1 304 Not Modified
问题:通常使用组件的某些属性来构造它,这些属性对以特定的、寄宿了网站服务器来说是唯一的。另一台不同的服务器发起请求,是不会匹配的。
规则14 使Ajax可缓存
被动请求(Passive Request)
主动请求(Acitve Request)
深圳网站建设公司企业服务平台举了一个yahoo! mail的例子,当用户登录的时候,主动的ajax请求前三封邮件的内容并缓存起来,这种
做法称作主动请求.