thymeleaf加载不了js引用_网站首页加载慢解决方案

打开网页,用户最满意的时间是2-5秒,如果用户等待超过10秒,99%的用户会关闭这个网页。那么,是什么原因会导致网站打开慢?又有什么办法解决呢?一般来说,http请求过多、网页过大、服务器性能过差等等都可能导致网站打开慢。从技术层面来分享一些参考解决方法:

原因分析

  • 带宽不足,首先想到的就是自己网速的问题,但是一般网速在1M以上的,打开网页一般不会是很慢的。网站服务器的带宽不够的话,当大量用户访问的时候,网页的加载也是很慢的,这就是网络的出口端和入口端两个方面

  • 硬件配置低,本机的配置也会是一方面的,但是只要不是老赛扬单核+512M的配置,一般不会是电脑配置的问题。服务器端的配置也是同样的道理。

  • CPU或者是内存被占满的时候,打开网页很是会很慢的,因为整个电脑都很慢

  • DNS解析慢,域名的解析是需要专门的域名解析服务器来完成的,DNS解析包括往复解析的次数及每次解析所花费的时间,它们两者的积即是DNS解析所耗费的总时间,在http请求的过程中,域名解析和建立连接占的时间很多。

  • JS阻塞请求,写的js代码出现问题,解析就会花费很长时间,这两个js请求之间会出现一个很大的空隙,就会导致这段时间的资源加载都被阻塞住,

  • 接受数据时间过长,http请求的大部分时间应该花在后面几个阶段,比如等待响应和接收数据。但是,如果接收数据的时间太长了,长到数百毫秒甚至以秒计算的时候,那也是有问题的。这种情况一般是因为下载的内容太重了,例如大图片、大脚本等。这类问题可以使用GZIP压缩、图片压缩或者JS/CSS的minify等手段来解决。

  • 加载某个资源太慢,如果某个请求比其他的请求多出很多的时间,那么一般情况就是某个资源的加载太慢,导致了整个网页变慢,原因有可能是:1)资源在第三方站点上,他们很慢;2)这个资源太大了;3)这个资源使用的域名有问题

  • 后端代码问题,主要有代码冗余、数据库发生锁死、动态请求时间过长等,这就需要研发RD(Research and Development)优化一切可以优化的东西了

  • 前端页面请求的资源过多,onload之前如果有几百行,速度自然会慢的,如果请求的资源不存在,那么速度将会更慢

  • 网页本身中包含了追踪或者是分析用户的工具,从而导致网页的加载时间变的慢,比如之前海盗湾中会给用户的电脑插入挖矿的js脚本

  • 网页内容的大小(重要)。网页文件的大小是网站是否能快速打开最重要一个因素,如果说服务器等硬件方面决定不了,强烈建议从这里下手,不管是表格还是DIV+CSS,适当的优化代码,都能减少网页大小。尽量优化代码,用最少的代码。同时大量错误、冗余代码也是拖慢网站速度之一。

  • 大量数据库操作。小网站在执行大量数据库操作时,也会影响网站打开速度,这里使asp+access结构的网站尤为明显,尤其是同时有大量用户提交评论时,就操作数据库锁死,导致网站打不开。

解决方案

一、优化图片

几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。

即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的。

优化图片包括减少图片数、降低图像质量、使用恰当的格式。

1、减少图片数:去除不必要的图片。

2、降低图像质量:如果不是很必要,尝试降低图像的质量,尤其是jpg格式,降低5%的质量看起来变化不是很大,但文件大小的变化是比较大的。

3、使用恰当的格式:请参阅下一点。

因此,在上传图片之前,你需要对图片进行编辑,如果你觉得photoshop太麻烦,可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果?可以试试用过调用javascript来实现图片特效。

二、图像格式的选择

一般在网页上使用的图片格式有三种,jpg、png、gif。三种格式的具体技术指标不是这篇文章探讨的内容,我们只需要知道在什么时候应该使用什么格式,以减少网页的加载时间。

1、JPG:一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。

