如何加快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页面加载速度的更多相关文章
- ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
- jQuery实现图片预加载提高页面加载速度和用户体验
我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...
- Web前端性能优化——如何提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...
- 【转】Web前端性能优化——如何提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...
- jquery实现图片预加载提高页面加载速度
使用jquery实现图片预加载提高页面加载速度和用户体 我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题 呢?首 ...
- Web前端性能优化——提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...
- 压缩代码加速ecshop程序页面加载速度
由于页面有很多图片,页面加载速度有点慢,本来打算减小图片的体积,后来想想这个后期还得测试下,所以暂时不打算使用google的图片优化工具,先把ecshop生成的html代码压缩下吧 压缩前:首页体积为 ...
- 转: web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
- Selenium简单测试页面加载速度的性能(Page loading performance)
利用selenium的可以执行javascript脚本的特性,我写了一个java版本的获得页面加载速度的代码,这样你就可以在进行功能测试的同时进行一个简单的测试页面的加载速度的性能测试. 我现在的项目 ...
随机推荐
- 从exgcd到exCRT
从最基础的开始. 1.gcd 这个不用说了吧--\(gcd(a,b) = gcd(b,a\%b)\),这个很显然. 2.exgcd 这玩意可以用来求形如\(ax+by = gcd(a,b)\)的不定方 ...
- Algorithm-4th part I 学习进度 (7/12)
在cousera跟着书的原作者学习<算法>第四版.记录以下学习进度. 课后习题代码见我的GitHub 2018.09.22 : Priority Queues 使用完全二叉树实现优先队列 ...
- mysql创建用户及授权
创建本地账号 create user 'egon1'@'localhost' identified by '123'; # mysql -uegon1 -p123 创建远程账号 create user ...
- 【Hadoop】MapReduce笔记(一):MapReduce作业运行过程、任务执行
一.MR作业运行过程 JobClient的runJob()方法:新建JobClient实例,并调用其submitJob()方法.提交作业后,runJob()每秒轮询作业进度,如果发现上次上报后信息有改 ...
- jquery的on()绑定无效的方式
on前面的元素也必须在页面加载的时候就存在于dom里面.动态的元素或者样式等,可以放在on的第二个参数里面 jQuery on()方法是官方推荐的绑定事件的一个方法.使用 on() 方法可以给将来动态 ...
- 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- UVa 1412 Fund Management (预处理+状压DP)
题意:题意很难说清楚自己看原文,链接:UVa 1412 Fund Management 析:总体来说如果没有超时的话,这个题不是特别难,但是这个题很容易超时,主要是体现在状态转移时,很容易想到状态方程 ...
- 洛谷 - UVA11424 - GCD - Extreme (I) - 莫比乌斯反演 - 整除分块
https://www.luogu.org/problemnew/show/UVA11424 原本以为是一道四倍经验题来的. 因为输入的n很多导致像之前那样 \(O(n)\) 计算变得非常荒谬. 那么 ...
- Weekly Contest 111-------->942. DI String Match
Given a string S that only contains "I" (increase) or "D" (decrease), let N = S. ...
- 手游性能优化之深入理解Texture Compression
http://gad.qq.com/article/detail/7154875 一.引子 手游项目开发日常里,经常有美术同学搞不清Photoshop制图软件与Unity3D游戏引擎之间的图片asse ...