• UID9468
  • 登录2016-03-07
  • 粉丝0
  • 关注0
  • 发帖4
  • 主页
  • 金币28枚
社区居民
免费教程 发布于2016-03-07 18:08
3/1884

高性能 HTML

楼层直达
在阅读本文之前,你是怎样优化网页的呢?
大多数开发者的焦点集中于 JavaScript、图片、服务器配置、文件压缩合并,甚至是 CSS。
虽然 HTML 是前端技术的核心之一,但却一直没有得到应有的重视。
HTML 的体积日渐臃肿。目前,全球访问量前 100 的网站每个页面大概有 40kB 的大小,类似亚马逊和雅虎这样的网站,甚至每个页面包含了数千行的 HTML 代码。最近,youtube 主页的 HTML 代码量甚至达到了惊人的 3.5K 行(翻译本文时已达到了 4.8K 行)。
降低 HTML 的复杂度以及代码量,并不会直接改善解析性能——但是,对于创建快速响应和适配多种尺寸的页面来说,精心构建的 HTML 是至关重要的基础。
在本文中,你能学到怎样编写简洁精练的 HTML,进而实现快速加载页面和兼容多种设备尺寸。在整个过程中,你也会了解到怎样构建易于调试和维护的网站或应用。
编写代码的方式从来都不会固定的,尤其是对于 HTML 更是如此。在本文中,不会直接介绍那些通识或公认的教条,而是直接从我们的工作中的最佳实践出发。对于每一条建议,请具体情况具体采纳。