2、GIF:提供的颜色较少,可用在一些对颜色要求不高的地方,比如网站logo、按钮、表情等等。当然,gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。

3、PNG:PNG格式能提供透明背景,是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

三、优化CSS

CSS叠层样式表让网页加载起来更高效,浏览体验也得到提高。有了CSS,表格布局的方式可以退休了。

但有时我们在写CSS的时候会使用了一些比较罗嗦的语句,比如这句:

以下为引用的内容:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

你可以将它简化为:

margin: 10px 20px 10px 20px;

又或者这句:

以下为引用的内容:

A paragraph of decorated text

Second paragraph

Third paragraph

Forth paragraph

可以用div来包含:

以下为引用的内容:

A paragraph of decorated text

Second paragraph

Third paragraph

Forth paragraph

简化CSS能去除冗余的属性,提高运行效率。如果你写好CSS后懒得去做简化,你可以使用一些在线的简化CSS工具,比如CleanCSS。

四、网址后加斜杠

有些网址,比如"www.kenengba.com/220",当服务器收到这样一个地址请求的时候,它需要花费时间去确定这个地址的文件类型。如果220是一个目录,不妨在网址后多加一个斜杠,让其变成www.kenengba.com/220/,这样服务器就能一目了然地知道要访问该目录下的index或default文件,从而节省了加载时间。

五、标明高度和宽度

这点很重要,但很多人由于懒惰或其它原因,总是将其忽视。当你在网页上添加图片或表格时,你应该指定它们的高度和宽度,也就是height和width参数。如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。

下面是一个比较友好的图片代码:

moon.png

当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。

六、减少HTTP请求数

打开一个网页的时候,后台程序的响应并不所需太多时间,等待的时间主要花费在下载网页元素上了,即HTML、CSS、JavaScript、Flash、图片等。据统计,每增加一个元素,网页载入的时间就会增加25-40毫秒(具体取决于用户的带宽情况)。

所以,想要提高网页打开速度,可以降低HTTP请求数,这里提供以下3种方法:

(1)例如用CSS代码代替一些图片(比如圆角图片),尽可能的减少图片使用。

(2)合并文件,对于文本文件,可以直接合并内容。如将多个JavaScript文件合并成一个,将多个CSS文件合并成一个。

(3)优化缓存,对于没有变化的网页元素(如页头、页尾等),用户再次访问的时候没有必要重新下载,可以直接从浏览器缓存里读取。

七、样式表放在网页Head部分,把JS文件放到网页底部

经过实际测试,把样式表(CSS文件)移到网页的Head部分,可以提高有效页面的加载速度,让页面元素顺序显示。

网页打开时,所有元素是顺序显示的。但是由于JS具有特殊性,相对其他元素而言,会加载的较慢,在JS文件下载完成之前,其他后面元素的顺序显示将被阻塞,因此把JS文件尽量放在底部,意味着内容能被快速显示。

八、使用CDN(ContentDeliveryNetwork,内容分发网络)

CDN由一系列分散到各个不同地理位置上的Web服务器组成,它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。当你的网站图片很多事,就一样要使用CDN了,比如现在的电商网站,几乎都在使用CDN。很多CSS样式框架以及js框架都提供了CDN服务,比如bootstrap等等。

九、压缩网页元素

显然,网页中的元素越小,下载所需的时间就越少。现在比较成熟和流程的压缩网页的方式是通过Gzip压缩,一般可以将网页文本内容减少60%以上。

十、把样式表和JS脚本放到外部文件中

虽然我们可以将样式表和JS脚本直接写入网页HTML中,能够减少外部文件调用数量,但是这样做会增加页面的文件大小。将样式表和JS脚本放到外部文件中,用户首次访问时也许会有点慢,但是后续在访问网站时,用户直接通过浏览器缓存就可以用,从而达到减少HTTP请求数的目的,为最优的做法。

此外,在选择服务器空间的时候,要注意服务器空间的性能,有时候,慢,并不是网站程序的问题,有可能是服务器空间太差劲了,不足以承担高并发。

其它小技巧

1、去除不必要加载项。

