摘要:

  页面优化是对网页中的HTML代码进行必要的调整,可以有效地精简页面中的冗余代码,加快网页显示速度,减少网页占用搜索引擎服务器的存储空间,提高用户体验和搜索引擎友好性,当然也可以更好的突出页面的主题,提高页面的相关性。下面是我总结出来的编写html代码时需要注意的,仅供参考。

1、HTML标签有始终。 减少浏览器的判断时间

2、把script标签移到HTML文件末尾,因为JS会阻塞后面的页面的显示。

3、减少iframe的使用,因为iframe会增加一条http请求,阻止页面加载,即使内容为空,加载也需要时间

4、id和class,在能看明白的基础上,简化命名,在含有关键字的连接词中连接符号用'-',不要用'_'

5、保持统一大小写,统一大小写有利于浏览器缓存,虽然浏览器不区分大小写,但是w3c标准为小写

6、清除空格,虽然空格有助于我们查看代码,但是每个空格相当于一个字符,空格越多,页面体积越大,像google、baidu等搜索引擎的首页去掉了所有可以去掉的空格、回车等字符,这样可以加快web页面的传输。可以借助于DW软件进行批量删除 html内标签之间空格,sublime text中ctrl+a,然后长按shift+tab全部左对齐,清除行开头的空格

7、减少不必要的嵌套,尽量扁平化,因为当浏览器编译器遇到一个标签时就开始寻找它的结束标签,直到它匹配上才能显示它的内容,所以当嵌套很多时打开页面就会特别慢。

8、减少注释,因为过多注释不光占用空间,如果里面有大量关键词会影响搜索引擎的搜索

9、使用css+div代替table布局,去掉格式化控制标签如:strong,b,i等,使用css控制

10、代码要结构化、语义化

11、css和javascript尽量全部分离到单独的文件中

12、除去无用的标签和空标签

13、尽量少使用废弃的标签,如b、i等,尽管高版本浏览器是向后兼容的

小结:

  HTML页面是展现给用户看的,好的代码,不仅能给用户带来友好性,也利于搜素引擎的排行,在制作页面时简化代码结构,标签语义化、标准化。

HTML性能优化的更多相关文章

  1. 01.SQLServer性能优化之----强大的文件组----分盘存储

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...

  2. 03.SQLServer性能优化之---存储优化系列

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概  述:http://www.cnblogs.com/dunitian/p/60413 ...

  3. Web性能优化:What? Why? How?

    为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...

  4. Web性能优化:图片优化

    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到 ...

  5. C#中那些[举手之劳]的性能优化

    隔了很久没写东西了,主要是最近比较忙,更主要的是最近比较懒...... 其实这篇很早就想写了 工作和生活中经常可以看到一些程序猿,写代码的时候只关注代码的逻辑性,而不考虑运行效率 其实这对大多数程序猿 ...

  6. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

  7. 02.SQLServer性能优化之---牛逼的OSQL----大数据导入

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 上一篇:01.SQLServer性能优化之----强大的文件组----分盘存储 http ...

  8. C++ 应用程序性能优化

    C++ 应用程序性能优化 eryar@163.com 1. Introduction 对于几何造型内核OpenCASCADE,由于会涉及到大量的数值算法,如矩阵相关计算,微积分,Newton迭代法解方 ...

  9. Android性能优化之利用LeakCanary检测内存泄漏及解决办法

    前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...

  10. 前端性能优化的另一种方式——HTTP2.0

    最近在读一本书叫<web性能权威指南>谷歌公司高性能团队核心成员的权威之作. 一直听说HTTP2.0,对此也仅仅是耳闻,没有具体研读过,这次正好有两个篇章,分别讲HTTP1.1和HTTP2 ...

随机推荐

  1. 利用 FormData 对象发送 Key/Value 对的异步请求

    使用Key/Value对和FormData能够轻易地通过XMLHttpRequest指定要传递什么数据,它是一个非常强大的发送数据到服务器的方法. 基础 通常的方法是你创建一个 FormData 对象 ...

  2. C++ 容器类 vector使用

    vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 用法: 1.文件包含: ...

  3. malloc和free函数详解

    一.malloc()和free()的基本概念以及基本用法: 1.函数原型及说明: void *malloc(long NumBytes):该函数分配了NumBytes个字节,并返回了指向这块内存的指针 ...

  4. c++之五谷杂粮---2

    2.1  我们通过调用运算符(call operator)来执行函数.调用运算符的形式是一对圆括号,它作用于一个表达式,该表达式是函数或者指向函数的指针:圆括号之内是用逗号隔开的实参列表,我们用实参初 ...

  5. c++重载>>和<<

    在重载输出输入运算符的时候,只能采用全局函数的方式(因为我们不能在ostream和istream类中编写成员函数),这里才是友元函数真正的应用场景.对于输出运算符,主要负责打印对象的内容而非控制格式, ...

  6. bnuoj16491

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=16491 题意:有t组测试数据,每组测试数据第一行为n,m,接下来有n种跑法,m为最大的能力,每一种跑 ...

  7. 一款javascript实现的超炫的下拉选择框

    今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览   源码下载 实 ...

  8. 未在本地计算机上注册"Microsoft.Jet.OLEDB.4.0"

    答案一: 因为没有安装64位的Jet40驱动.可以到http://www.microsoft.com/downloads/zh-cn/details.aspx?FamilyID=c06b8369-60 ...

  9. JS地毯式学习四

    1  窗口的位置 用来确定和修改 window 对象位置的属性和方法有很多. IE . Safari . Opera 和 Chrome都提供了 screenLeft 和 screenTop 属性,分别 ...

  10. 风雪之隅(Laruence PHP开发组成员, Zend兼职顾问, Yaf, Yar, Yac, Opcache等项目作者、维护者.)

    http://www.laruence.com/?from=inf&wvr=5&loc=infblog