你不可不知的 HTML 优化技巧【mgm娱乐场】

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

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

<!DOCTYPE html> <html> <head> <title>Recipes:
pesto</title> </head> <body>
<h1>Pesto</h1> <p>Pesto is good!</p>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
<head>
<title>Recipes: pesto</title>
</head>
 
<body>
 
  <h1>Pesto</h1>
 
  <p>Pesto is good!</p>
 
</body>
</html>
  • 在文档起始位置引用CSS文件,如下:

<head> <title>My pesto recipe</title> <link
rel=”stylesheet” href=”/css/global.css”> <link rel=”stylesheet”
href=”css/local.css”> </head>

1
2
3
4
5
6
7
<head>
  <title>My pesto recipe</title>
 
  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">
 
</head>

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

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

<body> … <script src=”/js/global.js”> <script
src=”js/local.js”> </body>

1
2
3
4
5
6
7
8
<body>
 
  …
 
  <script src="/js/global.js">
  <script src="js/local.js">
 
</body>

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

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

index.html:

<head> … <script src=”js/local.js”> </head> <body
onload=”init()”> … <button
onclick=”handleFoo()”>Foo</button> … </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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();

1
2
3
4
init();
var fooButton =
    document.querySelector(‘#foo’);
fooButton.onclick = handleFoo();

<div class=”poem-stanza”>

CSS

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

  • 避免内联css
  • 最多使用ID类 一次
  • 当涉及多个元素时,可使用Class来实现。

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

2 赞 8 收藏 2
评论

There are three pieces to most examples of jQuery usage: the HTML
document, CSS files to style it, and JavaScript files to act on it. For
our first example, we’ll use a page with a book excerpt that has a
number of classes applied to portions of it. This page includes a
reference to the latest version of the jQuery library, which we have
downloaded, renamed jquery.js, and placed in our local project
directory, as follows:

验证

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

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

  • 在工作流中添加验证功能:使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。
  • 使用HTML5文档类型
  • 确保HTML的层次结构易于维护,要避免元素嵌套处于左开状态。
  • 保证添加各元素的结束标签。
  • 删除不必要的代码 ;没有必要为自关闭的元素添加结束标签;Boolean
    属性不需要赋值,如果存在则为True;

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

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

</span>

布局

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

  • 使用<p>元素修饰文本,而不是布局;默认<p>是自动提供边缘,而且其他样式也是浏览器默认提供的。
  • 避免使用<br>分行,可以使用block元素或CSS显示属性来代替。
  • 避免使用<hr>来添加水平线,可使用CSS的border-bottom 来代替。
  • 不到关键时刻不要使用div标签。
  • 尽量少用Tables来布局。
  • 可以多使用Flex Box
  • 使用CSS 来调整边距等。

</span>

代码格式

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

<div>;ebaw eht ni elbmig dna eryg diD</div>

HTML、CSS 和JavaScript三者的关系

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

三条通用设计规则:

  1. 使用HTML
    来构造页面结构,CSS修饰页面呈现,JavaScript实现页面功能。CSS
    ZenGarden 很好地展示了行为分离。
  2. 如果能用CSS或JavaScript实现就少用HTML代码。
  3. 将CSS和JavaScript文件与HTML 分开存放。这可有助于缓存和调试。

<h2 class=”chapter-title”>1. Looking-Glass House</h2>

你不可不知的 HTML 优化技巧

2016/09/12 · 基础技术 ·
2 评论 ·
HTML

本文作者: 伯乐在线
葡萄城控件
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

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

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

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

.highlight {background-color: #ccc;border: 1px solid #888;font-style:
italic;margin: 0.5em 0;padding: 0.5em;}

关于作者:葡萄城控件

mgm娱乐场 1

葡萄城成立于1980年,是全球最大的控件提供商、微软公司认证的金牌合作伙伴。

个人主页
·
我的文章
·
2
·
   

mgm娱乐场 2

<body>

语义标记

语义指意义相关的事物,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>

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

<span class=”spoken”>

换种写法会更好

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

1
2
3
<div>
   <label for="name">Name:</label><input type="text" id="name">
</div>

<h3 class=”poem-title”>JABBERWOCKY</h3>

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

  • 结构分离:使用HTML 增加结构,而不是样式内容;
  • 保持整洁:为工作流添加代码验证工具;使用工具或样式向导维护代码结构和格式
  • 学习新语言:获取元素结构和语义标记。
  • 确保可访问: 使用ARIA 属性和Fallback 属性等
  • 测试: 使网站在多种设备中能够良好运行,可使用emulators和性能工具。

mgm娱乐场 3

</div>

在大部分jquery使用的范例代码中有三部分:html文档,为他加样式的css文件,在上面添加行为的js文件。对我们第一个例子,我们使用一个有很多类应用其中一部分的html页面。这个网页包含对我们已经下载下来的最新的jquery版本的一个引用,我们把它重命名为jqurey.js然后放到本地项目目录中,如下:

“—for it’s all in some language I don’t know,”

<div>,sevogorob eht erew ysmim llA</div>

<span class=”spoken”>

</p>

she said to herself.

在这本书剩余部分,只有html和css文件的相关部分才会被打印出来,文件的全部可以在这本书的相关站点http://book.learningjquery.com找到。

<title>Through the Looking-Glass</title>

<meta charset=”utf-8″>

 

<div>And the mome raths outgrabe.</div>

Throughout the rest of this book, only the relevant portions of HTML and
CSS files will be printed. The files in their entirety are available at
the book’s companion website http://book.learningjquery.com.

<div class=”chapter” id=”chapter-1″>

<script src=”jquery.js”></script>

File Paths

<p>There was a book lying near Alice on the table, and while she
sat watching the White King (for she was still a little anxious about
him, and had the ink all ready to throw over him, in case he fainted
again), she turned over the leaves, to find some part that she could
read, 

<head>

</div>

</head>

<div class=”poem”>

<script src=”01.js”></script>

<div class=”author”>by Lewis Carroll</div>

a bright thought struck her.

相关文章