2、如果在网页上嵌入了其它网站的widget,如果有选择余地,一定要选择速度快的。

3、尽量用图片代替flash,这对SEO也有好处。

4、有些内容可以静态化就将其静态化,以减少服务器的负担。

5、统计代码放在页尾。

6、尽量不要用一个很小的图片当背景,这样做会加大客户端CPU处理时间

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/297998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vsftpd配置文件详解

转载:http://yuanbin.blog.51cto.com/363003/108262(如有转载请注明原作者出处,谢谢~)vsftpd配置文件详解1.默认配置:1>允许匿名用户和本地用户登陆。anonymous_enableYESlocal_enableYES2>匿名用户使用的登陆名…

基础设备----笔记

插一条:OSI七层网络模型网络设备调制解调器:将数据,在数字信号和模拟信号之间转换网卡:基本数据转换、信息包的装配和拆装、网络存取控制、数据缓存、生成网络信号等。网卡按主板总线类型分类:ISA---分为8位和16位两种…

黑客大佬:我是如何让50个文件一起骗过AI安防系统的?

全世界只有3.14 % 的人关注了爆炸吧知识转自:大数据文摘编译:邢畅、张睿毅、钱天培你有没有想过当黑客呢?破解手机密码,黑入公司系统,甚至…控制全球电脑。打住打住!违法犯罪的念头显然不能有。再退一步讲&…

XML转义字符

和 & &amp; 单引号 &apos; 双引号 " &quot; 大于号 > > 小于号 < < 下面的字符在 [XML]中被定义为 空白(whitespace)字符&#xff1a; 空格 (…

WTM框架使用技巧之:CI/DI(持续集成/持续部署)

快点关注我们吧作者介绍王晓东&#xff0c;从事工业物联网行业多年&#xff0c;深入了解纺织、汽车零部件等制造业业务。开发过MES、WCS、SCADA、智能产线、质量追溯、工业通讯、linux网关等系统。对跨平台部署、运维有一定经验。使用WTM框架提高了40%的开发效率&#xff0c;WT…

php 建立自己的框架,利用 Composer 一步一步构建自己的 PHP 框架(一)——基础准备...

“一个时代结束了&#xff0c;另一个时代开始了。”Framework Interoperability Group(框架可互用性小组)&#xff0c;简称 FIG&#xff0c;成立于 2009 年。FIG 最初由几位知名 PHP 框架开发者发起&#xff0c;在吸纳了许多优秀的大脑和强健的体魄后&#xff0c;提出了 PSR-0 …

二维数组各行分别求和_【PyTorch入门】之十分钟看懂二维卷积层的运算、实现及应用...

原文链接&#xff1a;【动手学深度学习笔记】之二维卷积层​mp.weixin.qq.com1.二维卷积层本节介绍卷积神经网络中最常见的二维卷积层。二维卷积层常用来处理图像数据&#xff0c;它具有两个空间维度&#xff08;高和宽&#xff09;。1.1二维互相关运算1.1.1原理分析在二维互相…

python3 UnicodeEncodeError: 'ascii' 错误

2019独角兽企业重金招聘Python工程师标准>>> python 3.4 使用urllib.request.urlopen() 打开url时候&#xff0c;如果url中包含中文&#xff0c;出现了“UnicodeEncodeError: ascii codec cant encode ”的错误&#xff0c;修复步骤如下 在url中有中文的地方加入…

小女生的Linux技术~~~Linux常识~~21-30

小女生的Linux技术~~~Linux常识~~21-30 Q21 如何查看当前用户的系统行为? A&#xff1a; 使用命令w查看当前用户的系统行为&#xff0c; w root Q22 如何查看曾经登录系统的用户名 ? A:使用who命令查看当前用户登录情况 who -u更详细些 Q23查看所有进程的方法是什么&#xff…

让批处理文件(.bat)程序无窗口(隐藏/静默)运行

将下面的代码保存为.vbs 文件&#xff0c;把 test.bat 改成你的批处理文件&#xff0c;然后运行.vbs 文件 --------------------------------------------------------------set GuWSWScript.CreateObject("WScript.Shell") GuWS.Run "test.bat",vbhide转载…

