欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML的优化

程序员文章站 2022-07-02 16:38:13
HTML的优化 : 1)、h标签的使用: 要注意的是,不论任何页面,h1标签只能出现一次,它是当前页面的主标题,权重最高, 所以要慎用 . 一般情况下,如果有关键词的话最好是在h1里面出现. h2是表示一个段落的标题或者副标题之类的,h2如果连接到seo方面的话,里面可以布置长尾关键词。h3级别更低 ......

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>