课程咨询:400-111-8989

  • 你不可不知的 HTML 优化技巧

    本文地址:http://www.xinjiuyang.com.cn/data/283135.html
    文章摘要:你不可不知的 HTML 优化技巧,康明斯毁林村务,高档好享来贝西。

    发布:伯乐在线/葡萄城控件  来源:前端大全  时间: 2018年01月02日

  • 如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。...

  • 如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS。

    很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素,页面Size会更大。

    如何有效的降低HTML 代码的复杂度和页面元素的数量,本文主要解决了这个问题,从多个方面介绍了如何编写简练,清晰的HTML 代码,能够使得页面加载更为迅速,且能在多种设备中运行良好。

    在设计和开发过程中需要遵循以下原则:

    结构分离:使用HTML 增加结构,而不是样式内容;

    保持整洁:为工作流添加代码验证工具;使用工具或样式向导维护代码结构和格式

    学习新语言:获取元素结构和语义标记。

    确保可访问: 使用ARIA 属性和Fallback 属性等

    测试: 使网站在多种设备中能够良好运行,可使用emulators和性能工具。

    HTML、CSS 和JavaScript三者的关系

    HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容,也不能在头标签中输入文本内容,使代码变得冗长和复杂,相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的,如在Chrome中h1标签元素会渲染成32px的Times 粗体。

    三条通用设计规则:

    使用HTML 来构造页面结构,CSS修饰页面呈现,JavaScript实现页面功能。CSS ZenGarden 很好地展示了行为分离。

    如果能用CSS或JavaScript实现就少用HTML代码。

    将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

    文档结构方面也可以做优化,如下:

    使用HTML5 文档类型,以下是空文件:

    在文档起始位置引用CSS文件,如下:

    使用这两种方法,浏览器会在解析HTML代码之前将CSS信息准备好。因此有助于提升页面加载性能。

    在页面底部body结束标签之前输入JavaScript代码,这样有助于提升页面加载的速度,因为浏览器在解析JavaScript代码之前将页面加载完成,使用JavaScript会对页面元素产生积极的影响。

    使用Defer和async属性,脚本元素具有async 属性无法保证会按顺序执行。

    可在JavaScript代码中添加Handlers。千万别加到HTML内联代码中,比如下面的代码则容易导致错误且不易于维护:

    index.html:

    下面的写法比较好:

    index.html:

    js/local.js:

    验证

    优化网页的一种方法就是浏览器可处理非法的HTML 代码。合法的HTML代码很容易调试,且占内存少,耗费资源少,易于解析和渲染运行起来更快。非法的HTML代码让实现响应式设计变得异常艰难。

    当使用模板时,合法的HTML代码显得异常重要,经常会发生模板单独运行良好,当与其他模块集成时就报各种各样的错误,因此一定要保证HTML代码的质量,可采取以下措施:

    在工作流中添加验证功能:使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。

    使用HTML5文档类型

    确保HTML的层次结构易于维护,要避免元素嵌套处于左开状态。

    保证添加各元素的结束标签。

    删除不必要的代码 ;没有必要为自关闭的元素添加结束标签;Boolean 属性不需要赋值,如果存在则为True;

    <video src="foo.webm" autoplay="" controls=""/>

    代码格式

    格式一致性使得HTML代码易于阅读,理解,优化,调试。

    语义标记

    语义指意义相关的事物,HTML 可从页面内容中看出语义:元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素,如<header>,<footer>及<nav>。

    选择合适的元素来编写代码可保证代码的易读性:

    • 使用<h1>(<h2>,<h3>…)表示标题,<ul>或<ol>实现列表

    • 注意使用<article> 标签之前应添加<h1>标签;

    • 选择合适的HTML5语义元素如<header>,<footer>,<nav>,<aside>;

    • 使用<p>描述Body 文本,HTML5 语义元素可以形成内容,反之不成立。

    • 使用<em>和<strong>标签替代<i>和<b>标签。

    • 使用<label>元素,输入类型,占位符及其他属性来强制验证。

    • 将文本和元素混合,并作为另一元素的子元素,会导致布局错误,

    例如:

          <div>Name: <input type="text" id="name"></div>

    换种写法会更好

    <div>

       <label for="name">Name:</label><input type="text" id="name">

    </div>


    布局

    要提高HTML代码的性能,要遵循HTML 代码以实现功能和为目标,而不是样式。

    • 使用<p>元素修饰文本,而不是布局;默认<p>是自动提供边缘,而且其他样式也是浏览器默认提供的。

    • 避免使用<br>分行,可以使用block元素或CSS显示属性来代替。

    • 避免使用<hr>来添加水平线,可使用CSS的border-bottom 来代替。

    • 不到关键时刻不要使用div标签。

    • 尽量少用Tables来布局。

    • 可以多使用Flex Box

    • 使用CSS 来调整边距等。

    CSS

    虽然本文讲解的是如何优化HTML,下面介绍了一些使用css的基本技能:

    • 避免内联css

    • 最多使用ID类 一次

    • 当涉及多个元素时,可使用Class来实现。

    以上就是本文介绍的优化HTML代码的技巧,一个高质量高性能的网站,往往取决于对细节的处理,因此我们在日常开发中,能够考虑到用户体验,后期维护等方面,则会产生更高效的开发。


  • 上一篇:pk10搜狐

    下一篇:盘点零基础学习HTML5开发九大应用工具

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56
必赢客北京pk拾破解版 pk10免费软件下载 北京pk10 稳赚 双色球蓝球杀号杀10码 北京pk10平台下载
北京pk10开挂 北京赛车大师打法 北京赛车pk10官方网站 北京赛车pk10违法吗 北京pk拾稳赚技巧5碼
赛车pk拾如何选胆 北京赛车哪里看直播 北京赛车pk10微信群 pk10北京赛车群 pk10现场直播在那看
北京赛车pk10软件电脑版下载 北京pk10开奖现场 北京赛车pk10走势 pk10定位胆技巧稳赚 北京赛车pk107码正确率
曾道人图库 香港六合彩官网 山西十一选五害死人 足彩八方预测 广东11选5走势图
贵州11选5数据研究 天津时时彩走势跨度 体育彩票31选7开奖 湖北十一选五推荐号码 江西快3下载安装到手机
博猫彩票 新世佳彩票 pc蛋蛋稳赚群428o00 贵州11选5开奘结果 重庆时时彩平台排行榜
永盛彩票 3d试机号 新疆11选5开奖走势图 海南飞鱼彩票怎么玩 安徽快三走势图