女朋友的道歉方式

1 女朋友的道歉方式2 看吧,无聊的时候什么事都干得出来3 这猫太坏了&#xff01;4 还以为是特效,原来是实物 5 叉子的妙用6 也太信任这块玻璃了吧……7 棉花糖炸酱面......大家感受一下你点的每个赞&#xff0c;我都认真当成了喜欢

单元测试(三)基本使用

介绍本文来演示一下同事教导后的写法&#xff0c;同样有些单元测试是为了演示而写的单元测试。本文使用组件&#xff1a;Xunit、Moq以及dotNet相关知识注&#xff1a;本文内容基于上一篇操作首先指定一个方法编写单元测试&#xff0c;并且要保证没有其他因素干扰的情况下去进行…

重力模型matlab代码,STK基础教程.doc

STK基础教程STK基础教程By appe1943西安交通大学目 录TOC \o "1-3" \h \z \u HYPERLINK \l "_Toc367480315" 1 STK软件简介 PAGEREF _Toc367480315 \h 1HYPERLINK \l "_Toc367480316" 1.1 STK软件简介 PAGEREF _Toc367480316 \h 1HYPERLINK \l &…

帆软帮助文档_帆软:像阿甘一样,奔跑在商业智能的赛道上

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 晶少出品 | CSDN云计算(ID&#xff1a;CSDNcloud)故事开始于一片洁白的羽毛&#xff0c;从空中降落缓缓飘过房屋、街道、树梢&#xff0c;最终落在了主人公阿甘的脚旁&#xff0c;他没有过多思考就将羽毛轻轻收藏书中……这是…

sed简单用法

一、替换1、将替换后的文本显示在屏幕上sed s/pattern/replace_string/ file或者通过管道cat file|sed s/pattern/replace_string/2、替换源文件中的文本sed s/pattern/replace_string/g file或者sed -i s/pattern/replace_string/ file从第N处开始替换匹配的行sed s/pattern/r…

字符串表达式求值 C#实现

using System;using System.Collections.Generic;using System.Windows.Forms; namespace ExpressionResult1{ public partial class Form1 : Form { public Form1() { InitializeComponent(); } //建立一个数栈和一个操作符栈 …

叫板BBC!80后湖南姑娘,花3年首次拍出水下的中国,惊艳了全世界

全世界只有3.14 % 的人关注了爆炸吧知识众所周知&#xff0c;中国拥有约960万平方公里的陆地面积&#xff0c;我们生活在这片大地之上。但却鲜有人知道&#xff0c;中国的水下也有一座城。这是一座位于杭州千岛湖下的千年古城&#xff0c;历经61年&#xff0c;它们在水底&#…

php开启mysqlnd,如何启用mysqlnd的php?

我有PHP安装和运行(版本&#xff1a;5.3.17)&#xff0c;我想切换到mysqlnd(在phpinfo mysqlnd不存在)。我读了&#xff0c;为了设置它&#xff0c;你需要更新./configure命令&#xff1a;./configure --with-mysqlmysqlnd \--with-mysqlimysqlnd \--with-pdo-mysqlmysqlnd \当…

***Redis hash是一个string类型的field和value的映射表.它的添加、删除操作都是O(1)(平均)。hash特别适合用于存储对象...

http://redis.readthedocs.org/en/latest/hash/hset.html HSET HSET key field value (存一个对象的时候key存) 将哈希表 key 中的域 field 的值设为 value 。 如果 key 不存在&#xff0c;一个新的哈希表被创建并进行 HSET 操作。 如果域 field 已经存在于哈希表中&#xff…

lua loadstring传递参数_lua学习之函数篇

函数函数是对语句和表达式进行抽象的主要机制两种用法一是可以完成特定的任务&#xff0c;一句函数调用被视为一条语句二是以只用来计算并返回特定的结果&#xff0c;视为一句表达式print("Hello, World")a math.sin(3) math.cos(10)print(os.date())​无论哪种用法…