• IT培训活动
  • IT培训就业
  • IT培训专区
  • IT培训就业
  • IT培训机构
  • IT培训学校
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

您当前位置:首页 > 睿峰资讯 > 睿峰动态 > HTML页面优化技巧总结(一)

HTML页面优化技巧总结(一)

时间:2017-11-20 14:55:21   来源:未知  作者:睿峰

一、概述
HTML页面是开发web界面的核心语言,他在web构成要素里也是不可或缺的一部分。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素,页面Size会更大。如此以来,HTML 就达到了一个瓶颈,也使他的负载越来越重。
如何有效的降低HTML 代码的复杂度和页面元素的数量,我们该如何编写简练,清晰的HTML 代码,能够使得页面加载更为迅速,且能在多种设备中运行良好,这些问题是我们现在要去解决的。
网页优化的方法在网上,我们可以看到各式各样的,但是综合起来就两个方面,第一是页面结构的优化,如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等。第二是代码的优化,如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等。
然而我们在优化页面的时候,应该从设计的时候就应该想到,不因在编码完成后期才去思考这个问题。
二、在设计和开发过程中需要遵循的原则
l 结构分离:使用HTML 增加结构,而不是样式内容。
l 保持整洁:为工作流添加代码验证工具;使用工具或样式向导维护代码结构和格式。
l 学习新语言:获取元素结构和语义标记。
l 确保可访问: 使用ARIA 属性和Fallback 属性等。
l 测试: 使网站在多种设备中能够良好运行,可使用emulators和性能工具。
三、HTML、CSS 和JavaScript三者的关系
HTML是页面之本也是内容之源,有了它就能跟CSS和Javascript交互;CSS3可以说是展现大师,而且日渐强大的CSS能代替Javascript做很多动态的事情如渐变、移动等动态效果;Javascript是动态数据之王,旧浏览器依靠js来完成动态效果展现,但现在的CSS也能完成js的工作,所以尽量将工作交给css,这样会获得更好的性能。(这个说得有点大)
(一)三条通用设计规则
1. HTML负责页面结构,CSS负责修饰页面呈现,JavaScript负责实现页面功能。CSS ZenGarden 很好地展示了行为分离。
2. 如果能用CSS或JavaScript实现就少用HTML代码。
3. 将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。
 
四、文档结构优化
 
(一)网页结构中还应该注意以下几点
l 在工作流中添加验证功能:使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。
l 确保HTML的层次结构易于维护,优化,调试,有明显代码缩进,要避免元素嵌套处于左开状态。
l 保证添加各元素的结束标签,标签结构完整。
l 删除不必要的代码 ;没有必要为自关闭的元素添加结束标签;Boolean 类型属性不需要赋值,如果存在则为true。
l 有清晰的文档注释,语义化的属性值命名,可使用驼峰命名法。
 
五、语义标记及布局
语义指意义相关的事物,HTML 可从页面内容中看出语义:元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素,如<header>,<footer>,<nav>等(上文实例中已提到过)。
选择合适的元素来编写代码可保证代码的易读性:
l 使用<h1>(<h2>,<h3>…)表示标题,<ul>或<ol>实现列表。
l 注意使用<article> 标签之前应添加<h1>标签。
l 选择合适的HTML5语义元素如<header>,<footer>,<nav>,<aside>。
l 使用<p>描述Body 文本,HTML5 语义元素可以形成内容,反之不成立。
l 使用<em>和<strong>标签替代<i>和<b>标签。
l 使用<label>元素,输入类型,占位符及其他属性来强制验证。
l 将文本和元素混合,并作为另一元素的子元素,会导致布局错误。
 
例如:

<div>Name: <input type="text" id="name"></div>
 
换如下写法会更好:

<div>
<label for="name">Name:</label><input type="text" id="name">
</div>
 
 
要提高HTML代码的性能,要遵循HTML 代码以实现功能和展示内容为目标,而不是样式。
l 使用<p>元素修饰文本,而不是布局;默认<p>是自动提供边缘,而且其他样式也是浏览器默认提供的。
l 避免使用<br>分行,可以使用block元素或CSS显示属性来代替。
l 避免使用<hr>来添加水平线,可使用CSS的border-bottom 来代替。
l 不到关键时刻不要使用div标签。
l 尽量少用<table>来布局。
l 可以多使用Flex Box
l 使用CSS 来调整边距等。
以上总结了关于优化HTML代码的一些基本技巧,一个高质量高性能的网站,往往取决于对细节的处理,因此我们在日常开发中,应考虑到用户体验及后期代码维护等方面,则会产生更高效的开发。关于更多的优化,在后续的文章中讲解。

成都前端培训机构学费贵吗?需要多久?


上一篇:成都软件园的Java培训机构如何选择?  
下一篇:成都Java培训机构-Java视频教学有用吗?
地址:环球中心S2-6栋-16楼-12号、13号、14号。(洲际酒店大堂右边电梯上16楼)

课程免费咨询热线:15828071040