将JS与CSS合并成一个文件减少HTTP请求有效提升网站打开速度!

时间:2019-12-26   访问量:63

  有许多网站站长都会发愁一件事情,那就是网站的打开速度,我们都知道随着搜索引擎的算法不断更新,网站打开速度已近更成为了考量网站是否为优质站点的一个重要因素,就像百度推出的《闪电算法》就曾提出首屏加载时间的要求,具体内容为“移动网页首屏在2秒之内完成打开的,在移动搜索下将获得提升页面评价优待,获得流量倾斜;同时,在移动搜索页面首屏加载非常慢(3秒及以上)的网页将会被打压“,由此可见网站打开速度确实成为了影响搜索引擎排名的重要因素,其实有效的提升网站打开速度并非难事,我们只需要将网站的JS与CSS合并成一个文件减少HTTP请求就可以了,那么具体该怎样做呢?

网站速度.jpg

  我们先看一个实例代码

<html>
<head>
<title>test</title>
<styletype="text/css">
<!--.d{color:red;}
</style>
<script>
<!--function showMsg(m){alert(m);}
</script>
</head>
<body>
<div class='d'>颜色变成红色</div>
<input type="button" value="不会弹出" onclick="showMsg('js');" />
</body>
</html>

  运行以上代码我们会发现CSS会正常工作,而JS却失灵了,因为上面的代码通过浏览器解析时会使代码变成这样

<style type="text/css">
.d{color:red;}
</style>
<script>
//function showMsg(m){alert(m);}
</script>

  很明显浏览器将js代码解析为了注释行因此造成了JS的失灵,根据这个特性,我们可以将css与js合并成一个后缀为.cssjs的文件内容为

<!--/*
function showMsg(m){alert(m);}
<!--*/
<!--.d{color:red;}

  而后我们在网页头部加载时分别进行加载

<script type="text/javascript" language="javascript" src="test.jscss"></script>
<link rel="stylesheet" type="text/css" href="test.jscss"/>

  这样浏览器解析test.jscss这个文件时css会解析为

/*
function showMsg(m){alert(m);}
*/
.d{color:red;}

  而js解析器会解析为

///*
function showMsg(m){alert(m);}
//*/
//.d{color:red;}

  貌似请求了两次,但是因为浏览器在第一次加载test.jscss后就已经缓存了这个文件,实际上在第二次加载时已经调用缓存了,这样就实现了将JS与CSS合并成一个文件减少HTTP请求有效提升网站打开速度的目的!


【地址】:http://www.inseo.cn/seo/49.html转载请注明出处


相关文章
怎样快速合并css文件简···

  css是网站样式的一个汇总文件,一般情况下网站都会引入3-5个css文件,一些比较复杂的网站会引···

网站打开速度慢这几个···

  网站的打开速度一直是许多站长非常关心的问题,他直接影响着网站的跳出率、访问率、点击率,据统计访客···

一分钟看懂对象存储和···

  我们通常会将对象存储与CDN配合使用,为什么对象存储要和CDN配合使用呢,cdn和对象存储有什么···



Copyright © 2018-2020 大树SEO All Rights Reserved.