HTML的优化
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的优化的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- In-Memory:内存优化表的事务处理
内存优化表(Memory-Optimized Table,简称MOT)使用乐观策略(optimistic approach)实现事务的并发控制,在读取MOT时,使用多行版本化(Multi-Row ve ...
- 试试SQLSERVER2014的内存优化表
试试SQLSERVER2014的内存优化表 SQL Server 2014中的内存引擎(代号为Hekaton)将OLTP提升到了新的高度. 现在,存储引擎已整合进当前的数据库管理系统,而使用先进内存技 ...
- 01.SQLServer性能优化之----强大的文件组----分盘存储
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...
- 03.SQLServer性能优化之---存储优化系列
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概 述:http://www.cnblogs.com/dunitian/p/60413 ...
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- 数据库优化案例——————某市中心医院HIS系统
记得在自己学习数据库知识的时候特别喜欢看案例,因为优化的手段是容易掌握的,但是整体的优化思想是很难学会的.这也是为什么自己特别喜欢看案例,今天也开始分享自己做的优化案例. 最近一直很忙,博客产出也少的 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- Web性能优化:What? Why? How?
为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...
- 记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题
最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServerP ...
随机推荐
- Unity 同一Text文本修改不同的字体大小和字体颜色
类似Html,在color和size对应的<>str</>中,就能修改str的相关属性, 下面的代码就是把time改为字体颜色为红色,大小为40: 而前面的"Time ...
- R语言可视化--颜色
RColorBrewer包 三类调色板:sequential / diverging / qualitative 调色板的信息可以与colorRamp / colorRampPalette结合使用 从 ...
- 直白介绍卷积神经网络(CNN)【转】
英文地址:https://ujjwalkarn.me/2016/08/11/intuitive-explanation-convnets/ 中文译文:http://mp.weixin.qq.com/s ...
- LintCode 删除排序链表中的重复元素
给定一个排序链表,删除所有重复的元素每个元素只留下一个. 样例 给出 1->1->2->null,返回 1->2->null 给出 1->1->2->3 ...
- AndroidStudio离线打包MUI
1.下载5+SKD http://ask.dcloud.net.cn/article/103 2.解压到任意目录 3.导入HBuilder-Hello项目 4.在AndroidManifest.xml ...
- Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
- CodePlus2017 12月月赛 div2火锅盛宴
当时看到这道题感觉真是难过,我数据结构太弱啦. 我们来看看需要求什么: 1.当前熟了的食物的最小id 2.当前熟了的食物中有没有编号为id的食物 3.当前没熟的食物中有没有编号为id的食物 4.当前没 ...
- C++的替代运算标记符
标记符and, and_eq, bitand, bitor, compl, not, not_eq, or, or_eq, xor, xor_eq, <%, %>, <: 和 :&g ...
- 【Leetcode 堆、快速选择、Top-K问题 BFPRT】数组中的第K个最大元素(215)
这道题很强大,引出了很多知识点 题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5 ...
- R语言因子
R语言因子 因子是它们用于将数据进行分类并将其存储为级别的数据对象.它们可以同时存储字符串和整数.它们在具有唯一值的有限数目的列是有用的. 例如,"male, "Female&qu ...