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页面加载速度的更多相关文章

  1. ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler

    ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

  2. jQuery实现图片预加载提高页面加载速度和用户体验

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...

  3. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  4. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  5. jquery实现图片预加载提高页面加载速度

    使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...

  6. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  7. 压缩代码加速ecshop程序页面加载速度

    由于页面有很多图片,页面加载速度有点慢,本来打算减小图片的体积,后来想想这个后期还得测试下,所以暂时不打算使用google的图片优化工具,先把ecshop生成的html代码压缩下吧 压缩前:首页体积为 ...

  8. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  9. Selenium简单测试页面加载速度的性能(Page loading performance)

    利用selenium的可以执行javascript脚本的特性,我写了一个java版本的获得页面加载速度的代码,这样你就可以在进行功能测试的同时进行一个简单的测试页面的加载速度的性能测试. 我现在的项目 ...

随机推荐

  1. rsync(五)工作机制

    当我们讨论rsync时,我们使用了一些特殊的术语来代表不同的进程以及它们在任务执行过程中所扮演的角色.人类为了更方便.更准确地交流,使用同一种语言是非常重要的:同样地,在特定的上下文环境中,使用固定的 ...

  2. MongoDB分析工具之三:db.currentOp()

    db.currentOp() db.currentOp是个好东西,顾名思义,就是当前的操作.在mongodb中可以查看当前数据库上此刻的操作语句信息,包括insert/query/update/rem ...

  3. html格式

    优美的代码编写方式是我们装逼的基础,在python中我们称优秀的代码为pythonic,无独有偶,html.css.js也都有着自己相比更优美的写法~ <!DOCTYPE html> &l ...

  4. Fuzzy Search

    题意: 考虑模板串B和给定串A,给定K,对于模板串上给定位置j的字符,如果能在给定串上i左右K个字符内找到相同字符,则说可以匹配. 问有多少匹配. 解法: 考虑对于每一种字符分开求. 对于当前字符ch ...

  5. 15.oauth2 + oidc 实现 server部分

    OAuth主要做授权. OpenIdConnect简历在OAuth2.0基础之上的,相结合 客户端.授权中心.Resource Owner用户本身(资源的拥有者).Resource Server 通过 ...

  6. Bootstrap 自适应排列顺序

    一.前用 我们在做一些页面的设计时,总会想到自适应的问题.其实 Bootstrap 框架就很好的融合这个问题了.下面是我学习 Bootstrap 的总结. 二.问题来源 我为什么会遇见这个问题,是因为 ...

  7. 在ANGULAR6中使用Echarts的正确方式之一

    这里的正确指的是不会在运行过程中报错,不会再prod模式下编译报错,不会再AOT模式下编译报错 个人环境说明: { "name": "angular-for-echart ...

  8. 多线程中join()

    这个鬼东西百度了好久没弄明白,大佬们代码一粘贴好了完事,借助官方api终于是理解了,当然如果有问题欢迎大家用键盘来羞辱我. 首先  join有什么用?   他是用来确定线程何时结束的 , Thread ...

  9. 类的property特性

    目录 什么是 property特性 简单示例 property属性的两种方式 装饰器 类属性方式 property+类的封装 应用 私有属性添加getter和setter方法 使用property升级 ...

  10. mysql引擎问题研究

    mysql引擎问题研究 数据库引擎 缺省情况下,MYSQL支持三个引擎:ISAM,MYISAM和HEAP.还存在MYSQL+API的引擎例如InnoDB. 数据库引擎特点 ISAM:执行读取操作速度很 ...