web移动开发最佳实践之html篇
一、前言
在目前的移动应用开发大潮下，使用web技术进行移动应用开发正变得越来越流行，它主要使用html5、css3、js等技术，在跨平台性、可移植性方面具有无可比拟的优势，特别适合开发对性能要求不太高、项目不太庞大的应用。这对于有过web经验及刚入门移动应用的同学来说，绝对是福音。
接下来的几篇文章主要介绍使用web技术进行移动应用开发时，应遵循的一些‘最佳实践’。这里所说的最佳实践其实就是一些建议，它可以让你的程序更加高效，涉及到代码风格、标准等，例如缩进、空格、行宽、命名、代码样式、变量声明和使用……随着开发经验的丰富，我会逐步更新这些文章。
使用‘最佳实践’的好处：
- 提高性能（使用更少的CPU和带宽）
- 提高跨浏览器的兼容性
- 提高代码的可维护性（这对于较大的项目和团队尤其重要）
- 提高代码可读性，以利于日后的审查和重构
- 有利于自动化任务实施，如构建脚本，自动化测试
- 更容易调试，节省时间，减少成本
二、html概述
html即超文本标记语言（Hyper Text Markup Language），它并不是一种编程语言，而是使用一套标记标签来描述网页。它的主要功能是展现网页内容。
在经历了几代的标准的进化后，html5是目前的最新标准，而且正往这个方向大力推进。下面几个章节中，将重点介绍使用html过程中的最佳实践方案。这里主要参考了黑莓10的开发指南和W3C标准。
三、从模板开始
这个，做很多事情都是差不多的。把自己常用的代码片段保存为一个模板，随时调用，不仅节省时间而且能加快开发进度。写重复的代码是没有意义的，因此当你创建了一个可以重用的基本结构时，就把它保存下来，供日后复用，这样你的效率就越来越高。一个html模板应该包括web页面的典型元素。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no">
<title>Heading</title>
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
<style type="text/css">
</style>
</head>
<body>
<h1>Heading</h1>
<p>The quick brown fox jumps over the lazy dog.</p>
<script src="js/app.js"></script>
</body>
</html>
这个模板中，有几个注意点：
- 这个应用会设置为全屏显示，因为它包含了以下meta标签：
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
- Zooming函数被关闭了，因为设置了：
user-scalable=no
- 为了提高性能，js脚本部分被放在了body元素的底部，关于这点会在以后的js篇中介绍。
四、指定文档类型（document type）
文档开头的 DOCTYPE 声明位于文档中的最前面的位置，处于<html>标签之前。它会告诉浏览器书写文档的html版本，这会影响到浏览器对内容的渲染。还有就是当你进行html标准校验时，校验器也会根据这个 DOCTYPE 来选择相应的html版本，以确定所写代码是否符合规范。
如果你没有包括 DOCTYPE 的声明，那么不同的浏览器就可能出现不同的渲染结果。使用这个声明会要求浏览器使用相应的标准来解析页面内容。
h5是目前的标准，包含了大量的新特性，声明是很简单的：
<!DOCTYPE html>
对于一些较老的设备和浏览器，可能需要声明为其他的类型(HTML 4.01 Strict or XHTML 1.0 Strict)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
五、把程序设计为离线下仍然可以使用
能随时随地地使用手机设备上应用程序的需求正越来越强，即使在离线状况下。对于web应用，你可以使用h5的缓存功能W3C HTML5 application cache来：
- 离线下仍然可以使用
- 把资源缓存在本地以提高速度
- 仅下载更新的或改变的资源以减少加载次数和数据使用
程序缓存（即AppCache）可以让你指定缓存的文件，这样即使离线仍然可以访问。当然你还可以利用开发平台提供的API来获取本地存取文件的权限。
1.创建一个缓存清单（manifest）
为了使用AppCache，你的web应用必须为浏览器提供一个"manifest"，这个清单要列举出在离线情况下你的应用需要的所有资源。页面第一次加载后，"manifest"中列举的资源就会从程序缓存中加载，而不是web服务器。"manifest"其实就是一个以".appcache"为后缀的文本文件（配置文件）。例如：
CACHE MANIFEST
# 2012-03-08:v1 # Explicitly cached resources
index.html
css/app.css
js/app.js # offline.html displays if the user is offline
FALLBACK:
/ /offline.html # All other resources require an online connection
NETWORK:
* # Additional cached resources
CACHE:
img/logo.png
你的manifest文件的mime-type必须是"text/cache-manifest"，因此你需要在web服务器添加一行配置。例如，在Apache的httpd.conf文件添加一行：
AddType text/cache-manifest .appcache
为了访问manifest文件，你必须在html文档中声明（通过添加html标记的manifest属性，如下），manifest属性指向相应的manifest文件。如果你的应用有多个页面，那么每个页面都要包含manifest属性，否则这些页面就不会成为AppCache，离线下也就不会工作了。
<html manifest="html5.appcache">
2.更新appcache
一旦你的应用被缓存了，它会一直被缓存直到满足以下任何一个条件：
- 用户清除了缓存
- manifest文件被改变了。注意：更新服务器上的资源不会触发缓存的更新，你必须修改manifest文件本身
- 程序的缓存被程序自动更新了
3.相关资源
- ApplicationCache API specification
- Article from A List Apart Magazine
- BlackBerry WebWorks API reference
六、使用正确的viewport语法
viewpoint是用户在手机设备上可以看到的矩形区域。你可以再meta标记中重写viewpoint。但是记住，viewpoint在meta标记中的语法和在CSS中的语法并不一样，你必须用逗号（commas）分隔不同的值，而不是分号（semicolons）。例如：
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
七、创建一个站点的图标（icon）
每一个浏览器都会把名为favicon.ico的文件作为该站点的icon。比如你经常会在地址栏、tab栏、书签栏或者收藏夹看见这些小图标：
浏览器在加载web页面时，也会发送一个获取favicon.ico的请求，如果没有这个文件，你会在服务器日志中看到404的错误。为了避免错误，也为了页面的美观，你应该在web应用中包含一个这样的文件。例如：
<link href="favicon.ico" rel="icon" type="image/x-icon">
八、使用外部文件
使用外部的js和css文件有很多好处，最主要的好处是让页面响应更快，原因如下：
- 外部文件会被浏览器缓存，这会减少http请求次数，另外，内联的js和css会在每次加载主文档的时候被下载
- 减少主文档大小
当然，这并不是对每种情况都适用的，当满足如下两种情况时，就可以考虑将资源放在外部：
- 在多个html文档中都有用到
- 并不经常改变
关于使用外部文件，这里有一些建议：
- 把资源转移到一些知名的站点，这样可以减少DNS查询的次数
- 使用另一个域名的资源，对于特定的域名，浏览器有链接次数的限制，使用其他域名的资源，浏览器就可以并行地发送请求
- 对于常用的js库，使用CDN（Content Delivery Network）托管的文件。这样就可以减少延迟，提高缓存利用率和程序性能。例如使用google的CDN-hosted jQuery：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>- 使用Web Inspector分析web应用的性能。
九、把css文件放在顶部
另一种提高页面加载速度的办法是把css文件放在文档的顶部。把css文件放在head节点内，页面就会逐步渲染，这样就会感觉加载速度变快，而且能给用户提供视觉上的反馈。但是如果放在文档底部，浏览器就会阻塞渲染过程以避免样式改变后的重绘过程，用户在此时就会看到白屏。还有一种好处就是提高并行化，不像脚本，css并不需要同步处理。例如：
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="styles1.css">
</head>
<body>
...
</body>
</html>
十、css中避免使用import
在html文档中使用外部css文件时，要避免使用 @import规则，而是使用<link>标签。因为在一些浏览器中，它的效果就像是该css文件处在html文档底部一样，这会阻塞页面的加载。
<!--Not recommended: Using @import-->
<style>
@import url("styles2.css");
</style>
<!--Recommended: Using a LINK tag-->
<link rel="stylesheet" href="styles1.css">
另外，@import规则还可以嵌套到css文件里，这阻塞了css文件的并行加载，例如：如果style1.css包含了以下
<!--Not recommended: Using @import-->
@import url(styles2.css)
十一、把脚本放在底部
尽管W3C spec允许你可以把脚本放在head或body的任意地方，但是位置不同会影响到页面的渲染，因为浏览器会停下来执行js代码，而后面的内容渲染就会被阻塞。放在body底部就会有更多的内容被渲染，同样有利于并行下载，你还不必担心DOM是否加载完成，因为所有的东西都已经加载完了。
除非你使用不赞成使用的document.write来产生body元素，你的脚本通常都可以移到html文档的底部。
<!--Recommended: Placing the script near the bottom of the BODY-->
<html lang="en">
<body>
...
<script src="js/app.js"></script>
</body>
</html>
<!--Not recommended: Placing the script in the HEAD-->
<html lang="en">
<head>
<script src="js/app.js"></script>
</head>
<body onload="init();">
...
</body>
</html>
十二、推迟脚本加载（defer）
如果不想把脚本放在文档底部，可以使用defer属性延迟脚本的加载。该属性告诉浏览器在页面加载完成后才执行脚本。
<script src="js/app.js" defer></script>
但是，defer属性在浏览器之间表现并不一致。为了避免跨浏览器的差异，可以使用 "lazy loading"的方法，即直到用到该脚本时才加载。例如：
function lazyload() {
var elem = document.createElement("script");
elem.type = "text/javascript";
elem.async = true;
elem.src = "app.js"; // contains more than 25 uncalled functions
document.body.appendChild(elem);
}
if (window.addEventListener) {
window.addEventListener("load", lazyload, false);
} else if (window.attachEvent) {
window.attachEvent("onload", lazyload);
} else {
window.onload = lazyload;
}
web移动开发最佳实践之html篇的更多相关文章
- web移动开发最佳实践之js篇
一.js概述 js即JavaScript,是被设计用来验证表单.检测浏览器.创建cookies.改进设计以及更多应用的网络脚本语言,它非常容易使用.在web应用中,它是主要的编程语言,主要用途是进行各 ...
- Web前端开发最佳实践（1）：前端开发概述
引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
- web前端开发最佳实践笔记
一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...
- 【社区公益】送《Web前端开发最佳实践》给需要的人
算起来至今,我进入软件开发行业已经有11年之久.从最初的研究人工智能,到后来的Web开发,控件开发,直到现在纯粹的Web前端开发.虽然没有大的作品问世,但也是勤勤恳恳,踏实做事,低调做人.从来不吹牛逼 ...
- Web前端开发最佳实践系列文章汇总
Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的met ...
- Web前端开发最佳实践（9）：CSS代码太太乱，重复代码太多？你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
- Web前端开发最佳实践（7）：使用合理的技术方案来构建小图标
大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...
- Web前端开发最佳实践（2）：前端代码重构
前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
随机推荐
- ajaxSubmit() 上传文件和进度条显示
1. 首先引用js文件 <script type="text/javascript" src="/js/jquery/jquery.form.js"&g ...
- text与button上下不对齐解决方法
火狐可以对齐,但是IE8不行,加上浮动就可以了 .search_right input[type=button] { float:right; }
- prefix和unprefix
exports._esModule = true; exports.default = { prefix: function prefix(prop){ if (prop[0] === '-'){ v ...
- MEF学习笔记
之前公司里用到了一个叫MEF的东西,说来惭愧一直只管写代码却不曾理解MEF框架为何物,今天就来学习一下,这是一篇迟到了不知多久的博客. -------------------------------- ...
- Python的设计模式学习
1.工厂模式 #encoding=utf-8 __author__ = 'kevinlu1010@qq.com' class ADD(): def getResult(self,*args): ret ...
- 创建第一个UI
创建一个2D UI 制作UI时,首先要创建UI的"根".在Unity顶部NGUI菜单中选择Create,然后选择2D UI. 创建完成后,在Scene窗口中,NGUI自动生成了一个 ...
- js对象序列化JSON.stringify()与反序列化JSON.parse()
草稿: parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age" ...
- delphi xe5 android 使用样式(风格)
1.在界面上添加 TStyleBook 控件 2.点击Resource 选择xe5程序安装带的几个风格的其中之一,路径存放在: C:\Program Files\Embarcadero\RAD Stu ...
- java.io.IOException: Cannot run program "bash": error=12, Cannot allocate memory
java.io.IOException: Cannot run program , Cannot allocate memory 云服务器运行nutch报出的异常: 解决方案: http://daim ...
- php smarty insert用法
insert用于模板中. 用法:{insert name="method_name"} 此时会寻找php文件中方法名为:insert_method_name的函数, 将其返回值作为 ...