如何加快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。

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

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

相关文章

java 英文字符串排序_英文字符串排序算法

编程工作偶尔会遇到一些不常见问题需要处理,学编程处理问题也难免需要熟悉一些算法以前学习的时候就遇到过一个看似简单的排序算法问题,当时的解决办法是我没有用过的,在此记录一下问题 - 英文字符串排序如下几个英文单词或者字母apple&#…

23种设计模式之一(单例模式)

单例模式:(确保一个类最多只有一个实例,并提供一个全局访问点) 存在的意义: 有些对象我们只需要一个,如:线程池、缓存、硬件设备等;如果使用多个实例就会造成冲突、不一致等&#xf…

mysql监控

1、查看mysql所有线程:show full processlist;SHOW PROCESSLIST显示哪些线程正在运行。如果您有SUPER权限,即root权限之类,您可以看到所有线程。否则,您只能看到您自己的线程(也就是,与您正在使用的MySQL账…

vSphere ESXi主机配置iSCSI存储

vSphere ESXi主机配置iSCSI存储 vSphere ESXi主机一般连接的存储类型有光纤存储、iSCSI存储两类。本次案例为iSCSI存储连接ESXi主机的配置。 案例环境:ESXi主机通过以太网络来连接iSCSID存储,并获取到存储空间,拓扑如下: 首先完成…

Java EE 7:带有Glassfish v4的JMS 2.0

Java EE 7最近已被执行委员会接受 。 这意味着我们很快将在市场上提供Java EE 7应用服务器。 构成Java EE 7的规范之一是JMS 2.0 。 自1.1版以来,引入了一些有趣的改进。 JMS有很多怪异的东西,例如: Connection#createSession&am…

css的优先级笔记

个人小站点:https://sundjly.github.io/ 来自《精彩绝伦的css》 1.css的优先级我们是用选择器的“特殊程度”: 每个元素的描述贡献(如div,ul)为0,0,0,1每个类(class)、伪类(如:ho…

linux上验证cudnn是否安装成功_deepin15.7中安装tensorflow+cuda9.0+cudnn7的步骤

这次deepin15.7大更新,特别是深度学习环境搭建屡屡失败,很是恼火。本次按照下面的步骤做成功了,以下是deepin15.7下安装tensorflowcuda9.0cudnn7的全部流程。硬件1.神舟战神z7-kp7s1,双显卡双硬盘2.独显是gtx1060 6G系统安装1.下载…

AES加密和解密

来源1 来源2 1 { JsonSerializer serializer new JsonSerializer(); string[] strArray { "111","222","333","444","555","666"}; Boy boy new Boy(); boy.Age 15; boy.bir Convert.ToDateTime("1999…

[心平气和读经典]The TCP/IP Guide(003)

The TCP/IP Guide [Page 43, 44] Scope of The TCP/IP Guide | 本书的讨论范围 The first step to dealing with a problem is recognizing that you have one. So, I have to come clean with you, my reader. I have a problem: an addiction to... detail. :-) Every time I…

使用jclouds在S3上分段上传

1.目标 在上一篇文章中 ,我们研究了如何使用jclouds中的通用Blob API将内容上传到S3。 在本文中,我们将使用jclouds的S3特定的异步API上传内容并利用S3提供的分段上传功能。 2.准备 2.1。 设置自定义API 上传过程的第一部分是创建jclouds API-这是针对…

【ichart】简单的统计图表ichart.js的使用

1、首先下载&#xff0c;点击下载 2、只需要这一个js&#xff0c;粘贴赋值到自己项目中即可。 3、引入js <script type"text/javascript" src"../js/ichart.1.2.min.js"></script> <script type"text/javascript" src"..…

java单击切换div_[Java教程]点击同一按钮实现div的隐藏与现实切换

[Java教程]点击同一按钮实现div的隐藏与现实切换0 2016-01-16 21:00:12点击同一按钮实现div的隐藏与现实切换:在很多应用中&#xff0c;都有这样的功能&#xff0c;点击同一个按钮可以实现div的隐藏或者现实&#xff0c;当然操作的并非必须是按钮或者div&#xff0c;不过原理是…

python链表的实现,有注释

class Node(): #node实现,每个node分为两部分:一部分含有链表元素,成数据域;另一部分为指针,指向下一个 __slots__[_item,_next] #限定node实例的属性??? 这个元素就是有两部分组成,,,一个指针一个数据,,,但是链表头就不是这样了 def __init__(self…

ActiveMQ——activemq的使用java代码实例(精选)

ActiveMQ 在java中的使用&#xff0c;通过单例模式、工厂实现 Jms规范里的两种message传输方式Topic和Queue&#xff0c;两者的对比如下表()&#xff1a; TopicQueue概要Publish Subscribe messaging 发布订阅消息Point-to-Point 点对点有无状态topic数据默认不落地&#xff…

Java 8:正在运行的CompletableFuture

在Java 8中全面研究了CompletableFuture API之后&#xff0c;我们准备编写一个简单的Web搜寻器。 我们已经使用ExecutorCompletionService &#xff0c; Guava ListenableFuture和Scala / Akka解决了类似的问题。 我选择了相同的问题&#xff0c;以便轻松比较方法和实现技术。 …

java能不能修改文件大小信息_java上机考试3

考号: 000128000091 姓名: 张天義 学号: 1040610329 班级: 本科(计算机、微电、电工、经管)->计算机科学与技术 00:13:25一、单选(共80分)1. int count1;for(int i1;i<5;i){countcounti;}System.out.println(count);上述代码执行后的输出结果是A、15B、1C、16D、5标记此题…

(网页)中的简单的遮罩层

html: <div id"test"></div><div id"log_window"> <!--<a href"javascript:cancel_shield()">关闭</a>--> <!--<img src"assets/css/images/loading.gif" />--> <p style"fo…

即使在jdk中也有错误的代码

Java 7&#xff0c;TreeSet和NullPointerException。 最近&#xff0c;我尝试用Java 7编译一个用Java 6开发的项目。在执行测试过程中发生了很多有趣的事情&#xff0c;在Java 6中使用Java 7平稳运行的测试失败了&#xff01; 因此&#xff0c;我必须理解为什么&#xff0c;这就…

Eclipse+GitHub 提交代码错误 -“rejected - non-fast-forward”

Eclipse Push出现rejected - non-fast-forward错误 在 Push到服务器时有时会出现 rejected - non-fast-forward 错误&#xff0c;这是由于远端发生改变&#xff0c;此时再提交之前你需要将远端的改变合并到本地上错误原因&#xff1a;文件冲突&#xff0c;本地的代码和远程Repo…

两天学会css基础(一)

什么是css&#xff1f;css的作用是什么&#xff1f; CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式&#xff0c;搭建页面结构&#xff0c;比如设置元素的宽高大小&#xff0c;颜色&#xff0c;位置等等。 学习css之前先了解一下css代码在HTML中的…