DW 打开HTML时,如何让背景图片元素最后载入?

DW 打开HTML时,如何让背景图片元素最后载入?,第1张

想要这样的话,可以简单是用js就可以了,

需要给加背景的标签增加一个类名,然后用js、给他增加背景

jquery代码就是:

<script>    

$(document).ready(function(){

$(".zjbg").css({"background-image":"背景图片地址"})  

})  

</script>

zjbg这个就是标签要加的类

从上到下运行,先解析head标签中的代码,

(1)head标签中会包含一些引用外部文件的代码,从开始运行就会下载这些被引用的外部文件

当遇到script标签的时候

浏览器暂停解析(不是暂停下载),将控制权交给JavaScript引擎(解释器)

如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行,执行完毕后将控制权交给浏览器渲染引擎

(2)当head中代码解析完毕,会开始解析body中的代码

如果此时head中引用的外部文件没有下载完,将会继续下载

浏览器解析body代码中的元素,会按照head中声明一部分样式去解析

如果此时遇到body标签中的<script>,同样会将控制权交给JavaScript引擎来解析JavaScript

解析完毕后将控制权交还给浏览器渲染引擎。

当body中的代码全部执行完毕、并且整个页面的css样式加载完毕后,css会重新渲染整个页面的html元素。

(3)按照之前的描述,<script>写到body标签内靠后比较好,

因为JavaScript 会 *** 作html元素, 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素

但是我们经常将<script>写到head中,body中不会有大量的js代码,body中的html代码结构会比较清晰

window.onload: 等待页面中的所有内容加载完毕之后才会执行

$(document).ready(): 页面中所有DOM结构绘制完毕之后就能够执行

可以这样理解:window.onload 和 $(document).ready()/$(function(){})相当于 写在body 内 最靠后的<script>代码段

html首次加载刷新一次才更新成最新页面

这个ajax请求,几秒钟的延迟时间正常范围,它步运行的,对页面的不会造成直接影响。从图片中可看出,它的加载时间为138ms,不算长啊,后面的4.84s是它等待服务器返回数据的时间,在这段时间里,页面的其他元素是继续加载的,不会受影响。所以这个4.84s是不算在首页加载时间内的。就好比一个体育赛事直播的网页,它的比分一般都是通过ajax异步方式定时刷新的,而这个刷新的时间并不算在页面的加载时间内,因为这时候页面早就加载完毕了。

当然,这个4.84s的时间长短,是由多种因素造成的,比如电脑性能、网络状态等,但最大的影响因素通常都是后台数据库的查询速度,通过优化可以大大缩短这个查询时间。

如何优化网站性能,提高页面加载速度

c42abe5799143f7e118b6903c5d210f1.png

提升页面加载速度

1、图片大小越小打开速度越快

2、网页中代码不要臃肿所以不要有无用代码

3、js css使用外部引入

4、如果js css 不是显示用户看到的信息 而是一些特效的话放在最后加载。

怎样提高页面加载速度,论优化页面的过程

a82ba7b0082a37426238a85f636a6646.png

1、精简:去掉html页面不必要的空格释,尽量将script和css写在外部文件

可以借用第三具对页面进行加

2、减少文件数量减少页面上引用的文件数量可以减少HTTP连接数许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript.functions和Prototype.js合并到一个base.js文件里去了

3、减少外部域名文件的引用

4、优化页面元素加载顺序例如:首先加载页面最初显示的内容和与之相关的JavaScript和CSS,不需要的图片文件放到后面加载,或者引用延迟加载的js

5、减少页面中inline和JavaScript的数量

6、不要在table标签中嵌套table标签,不过现在基本上都用div+css了,HTML5也出来了。

7、检查页面是否有js错误,或者空引用(检查页面有没有502错误),有没有


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7509233.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-06
下一篇 2023-04-06

发表评论

登录后才能评论

评论列表(0条)

保存