HTML页面加载速度加快的介绍

1.页面减肥 

a. 页面的肥瘦是影响加载速度最重要的因素。 

b. 删除不必要的空格、注释。 

c. 将inline的script和css移到外部文件。 

d. 可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥。 

立即学习“前端免费学习笔记(深入)”;

2. 减少文件数量 

a. 减少页面上引用的文件数量可以减少HTTP连接数。

 b. 许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了。

 3. 减少域名查询 

a. DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好。 

4. 缓存重用数据 

a. 对重复使用的数据进行缓存。 

5. 优化页面元素加载顺序 

a. 首先加载页面最初显示的内容和与之相关的JavaScript和CSS,然后加载HTML相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。 

6. 减少inline JavaScript的数量 

a. 浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大。 

b. 不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容。

 7. 使用现代CSS和合法的标签 a. 使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片。

 b. 使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥。 

8. Chunk your content a. 不要使用嵌套table,而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table,这样就不需要等到整个页面(或 大table)内容全部加载完才显示。 

9. 指定图像和table的大小 

a. 如果浏览器可以立即决定图像或table的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作。 

b. 这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变。 

c. image使用height和width。

以上就是HTML页面加载速度加快的介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3195334.html

(0)
上一篇 2025年4月1日 02:27:11
下一篇 2025年4月1日 02:27:18

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 深度解读:为何Laravel速度慢如蜗牛?

    Laravel 是一款广受欢迎的 PHP 开发框架,但有时候被人诟病的就是其速度慢如蜗牛。究竟是什么原因导致了 Laravel 的速度不尽如人意呢?本文将从多个方面深度解读 Laravel 速度慢如蜗牛的原因,并结合具体的代码示例,帮助读者…

    2025年5月2日
    000
  • 如何使用HTML和CSS实现响应式布局

    如何使用HTML和CSS实现响应式布局 在今天的移动设备普及的时代,响应式布局成为了必须掌握的前端开发技能。借助HTML和CSS,我们可以轻松地实现一个适应不同屏幕尺寸和窗口大小的网页布局。本文将详细介绍如何使用HTML和CSS实现响应式布…

    2025年5月2日
    000
  • 学会从头开始学习CSS,掌握制作基本网页框架的技巧

    从零开始学习CSS,掌握网页基本框架制作技巧 前言: 在现今互联网时代,网页设计和开发是一个非常重要的技能。而学习CSS(层叠样式表)是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局,还可以为用户呈现独特且具有吸引力的页面效果。…

    2025年5月2日
    000
  • html的表格比较宽溢出怎么设置

    这次给大家带来html的表格比较宽溢出怎么设置,设置不让html的表格宽溢出的注意事项有哪些,下面就是实战案例,一起来看一下。 表格如果比较宽,则有可能溢出。 比如有两个div,左和右。如果表格在右边的div中,但是它比较宽,则显示的时候很…

    编程技术 2025年5月1日
    000
  • 九个常用的JavaScript图表库的介绍

    本篇文章给大家带来的内容是关于九个常用的javascript图表库的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化…

    2025年5月1日 编程技术
    000
  • echarts如何优化数据视图dataView中的样式(代码示例)

    本篇文章给大家带来的内容是关于echarts如何优化数据视图dataview中的样式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在使用echart过程中,toolbox里有个dataView视图模式,里面的…

    2025年5月1日
    000
  • HTML 视频的播放控件样式怎么修改

    无法直接通过css修改html视频的默认播放控件样式。1. 使用javascript创建自定义控件。2. 通过css美化这些控件。3. 考虑兼容性、用户体验和性能,使用库如video.js或plyr可简化过程。 要修改 HTML 视频的播放…

    2025年4月30日
    000
  • html、css容易被忽略的小知识点_html/css_WEB-ITnose

    都说前端容易,谁说的。前端上手快,越往后学习越困难。学习前端快一年了,依然发现一些小的知识点不会。这些经验性的东西不碰到永远学不会。 (1)title前面的logo。 就像这个编辑文章前面的logo。不知道大家知不知道这个图标是如何加载过来…

    编程技术 2025年4月4日
    100
  • html节点属性操作

    nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> …

    编程技术 2025年4月4日
    200
  • html教程:用tabIndex轻松实现网页导航

    最近,当我在一个网站上输入表格数据时,我填写了一栏,并点击[tab]键移到下一栏;当我抬头时,我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中,但不久[tab]键又再次出现问题。这一情形使我想了解一下页面设计,以及t…

    编程技术 2025年4月4日
    200

发表回复

登录后才能评论