如何解决网站加载速度慢的问题?

河南海鑫联诚信息技术有限公司 阅读 2024-04-29 01:15:58

导读简介描述:如果这个时候js加载失败或者加载速度慢,会导致网页空白不现实任何内容,相信这种情况大家经常看到吧压缩js和css文件,优化和压缩资源来最大限度地减小总下载大小,来提高网页加载速度渲染和功能分割对于js代码可以分为两类:负责页面渲染的js代码

个人/企业网站建设:698元,联系电话:15093778828
更多网站建设 商城系统程序 定制程序开发需求请咨询在线客服

影响页面加载速度的因素主要就是资源的大小,以及程序级服务器的性能,今天从网页的css和js文件来两下如何提升网页的加载速度。

渲染阻塞

大家在使用SEO诊断工具的时候,会发现如果网站存在多个js或者css文件的时候会降低评分,会建议你合并这些文件。但是其实只对了部分,并不全对。

要搞明白这个原理首先大家需要先了解下网页dom树的构建原理。简单的给大家讲一下吧,首先浏览器解析网页的时候是通过dom树的渲染来实现的,而dom的构建是一行行代码逐渐开始的。最先构建的head标签,然后是body,大多数站点的会把网站的js和css文件放在head里。

但是css和js是会阻塞dom的构建,意思就是浏览器执行到head标签的时候会停止网下执行,知道js和css文件加载完毕,才会继续。如果这个时候js加载失败或者加载速度慢,会导致网页空白不现实任何内容,相信这种情况大家经常看到吧。

这个时候大聪明来了把css和网页放到网页代码底部,让它们最后加载就不会影响前面的dom树的构建。但是要知道js和css本身就是dom结构的一部分,就算放在尾部如果加载没有完成,dom树就无法完成构建。

dom树构建不完成,就不会开始渲染,未开始渲染就意味着浏览器还是白屏不显示任何内容。

如何解决阻塞

先将js和css下载到本地,千万不要去通过网络调用外部资源。尽可能合并js和css但是非要强制合并为一个文件,前后详细讲。

压缩js和css文件,优化和压缩资源来最大限度地减小总下载大小,来提高网页加载速度。开发者可以考虑通过简化编码来优化主文档大小,同时可以采用chunk编码,服务器分chunk输出,以及通过GZIP来压缩主文档资源。

文件合并分割原则

上面讲到了需要尽可能合并css和js文件,这样可以降低请求的数量,虽然说文件放在服务器本地不会有网络延迟,但是文件储存于硬盘,任何一个文件的读取即使机器性能再好也得需要一定的时间。

更加关联的是对于用户体验来说,最关键的是首屏的加载渲染,所以不建议大家把所有的css和js合并,正确的分割才是明智的选择。把首屏幕加载依赖的css和js单独切割放在head标签中,剩余的放在最后加载。

分割css的选择,最小化选择,很多站点开发用到了前端框架,里面其实包含了很多用不到的样式,如果对于速度性能有着极致的追求,要么去阉割下要么就不去使用。

最小化原则,当前页面加载的css只包含当前页面所需的样式。然后head标签只放首屏元素的样式。

js的优化就比css更加复杂,首先一样的最小化原则,能不用第三方库的就不用,自己写执行效率更高。

渲染和功能分割

对于js代码可以分为两类:负责页面渲染的js代码;负责页面功能的js代码,比如点击事件等功能,此类js不会影响页面的展示的,此类js可以全部合并到一个文档,异步执行,文件位置head还是底部随意,因为是异步不会阻塞页面渲染。

渲染js分割

参与页面渲染的js的分割,head标签中的js文件只放一些核心必须执行代码,以及参与首屏渲染的。剩余参与渲染的js代码单独一个文件,在底部引用。

所以,js和css优化并不是如诊断工具上建议的不加思考的合并。赶快收藏分享给IT小伙伴,给网站加速加速吧。

个人/企业网站建设:698元,联系电话:15093778828
更多网站建设 商城系统程序 定制程序开发需求请咨询在线客服

本文地址:http://www.qye400.com/indexhebei/400zixun/2048.html/public_info/info/2610
转载请注明来自:http://www.qye400.com/indexhebei/400zixun/2048.html/public_info/info/2610

关键词标签:文件jscss加载渲染dom

咨询交流
如何解决网站加载速度慢的问题?
微信扫一扫

 

 
您刚刚访问过的链接
    联系我们 阅读
    在这茫茫的网络里,网络让我们相遇
    历经13年行业经验,加上网络的推送
    足以证明我们的坚持,努力、实力和可信
    或许我们是初次相遇,但绝不能擦肩而过
    让彼此加上微信,以备后续之需
    更希望我们携手,彼此走的更远
    关 闭