静态网站都是HTML文件怎样加速优化效果更好!

发布时间:2021-01-18 作者:安阳博客网 所属分类:程序代码

常见的静态网站一般都是HTML组件的网站,通过多个不同内容的HTML文件相互链接从而建设成为一个庞大的HTML静态网站,那么为何有些人对静态网站情有独钟呢?这主要因为HTML静态网站相对于动态网站浏览器渲染速度快、且易于存储的特点,静态网站往往不需要数据库,也不需要耗费大量的时间进行查询、运算,因此在速度方面往往优于动态网站,然而并不能说所有的HTML静态网站速度都快,在一些HTML静态网站中仍有一部分打开速度非常慢,这时就需要我们对静态网站的HTML文件进行加速优化,从而达到更好的效果!

静态网站HTML文件大小对速度影响大,因此我们需要尽量减小HTML文件的大小,当多个HTML文件同时调用一些内容时,这时我们便可以单独编写一个独立的文件进行加载,例如许多HTML静态网站都会调用JS文件,这时如果JS文件相同,那么我们便可以单独建设一个JS文件并在多个HTML文件中进行调用,从而减小HTML文件大小,进行有效的加速.

CSS文件影响静态网站打开速度,因此我们需要让CSS文件进入“地下”工作,只需要将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<link>标记或者@import标记的方式进行引用,同时还可以达到对CSS压缩的目的,减少加载耗时,从而加速静态网站优化效果.

<style type="text/css">
@import url("style-1.css");
</style>

代码的精简是技术的体现更是加速静态网站的重点,因此在编辑HTML静态网站代码时应以代码执行效率为出发点进行编辑,例如一个可爱的小兔子在页面上来回地走动,实现这个效果的核心技术就是CCS定位,通常,我们是使用element.style.left和element.style.top2个属性来达到图形定位的目的,但是,这样做会产生一些问题:left属性返回一个字符串,并且其中包含了度量单位(比如100px)。因此,要设定新的位置坐标,就必须首先对这个字符串返回值进行处理,然后才能赋值,象下面一样:

dim stringLeft, intLeft
stringLeft = element.style.left
intLeft = parseInt(stringLeft)
intLeft = intLeft + 10
element.style.left = intLeft;

你一定会感觉做这么点事情竟要编写这么复杂的代码,是否有更简洁的方法?当然有!请看这4个属性:posLeft、posTop、posWidth 和 posHeight,它们对应于相应字符串返回值的点数数值。好了,使用这些属性重新编写代码实现上面代码实现的功能:

element.style.posLeft += 10

代码短小、速度却更快!

保持代码的正确可以减少浏览器渲染HTML静态网站的纠正耗时,由此可见HTML文件的代码正确率对网站速度同样重要,例如一个ul列表

<ul> 
<li>第一个
<li>第二个
<li>第三个
</ul>

很明显,上面的代码中缺少三个</LI>结束标记,但是这并不妨碍它的正确执行,这主要是因为浏览器均有一定的容错率,在检测到静态网站HTML代码有缺失的情况,都会自动补全HTML标记,但这却浪费了渲染静态网站的时间.

如果你也看重静态网站带来的诸多优点,且你的静态网站都是HTML文件所组成,不知道怎样加速优化你的静态网站,那么以上这几个方法,相信一定以可以优化你的静态网站,是你的静态网站效果更好!