HTML的优化 :

1）、h标签的使用:

要注意的是，不论任何页面，h1标签只能出现一次，它是当前页面的主标题，权重最高, 所以要慎用 . 一般情况下，如果有关键词的话最好是在h1里面出现.

h2是表示一个段落的标题或者副标题之类的，h2如果连接到seo方面的话，里面可以布置长尾关键词。h3级别更低，可以布置更低段落或者其他。

h1标签不要出现在h2-h6之后, h标签是按照等级及重要性来划分，从号~h6, 所以需要h1标签写到最前面

H标签在视觉表现上常常是黑体，但其语法意义与黑体完全不同，不要在页面上滥用。

2) 、 选择合适的标签:

a、多用H5语意化标签

b、是文字就用p 标签, 标题用h1~h6, 不要都用div

c 、获取表单元素时, 多使用form代替div :

如用div:

     <div>
        <input id="user-name">
        <input id="password">
     </div>

     // 获取时
     <script>
        let userName = $('#user-nam').val();
        let password = $('#password').val();
     </script>

为了获取两个表单数据查了两次DOM. , 假如有10个, 就要查10次, 如果是20个、30 个…… 就对性能有影响了, 特别是在移动端.

如果把div换成form:

<form id="register">
    <input name="user-name">
    <input name="password">
 </form>

 // 获取时:
 <script>
     let form = document.getElementById('register'),
        userName = form['user-name'].value,
        password = form.password.value;

 </script>

d、其他小细节:

文字加粗用: b/strong(有强调的作用) , 而不用自己手动设置font-weight, 好处是: 以后更改字体只需要设置b/strong的font-family.

3) 、减少iframe数量

使用iframe要注意理解iframe的优缺点

优点

  • 可以用来加载速度较慢的内容，例如广告。

  • 安全沙箱保护。浏览器会对iframe中的内容进行安全控制。

  • 脚本可以并行下载

缺点

  • 即使iframe内容为空也消耗加载时间

  • 会阻止页面加载

  • 没有语义

4) 、避免图片和iFrame等空的Src，空Src会重新加载当前页面，影响速度和效率。

5) 、尽量避免重设图片大小。

重设图片大小是指在html、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。

6) 、减少Dom节点 Dom节点太多影响页面的渲染，应尽量减少Dom节点

7) 、减少阻塞

写在HTML头部的Js，和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，Js放在页面尾部或使用异步方式加载

8) 、 html标签切勿层层嵌套，影响页面加载

9)、条件注释法

IE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为注释。

<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->
<!--[if !IE 8]> -->用于非 IE <!-- <![endif]-->

gt : greater than，选择条件版本以上版本，不包含条件版本 > lt : less than，选择条件版本以下版本，不包含条件版本 < gte : greater than or equal，选择条件版本以上版本，包含条件版本>= lte : less than or equal，选择条件版本以下版本，包含条件版本 <= ! : 选择条件版本以外所有版本，无论高低

*只有IE浏览器认识条件注释、其它浏览器会跳过

如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--[if gt IE 6]>
            <style>
                body{
                    background:lightblue;
                }
            </style>
        <![endif]-->
        
        <!--[if lt IE 8]>
        <script type="text/javascript">
            alert("您的浏览器Out了，请下载更新。");
        </script>
        <![endif]-->
    </head>
    <body>
        <!--[if gt IE 6]>
            <h2>大于IE6版本的浏览器</h2
        <![endif]-->
    </body>
</html>

HTML的优化的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. In-Memory：内存优化表的事务处理

    内存优化表(Memory-Optimized Table,简称MOT)使用乐观策略(optimistic approach)实现事务的并发控制,在读取MOT时,使用多行版本化(Multi-Row ve ...

  3. 试试SQLSERVER2014的内存优化表

    试试SQLSERVER2014的内存优化表 SQL Server 2014中的内存引擎(代号为Hekaton)将OLTP提升到了新的高度. 现在,存储引擎已整合进当前的数据库管理系统,而使用先进内存技 ...

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

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

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

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

  6. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  7. 数据库优化案例——————某市中心医院HIS系统

    记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...

  8. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  9. Web性能优化：What? Why? How?

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

  10. 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题

    最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...

随机推荐

  1. DNS客户端配置文件/etc/resolv.conf

    本来不应该把DNS客户端配置文件放在这里来说,但由于新手弟兄上网时,虽然能拔号,但不能以域名访问.究其原因是由于没有修改 /etc/resolv.conf 文件: /etc/resolv.conf 里 ...

  2. 洛谷P1080 [NOIP2012提高组D1T2]国王游戏 [2017年5月计划 清北学堂51精英班Day1]

    P1080 国王游戏 题目描述 恰逢 H 国国庆,国王邀请 n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右 手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排 ...

  3. 基于 DataLakeAnalytics 的数据湖实践

    随着软硬件各方面条件的成熟,数据湖(Data Lake)已经越来越受到各大企业的青睐, 与传统的数仓实践不一样的是,数据湖不需要专门的“入仓”的过程,数据在哪里,我们就从哪里读取数据进行分析.这样的好 ...

  4. jquery源码学习（一）——jquery结构概述以及如何合适的暴露全局变量

    jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...

  5. C 语言中 #pragma 的使用

    在所有的预处理指令中,#Pragma指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的情 ...

  6. Kubernetes 调度器实现初探

    Kubernetes 调度器 Kubernetes 是一个基于容器的分布式调度器,实现了自己的调度模块.在Kubernetes集群中,调度器作为一个独立模块通过pod运行.从几个方面介绍Kuberne ...

  7. jenkins执行selenium自动化测试浏览器不显示解决方法

    因为jenkins是用windows installer 安装成 windows的服务了,那么jenkins是一个后台服务,所以跑selium cases 的时候不显示浏览器 解决办法:Step 1. ...

  8. Kubernetes1.3新特性：rktnetes

    (一)  背景资料 对于Kubernetes来说,从架构设计上就是支持Docker和CoreOS rkt两种容器的,在1.2版本中,最低支持CoreOS rkt 0.13.0版本,这个rkt版本算是一 ...

  9. 小爬爬5:scrapy介绍3持久化存储

    一.两种持久化存储的方式 1.基于终端指令的吃持久化存储: 特点:终端指令的持久化存储,只可以将parse方法的返回值存储到磁盘文件 因此我们需要将上一篇文章中的author和content作为返回值 ...

  10. spring调试

    spring-beans DefaultListableBeanFactory preInstantiateSingletons:650 RequestMappingHandlerMapping Ab ...