前端html知识分享—页面速度优化

最新推荐文章于 2024-08-15 09:46:46 发布

云南仟龙Mark

最新推荐文章于 2024-08-15 09:46:46 发布

阅读量316

点赞数

文章标签：前端 html javascript

原文链接：https://blog.51cto.com/u_15111999/4803664

版权

今天分享下”前端html知识分享—页面速度优化“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。如何提高网页性能呢？

大多数开发者都会通过JavaScript通过服务器配置、压缩文件和合并文件优化图片 - 甚至调整CSS(合并小图片)。

可怜的HTML尽管它一直是网络的核心语言，但它总是被忽视。

HTML它正在变得越来越大。前100网站每HTML页面大多在40K大约。亚马逊和雅虎使用数千个HTML页面。在youtube.com主页面，HTML高达3500个元素。

减少的HTML复杂性和页面元素的数量不会显著增加分析时间 - 但HTML它是构建快速网页、适应不同设备、影响成功的关键因素。

在这篇文章中，了解如何编写简洁干净的HTML，使您能够创建一个快速加载和支持各种设备的网站，这将很容易调试和维护。

写代码的方法不仅仅是HTML。这只是解释一般经验，但不是唯一正确的选择。

HTML, CSS 和 JavaScript

HTML用来表达结构和内容的标记语言。

HTML不要用来展示风格和风格。不要在标题标签上写文字以显得更大(h1~h6)使用b，或者只是为了缩进lockquotes相反，使用CSS改变元素的外观和布局。

HTML通过浏览器的默认风格实现元素的默认外观：Firefox，Internet Explorer和Opera都不一样。例如，在Chrome中默认h1元素呈现为32px的大小。

三个基本原则：

使用HTML表示结构，CSS用于表达不同风格的风格和主题。JavaScript响应用户行为。

使用HTML必要时使用CSS在不得己的时候加JavaScript。例如，在许多情况下，你可以使用HTML验证表单，使用CSS或SVG实现动画。

将CSS和JavaScript从你的HTML分离代码。让它们缓存，使代码更容易调试。在生产中，CSS和JavaScript可压缩合并，应作为您的Build系统的一部分。注* 参见 JavaScript构建(编译)系统大赛

Document文档结构

使用 HTML5的document type:

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  
<html>  
<head>  
 <title>Recipes: pesto</title>  
</head>  
<body>  

  <h1>Pesto</h1>  
  <p>Pesto is good!</p>  

</body>  
</html>  
　　在页面最头部引用CSS文件，如在head元素中：

CSS Code复制内容到剪贴板

<head>   
  <title>My pesto recipe</title>   
  <link rel="/css/global.css">   
  <link rel="css/local.css">   
</head>  
　　这样，浏览器就可以在解析HTML前预先加载样式而不会呈现一个混乱的页面布局。

　　把JavaScript放在页面的最底部, 在body封闭之前。这将提高页面渲染时间，因为浏览器可以在JavaScript装载前将页面渲染出来:

JavaScript Code复制内容到剪贴板

<body>   
  ...   
  <script src="/js/global.js">   
  <script src="js/local.js">   
</title= http://www.qlyl1688.com>
</body>  
　　在JavaScript添加事件处理。 不要在HTML中添加。这样非常难以维护，比如:

XML/HTML Code复制内容到剪贴板

index.html:   

<head>  
  ...   
  <script src="js/local.js">  

</head>  

<body onload="init()">  
  ...   
  <button onclick="handleFoo()">Foo</button>  
  ...   
</body>  
　　这样就好多了:

JavaScript Code复制内容到剪贴板

<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();  
　合法的HTML

　　Web网页成功的一个主要因素就是浏览器可以处理无效的HTML。浏览器还有一些如何呈现无效代码的标准化规则。

　　但是，这不你放任的理由。有效的HTML更容易调试，往往文件更小，速度更快，占用资源更少，因为它们渲染更快。无效的HTML让响应式设计难以实施。

　　使用模板的时候写有效的HTML是特别重要的。

　　在你的BUILD系统中验证HTML：使用验证插件，如HTMLHint和SublimeLinter来检查你HTML的语法。

　　使用HTML5文档类型。

　　请务必保持HTML的层次：正确嵌套元素，确保没有任何未关闭的元素。它可以帮助调试者添加注释。

