Web 前端页面性能优化

时间:2022-01-10 06:16:25
由于本人从事的是前端工作,所以且谈谈前端或者网站发布后的一些能做的东西吧!

一、语义化的XHTML

HTML结构中主要包括了head和body两个部分,虽然经常说的是结构语义化主要是body中的标签,但是我们会把head忽略,head中其实包括了一些对于我们seo很有用的一些东西,比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的。另外,head中往往能够设置缓存信息。现在越来越多的图片,脚本,css,flash被嵌入到页面中,当我们访问他们的时候势必会做许多次的http请求。而添加Expire/Cache-Control 头:Add an Expires Header ,通过设置Expires header 来缓存这些文件可有效解决这些问题。
而body部分,包括的标签就很多了,比如div,span,h,ul,ol,dl,dd,dt,p这类常用标签。block元素可不止div,要根据文档内容变化而运用,比如有的条条框框的内容用ul/li更合适,而有些说明内容用dl/dt/dd更合适,HTML5中的header、article等标签技术上等于div,而其出现的主要意义就在于此。h标签的使用层次也是至关重要的,比如在写论文的时候不是还分一级二级标题么?h1标签在整个页面最好只使用一次,至于h2、h3等的使用应根据文档结构来。
当然了,结构与表现、行为的分离是老生常谈的问题,尽量不用行内样式、内联样式就不必说了。另外,需要减少DOM访问——DOM最深不超过15级。
标签语义化有什么好处呢?首先,有利于SEO就不用说了。其次,结构清晰的HTML在团队合作中也非常重要,毕竟,你的HTML代码还得后台程序员看得懂才行。再次,有利于盲人屏幕阅读,当然,这在国内是极少考虑的。

二、减少 HTTP 的请求数

在第一段里,其实已经提及了运用缓存减少请求的方法。 当用户浏览页面时,如果我们在用户第一次访问时将一些信息一次性加载到客户端缓存,用户访问其他页面时是可以大大提高页面访问速度的,因为每一次发生http请求是要产生服务器开销的。
常用的方法有:gzip或其他工具压缩css,js;合并css,js,并作为外部引用。目前大多数的网站都采用将页面所用到的图片全部放在一张大图上(CSS Spirit技术),这样只要访问网站,图片就全部加载到客户端缓存起来了。不过也有特殊的情况,对于访问量特别大的网站,首页应该单独考虑,yahoo建议将首页的css和js 直接写在页面文件里面,而不是外部引用。因为首页的访问量太大了,这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。
另外不得不提到的是ajax技术,由于可以在不刷新整个页面的情况下实现浏览器/服务器信息传递,因此,用ajax替代表单,就意味着HTTP请求数的减少,虽然Ajax还有很多不足。

三、将CSS放在页面顶端,JS文件放在页面底端。

CSS的引用要放在html的头部header中,因为显示页面时要用到的,对于JS文件引用尽量放在页面后面,因为页面一般都是自上而下加载的,而js加载时会影响整个页面的显示速度,给人一种加载速度慢的印象。加载速度慢,对网站访问量是致命的。当然,特殊情况除外。避免使用CSS表达式与滤镜。另外:绝对不能用@import导入css或者js文件!

四、使用CDN(内容分发网络): Content Delivery Network。

cdn的原理就是根据访问用户的地址将网站的内容发布到最接近用户的 cache服务器内,通过DNS负载均衡的技术,判断用户来源就近访问cache服务器取得所需的内容,这样可以有效减少数据在网络上传输的时间,提高速度。同样可以减少服务器的压力。另外,还应想办法减少DNS查找。