028-86261949

当前位置:首页 > 技术交流 > 如何有效提升静态文件的加载速度

如何有效提升静态文件的加载速度

2019/06/19 10:23 分类: 技术交流 浏览:1

用户在打开网站后,页面内容出来的快慢,是我们做性能最需要关注的指标。

一般来说有以下三方面的操作手段:

 

1、代码逻辑

一般良好的代码逻辑结构,可以直接减少渲染页面使用的内存和速度。

例如:尽量少得操作DOM,减少代码的冗余度等。

 

2SSR服务器渲染

主要的做法是把网站的首屏直接在服务器端进行渲染成静态代码,直接进行访问,目的是减少第一次加载速度及访问时间。

 

3、提升静态文件的加载速度

 主要的操作有以下几方面:

  1. 加快静态文件下载速度
  2. 减少静态文件的大小
  3. 减少静态文件请求数量,在移动端效果更加明显

 

(一)代码压缩

一般为了开发过程中的团队合作,开发版的代码和网站上线的代码有明显的差别,如果把开发版的项目直接上线,就必然会导致,相关文件相对的大小问题,尤其是JS和CSS文件。

所以,线上的项目必需要做压缩代码的操作,网站也有很多类似的案例,也就是为什么大家会看到,百度,京东,淘宝。。。等,在线的网站源码有很多JS和CSS样式的原因。

代码压缩,其主要目的就是减少开发版中多出来的空格,回车,及大量的注释问题,从而减少网页文件的体积,加快下载和访问速度,提升网站整体性能。

常用的方法是通网上提供的在线压缩工具,进行压缩或混淆操作,再进行上线。

 

(二)文件合并

在传统的网页制作中,大家都会引用很多相关的js,jquery,axios,bootstrap。。。等,每一种库或组件都会随着很多自己样式和脚本,一般都会直接在head标签中通过<script>标签来引入,导致第打开一个页面,会出现几个到几十个不等的库文件。

这样以来直接导致在页页加载的时候,需要很多文件的请求,严重者导致网页出现大白屏,尤其是在手机端,请求数据文件比正常流量要打得多。

哪怎么解决文件请求数量呢?

常见操作方向有以下几种:

  1. 合并js脚本文件
  2. 合并CSS样式文件
  3. 合并CSS引用的图片,采用雪碧图制作

 

(三)GZIP

做到以上还不够,在移动端还是文件太大了,这时候就会使用webpack进行处理了,我们可以在webpack中进行gzip配置如下:

 

var CompressionWebpackPlugin = require('compression-webpack-plugin')

webpackConfig.plugins.push(

new CompressinonWebpackPlugin({

asset: '[path].gz[query]',

algorithm: 'gzip',

test: new RegExp(

'\\.('+

['js','css'].join('|')+

')$'

),

threshold: 10240,

minRatio: 0.8

})

)

 

上面代码会对文件大小大于10240,并且压缩率好于0。8的js、css文件进行gzip压缩,即可得到相关的。gz压缩文件

 

(四)CDN和缓存

CDN是一个全球分布式网络,但是在国内具体的供应商可能会有差别。

主要的原理是,把网站内容放在CDN中,在请求的时候,会对某个请求点进行内容访问,这样的话就可以接近用户和服务器位置之间的距离,让每一个用户看到的,都是离自己最近的CDN节点中的内容。达到加快访问及下载速度。

如:把一个网站放在北京,如果新疆的小伴伙需要访问时,一般情况是直接访问北京的服务器,需要很长的时间进行下载或加载,那么放在CDN中就会出现另一种访问情况,直接访问距离新疆最近一个CDN节点的方式,这样就可以快速的访问了

 

总结:以上是本次为大家准备的提升静态文件的性能操作方法,如有感兴趣的朋友,可以在下面进行留言,进行技术交流!大家相互学习。

 

#标签:服务器渲染,静态文件加载速度