XML/HTML Code复制内容到剪贴板

<div id="foobar">  
...   
</div> <!-- foobar ends -->  
　　请务必在非自封闭的元素后加上结束标签，比如，下面的也可以工作：

XML/HTML Code复制内容到剪贴板

<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>

　　items元素（li）并不是必须封闭的，有些非常聪明的的程序员会写成这样，无论如何，list元素(ul)是必须封闭的。

XML/HTML Code复制内容到剪贴板

<ul>  
  <li>Basil   
  <li>Pine nuts   
  <li>Garlic   
</ul>  
　　有一点你必须注意video和audio元素。他们不是自封闭的：

XML/HTML Code复制内容到剪贴板

<!-- 错误: liable to cause layout grief -->  
<video src="foo.webm" />  

<!-- 正确 -->  
<video src="foo.webm">  
  <p>Video element not supported.</p>  
</video>

相反，通过删除不必要的代码HTML页面会变得更干净

没有必要为自封闭元素添加"/"，像img等

设置属性是没有值的，如果不加属性的话（这种情况下，它不会自动播放，没有控制控件），

video，它是没有任何属性的

XML/HTML Code复制内容到剪贴板

<video src="foo.webm">  
　　下面两种更好

XML/HTML Code复制内容到剪贴板

<video src="foo.webm" autoplay="false" controls="false">  
<video src="foo.webm" autoplay="true" controls="true">  
　　这种可读性更强

XML/HTML Code复制内容到剪贴板

<video src="foo.webm" autoplay controls>  
　　stylet和script标签不需要type属性；默认就是css和javascript

　　优化协议地址更好（去除置http或https，它会根据当前协议自动配)

XML/HTML Code复制内容到剪贴板

<a href="//en.wikipedia.org/wiki/Tag_soup">Tag soup</a>  
　　增强可读性，如，第一眼看上去就像是个标题

XML/HTML Code复制内容到剪贴板

<h2><a href="/contact">Contact</a><h2>  
　　而这种则像个链接

<a href="/contact"><h2>Contact</h1></a>

　　应该使用小写

XML/HTML Code复制内容到剪贴板

<A HREF="/">Home</A>  
　　大小写混合看上去更恶心

XML/HTML Code复制内容到剪贴板

<H2>Pesto</h2>  
　语义标记

　　“语义”意思是跟含义相关

　　HTML应该标记有意义的内容：元素和描述的内容相符。

　　HTML5引入了一些新的‘语义元素’像 <header>, <footer> 和 <nav>。

　　使用正确的元素表达正确的内容对于可访问性是有帮助的。

　　使用<h1><h2>,<h3>代表标题， <ul>或<ol>代表lists

　　注意<article>的标题应该以<h1>开始

　　使用<header>, <footer>, <nav> and <aside>

　　使用<p>写正文

　　使用<em> 和 <strong> 代替 <i> 和 <b> 表示强调

　　表单使用<label>元素，input 类型

　　混合文字和元素会导至布局的问题

XML/HTML Code复制内容到剪贴板

<div>Name: <input type="text"></div>  
　　最好用下面的表示

XML/HTML Code复制内容到剪贴板

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

布局

HTML应该使用有意义的组织结构，而不是通过样式来实现。

使用

元素代表文本，而不是用来布局。

避免使用
来换行，使用块级元素和CSS来代替。

避免使用水平分隔线

。使用CSS的border样式来控制。

不要使用不必要的DIV。W3C对DIV的定义是排序的是最后一个元素。

要了解哪些元素是块级元素，避免在DIV中放置不必要的块级元素。将一个list放到div中是没有必要的。

不要使用table来布局。

Flex box是被广泛推荐的，能用就用吧。

使用CSS的padding和margin，理解盒子模型。

CSS

这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。

避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。

避免ID出现重复。

如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：

XML/HTML Code复制内容到剪贴板

<ul>  
  <li class="ingredient">Basil</li>  
  <li class="ingredient">Pine nuts</li>  
  <li class="ingredient">Garlic</li>  
</ul>

<ul class="ingredients">  
  <li>Basil</li>  
  <li>Pine nuts</li>  
  <li>Garlic</li>  
</ul>

可访问性

使用语义元素

提供向后兼容性

在链接上添加title属性，应避免与link同样的内容出现在文本中

将t添加到输入元素中ype和placeholder属性。以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