概述


  • 结构分离:使用 HTML 实现页面结构而不是添加表现样式;
  • 用法准确:在开发中使用[url=https://web.tutorialonfree.com/gao-xing-neng-html/[http://www.google.com/url?q=http%3A%2F%2Fhtmlhint.com%2F&sa=D&sntz=1&usg=AFQjCNF63dUdD3fDqymM2O3mIX3uRpXS2Q]]代码校验工具[/url]。
  • 逻辑清晰:对于代码结构和格式采用相同的[url=https://web.tutorialonfree.com/gao-xing-neng-html/[https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2FSublimeLinter%2F&sa=D&sntz=1&usg=AFQjCNFdRfvpuQXBMgME3TbOACox0UaCMw]]工具[/url]或[url=https://web.tutorialonfree.com/gao-xing-neng-html/[https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml]]编程规范[/url],保持开发和维护的一致性。
  • 标记合理:合理正确地使用[url=https://web.tutorialonfree.com/gao-xing-neng-html/[http://html5doctor.com/lets-talk-about-semantics/]]语义化标签[/url]。
  • 确保可用:使用[url=https://web.tutorialonfree.com/gao-xing-neng-html/[https://www.google.com/url?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAccessibility%2FARIA&sa=D&sntz=1&usg=AFQjCNG5NFxnFpJmXrAQw_F7pjhKSCr8Ew]]ARIA[/url]作为备用选项。在只能查看文本内容的浏览器,或者使用屏幕阅读器,测试当前网站。
  • 多维测试:使用[url=https://web.tutorialonfree.com/gao-xing-neng-html/[https://developer.chrome.com/devtools/docs/device-mode]]模拟器模式[/url]和[url=https://web.tutorialonfree.com/gao-xing-neng-html/[https://developers.google.com/speed/pagespeed/insights/]]性能检测工具[/url],在多种设备和屏幕尺寸上测试网站。



HTML、CSS 和 JavaScript

HTML 只是一门标记语言,用以添加结构和内容。
HTML 不应该用于美化内容的表现样式。永远不要将标题标签用于“放大字体”,或者使用引用标签表现缩进。与之相反,应该使用 CSS 表现表现和布局样式。
浏览器会使用默认的样式表来渲染 HTML 元素:Chrome、Firefox、Internet Explrer 和 Opera 都拥有各自的默认样式。比如,在 Chrome 中,h1 标签默认的表现样式为 32px bold Times。
通用三原则:

  • 使用 HTML 构建结构,使用 CSS 渲染样式,使用 JavaScript 控制行为。[url=https://web.tutorialonfree.com/gao-xing-neng-html/[http://www.csszengarden.com/]]CSS ZenGarden[/url] 上展示了许多基于该原则的实例。
  • 先使用 HTML 构建,当需要渲染样式时使用 CSS,如果确有必要,再使用 JavaScript。比如,大多数情况下,会使用HTML 验证表单,使用 CSS 或者 SVG 实现验证动效——由此就无需使用 JavaScript 了。
  • 将 CSS 和 JavaScript 文件与 HTML 分离。这种分离有助于代码复用和调试。在上线前,可以通过构建简称压缩和合并 CSS、JavaScript 文件。


文档结构

使用 HTML5 文档类型。下面是一个基本框架:

<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
在 Head 中引入相关的 CSS 文件:

<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"> </head>
使用这种方式,有助于浏览器在解析 HTML 前加载和解析 CSS。
将对 JavaScript 文件的引用置于页面底部,在闭合 body 标签之前——这样做有助于浏览器在解析 JavaScript 之前渲染页面,进而提高加载速度,也有助于在执行 JavaScript 之前,保证页面加载完成:

<body> ... <script src="https://web.tutorialonfree.com/js/global.js"> <script src="js/local.js"> </body>
不要使用内联形式的 JavaScript:

<head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>
下面的形式编程方法更好:
index.html

<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>
js/local.js

init(); var fooButton = document.querySelector('#foo'); fooButton.onclick = handleFoo();


校验

Web 技术能够流行的一个重要因素就在于,浏览器可以处理一些无效的 HTML 语法,甚至专门有一个标准规范规定浏览器应对无效代码的解决方案
然而,这并非我们可以为所欲为的借口。有效的 HTML 代码更易于调试,通常也更简洁,易于解析和渲染。无效的 HTML 代码往往让响应式设计难以实现。
编写有效的 HTML 代码对使用模板也非常重要:某些独立代码虽然看起来不错,但引用到其他文件进行解析时可能就会出现大量错误。

  • 将校验纳入工作流:使用类似 HTMLHint 和 [SublimeLinter] 的校验插件校验代码,同时可以在 Grunt 中使用 HTMLHint 进行校验。
  • 使用 HTML5 文档类型;
  • 确保良好的层次结构便于后期维护:正确嵌套元素,确保所有元素正确闭合。这有助于给大段代码添加注释方便调试,特别是使用模板的情况下:

<div id="foobar"> ... </div> <!-- foobar ends -->
确保正确闭合那些不能自闭和的元素:
比如下面这段代码:

<p>Pesto is good to eat... <p>...and pesto is easy to make.
建议使用如下形式,减少出现错误的可能性:

<p>Pesto is good to eat...</p> <p>...and pesto is easy to make.</p>
虽然列表项不必使用闭合标签,甚至一些开发者认为你不用在意它。但无论如何,建议你关闭每一个列表项:

<ul> <li>Basil <li>Pine nuts <li>Garlic </ul>
video 和 audio 标签是必须闭合的元素,它们不具有自闭和的特性:

<!-- wrong: liable to cause layout grief --> <video src="foo.webm" /> <!-- better --> <video src="foo.webm"> <p>Video element not supported.</p> </video>
与上述相反的一些建议是,去掉冗杂代码:

  • 没有必要为类似 <img><link> 的标签添加闭合标签,更多类似标签请参考这里
  • 布尔值属性无需明确指出具体的值:如果填写了该属性,那么就表明了是 true。
下面的代码表示不能自动播放,也没有控制按钮:

<video src="foo.webm">
下面的代码并不能实现禁止自动播放和禁用控制按钮,因为只要出现相关属性就会被强制赋值为 true

<video src="foo.webm" autoplay="false" controls="false">
下面是正确的:

<video src="foo.webm" autoplay="true" controls="true">
下面的代码更具有可读性:

<video src="foo.webm" autoplay controls>
无需为样式表和脚本引用代码添加类型属性:CSS 和 JavaScript 本身就是默认值。当使用外部内容时省略协议信息:有助于避免混合内容出现的错误。用法举例:

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>


编码格式

一致的代码格式有助于理解、优化和调试。

  • 项目成员共用同一个 HTML 编码格式,也可以使用类似谷歌的既有代码格式。
  • 使用编辑器自动美化代码。比如,在 Sublime Text 添加快捷键实现快速缩排。还可以使用类似 SublimeLinterCSS BeautifyJS Beautify 的代码审查工具检查布局。
  • 不用反感 HTML 层次分明的缩进排列。在开发前使用合理的默认间距即可摆脱这个问题。相反的是,如果层次结构特别深,那么你就需要考虑重构了。
  • 统一缩进格式,使用 tab 或空格,不要两者兼具。
  • 使用有意义的嵌套改善可读性。比如,下面的代码清晰地表明了这是一个标题:

<h2><a href="https://web.tutorialonfree.com/contact">Contact</a><h2>
而下面的代码则像是一个链接:

<a href="https://web.tutorialonfree.com/contact"><h2>Contact</h1></a>

  • 使用合理的顺序排列元素,不致于误导后期维护的开发者,甚至是许久之后回顾这段代码的你。比如,footer 标签虽然可以置于任何地方,但你应该将它置于页面底部。
  • 统一使用单引号或双引号。
  • 标签和属性名使用小写形式,阅读大写形式往往带来疲惫感:

<A HREF="/">Home</A>
没有比混合两种形式更糟的情况了:

<H2>Pesto</h2>


语义化标签

语义化,意味着见名知意。
HTML 标签为页面内容增加了含义:元素和属性名表述了对内容的角色定位。
HTML5 引入了一系列的语义化标签,比如 <header><footer><nav>
使用正确的标签包裹内容,既有利于可用性,也确保了代码的可读性。

  • 使用 <h1><h2><h3>……)创建标题,使用 <ul><ol> 创建列表。
  • <article> 标签内应该有一个类似 <h1> 的标题标签(点击查看相关文章)。
  • 合理运用语义化标签,比如 <header><footer><nav><aside>
  • 使用 <p> 标签创建文本内容,使用其他语义标签创建结构框架(如果没有适当语义化标签,可以使用 <div>)。
  • 在表单中明确 <label> 标签、输入类型、占位符文本和其他所需的属性,形成良好的验证机制(更多信息请参考这里)。
  • 混合标签和文本的写法,有可能会制造布局错误,比如下面这样:

<div>Name: <input type="text"></div>
下面是更好的编写方式:

<div><label>Name:</label><input type="text"></div>


布局

有必要再次重申:HTML 应该用于语义化和创建页面结构,而不是美化样式。

  • 使用 <p> 标签创建文本,而不是创建布局。<p> 一般会被浏览器默认样式提那家外边距和其他样式。
  • 避免使用 <br> 进行断行:使用块级元素或者 CSS display 属性代替。<br> 只应该被使用到文本之内,即使如此,也应该尽少使用。
  • 避免使用 <hr> 添加水平分割线:CSS border-bottom 更适合做这件事。使用 <hr> 往往代表着分割不同的主题
  • 不要添加冗余的 <div>: W3C HTML 规范表述 <div> 是一种后背元素,当没有其他适合元素可以使用时,方可使用过它。对于类似 <a><img> 这样的行内元素,可以通过 display: block,而不是将其放入 <div> 中,更不要随意添加 <br>
  • 深入了解具体的块级元素,避免不必要的包裹,比如将列表放入 <div> 中。
  • 不要使用表格标签来布局,而应该使用表格来表现表格数据。
  • Flex 已经收到了广泛的支持,请使用它!
  • 统一外边距:为元素添加底边和右边的外边距是非常棒的实践,而不是添加顶部和左边的外边距。无论你使用哪种方式,避免混合使用各边外边距。使用 :last-of-type 选择器避免冗余外边距。


HTML email

开发邮件和开发网页完全是两回事。
本文中我们不会深入探讨相关的细节——可以说开发 HTML email 的最佳实践和上个世纪九十年代非常类似:表格、GIFs、不一致和压缩的 CSS,以及大量的补丁(可以点击这里查看来自 MailChimp 的模板示例)。
更多信息请点击这里这里这里


CSS

虽然本文主讲 HTML,但这里有必要穿插一些基础的 CSS 知识:

  • 避免使用行内 CSS。为了优化性能,可以将 CSS 文件融入你的构建流程中。
  • 只能有一个 ID 选择器,且只能使用一次。
  • 当定义多个同类元素时,使用 Class 选择器,更多信息请参考 BEM 语法。尽量在父级元素使用 Class 选择器,而不是子元素上。举例如下:

<!-- verbose :( --> <ul> <li class="ingredient">Basil</li> <li class="ingredient">Pine nuts</li> <liclass="ingredient">Garlic</li> </ul> <!-- better :) --> <ul class="ingredients"> <li>Basil</li> <li>Pine nuts</li> <li>Garlic</li> </ul>


可用性

充分考虑页面在多种设备、环境和输入方式中的交互体验。

  • 使用语义化标签。
  • 提供预备方案:使用跟踪式导航添加标题和子标题,为视频和音频标签添加提示文字或图片;为视频元素使用海报图片;为图片添加 alt 属性(如果图片只是用来装饰的,该属性可以置空)。
  • 为链接标签添加 title 属性——当且仅当该属性有意义,同时不要重复链接内容。
  • 在 input 标签中添加 type 和 placeholder 属性。
  • 使用 ARIA 属性


其他建议


  • 确保 HTML 中的特殊字符得到正确转义,比如 <& 字符。正确使用方法:<title>HTML &amp;JavaScript</title>
  • 与上一条相反的是,无需编码连字符之类的特殊符号,或者是货币符号。
  • 当且仅当代码无法见名知意时添加注释(牢记,注释利于重构,优秀的 HTML 代码,即使复杂,依然通俗易懂)。
  • 对于需要全大写的地方,可以使用 CSS 的 text-transform 和 font-variant 属性来实现,而不是直接输入大写文本。毕竟需求是多变的!当用户拷贝文本时,它们可能想要大小写混合的形式。下面的 <h4> 标签被显示为小写形式,但拷贝使用时则是大小写混合形式的:
HTML:

<h4>W3C Web Accessibility Initiative ARIA guidance</h4>
CSS:

h4 { font-variant: small-caps; }


最后

无论你写了什么,记得测试!
将 HTML 测试流程融入你的工作流、工具链和发布管程中。
在不同的设备上测试,在不同的屏幕尺寸上测试,甚至做到在不同网络环境下测试。使用类似 Lynx 只能使用显示文本的浏览器,或者是类似 ChromeVox 的屏幕阅读器,测试页面的交互体验。使用类似谷歌开发者工具的模拟器模式监视变动。还可以将 Page SpeedWeb Page Test 等工具融入工作流中,实现项目上线前的自动测试。
编写高性能 HTML 的知识,请参考 HTML,CSS and JavaScript resourcesWeb Fundamentals
如需转载,烦请注明出处:高性能 HTML

0人打赏
  • UID8829
  • 登录2017-06-21
  • 粉丝1
  • 关注0
  • 发帖112
  • 主页
  • 金币606枚
社区居民
忠实会员
大印 发布于2016-03-08 09:03
沙发F
无论你写了什么,记得测试!
  • UID13161
  • 登录2016-11-17
  • 粉丝0
  • 关注3
  • 发帖2
  • 主页
  • 金币92枚
社区居民
1ny丶明 发布于2016-08-29 20:40
板凳F
学习了。。
  • UID13433
  • 登录2016-10-21
  • 粉丝0
  • 关注0
  • 发帖28
  • 主页
  • 金币125枚
青竹 发布于2016-08-30 14:26
地板F
楼主霸气
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 68985/364   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 39028/190   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 36136/0   Python爬虫:常用浏览器的useragent

  • 35949/255   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 35286/145   省时省力的Android组件群来了,非常棒的原型参考

  • 27869/2   超全!整理常用的iOS第三方资源

  • 26942/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 26539/142   2016抢红包软件及源码

  • 21536/30   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 21186/25   Android工程师面试题大全

  • 20944/27   2016程序员跳槽全攻略

  • 20753/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 20607/155   Android版类似UC浏览器:非常赞,产品级的源码

  • 19811/20   码魂:程序员的牛B漫画

  • 18084/10   2016年最全的Android面试考题+答案 精编版

  • 17845/3   吐槽那些程序员的搞笑牛逼注释

  • 17106/42   一个绚丽的loading动效分析与实现!

  • 16920/85   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 16879/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 16814/1   iOS 动画总结

  • 16063/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 15855/23   个人收集的Android 各类功能源代码

  • 15626/10   女程序员的梦,众网友的神回复

  • 15388/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 15321/11   年会上现场review代码是怎么样的体验!

  • 15259/81   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 14861/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 14802/23   珍藏多年的素材,灵感搜寻网站

  • 14801/101   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 14715/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 14677/20   Android福利第三波【Android电子书】

  • 14218/76   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 13943/0   iOS中文版资源库,非常全

  • 13857/15   基于Android支付宝支付设计和开发方案

  • 13829/18   65条最常用正则表达式,你要的都在这里了

  • 13328/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12982/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 12656/7   一张图搞定iOS学习路线,非常全面

  • 12596/7   用程序员的姿势抢过年的火车票

  • 12434/46   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 12296/10   成为Java顶尖程序员 ,看这11本书就够了

  • 12119/10   微信支付终于成功了(安卓,iOS),在此分享

  • 12032/18   一张图搞定Android学习路线,非常全面

  • 11882/0   GitHub iOS 库和框架Top100 

  • 11786/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 11607/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 11582/29   【持续更新中】Android福利贴(一):资料源码

  • 10992/4   46 个非常有用的 PHP 代码片段

  • 10875/3   即时通信第三方库

  • 10567/8   流媒体视频直播方案

  • 10421/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 10403/18   八个最优秀的Android Studio插件

  • 10280/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 10107/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 10081/10   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 9499/6   开箱即用!Android四款系统架构工具

  • 9335/10   十大技巧快速提升Android应用开发性能

  • 9272/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 9232/3   一张图看清Linux 内核运行原理

  • 9022/1   Android性能优化视频,文档以及工具

  • 返回顶部