Community
Learn
Tools Library
AI Tools
Leisure
search
English
Table of Contents
The following principles need to be followed during the design and development process:
The relationship between HTML, CSS and JavaScript
The document structure can also be optimized, as follows:
Pesto
Format consistency makes HTML code easy to read, understand, optimize, and debug.
语义标记 
Name: 
Copy after login


换种写法会更好：
Copy after login


   1:  
Copy after login
   2:    Name:
Copy after login
   3:  
Copy after login


 
Copy after login

布局" >,

…)表示标题，
    或
      实现列表

    1. 注意使用

      标签之前应添加

      标签；

    2. 选择合适的HTML5语义元素如

      ，
      ,

    3. 使用

      描述Body 文本，HTML5 语义元素可以形成内容，反之不成立。

    4. 使用和标签替代和标签。

    5. 使用

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

例如：

Name: 
Copy after login


换种写法会更好：
Copy after login


   1:  
Copy after login
   2:    Name:
Copy after login
   3:  
Copy after login


 
Copy after login

布局

CSS
Home Web Front-end HTML Tutorial HTML optimization tips you should know

HTML optimization tips you should know

高洛峰
高洛峰
Mar 12, 2017 pm 05:18 PM
html

How to improve the performance of Web pages, many developers start from many aspects, such as JavaScript, image optimization, server configuration, file compression or adjusting CSS.

It is clear that HTML has reached a bottleneck, even though it is an essential core language for developing Web interfaces. The load of HTML pages is also getting heavier and heavier. Most pages require an average of 40K of space. For example, some large websites contain thousands of HTML elements, and the page size will be larger.

How to effectively reduce the complexity of HTML code and the number of page elements. This article mainly solves this problem. It introduces how to write concise and clear HTML code from many aspects, which can make the page load faster. , and can run well on a variety of devices.

The following principles need to be followed during the design and development process:

  • Structural separation: Use HTML to add structure, not style content;

  • Keep it tidy: Add code validation tools to your workflow; use tools or style wizards to maintain code structure and format

  • Learn a new language: Get element structure and semantic markup.

  • Ensure accessibility: Use ARIA attributes and Fallback attributes, etc.

  • Test: Make the website run well on multiple devices and can be used emulators and performance tools.

HTML optimization tips you should know

The relationship between HTML, CSS and JavaScript

HTML is a markup language used to adjust the structure and content of the page. HTML cannot be used to modify style content, nor can you enter text content in the header tag, making the code lengthy and complex. Instead, it is more appropriate to use CSS to modify layout elements and appearance. HTML ElementThe default appearance is defined by the browser's default style sheet. For example, in Chrome, the h1 tag element will be rendered into a 32px Times bold font.

Three general design rules:

  1. Use HTML to construct the page structure, CSS to modify the page presentation, and JavaScript to implement the page function. CSS ZenGarden demonstrates behavioral separation very well.

  2. If it can be achieved with CSS or JavaScript, use less HTML code.

  3. Store CSS and JavaScript files separately from HTML. This can aid caching and debugging.

The document structure can also be optimized, as follows:

  • Use HTML5 document type , the following is an empty file: 

<!DOCTYPE html>
<html>

<head>
 <title>Recipes: pesto</title>
</head>

<body>

  <h1 id="Pesto">Pesto</h1>

  <p>Pesto is good!</p>

</body>
</html>
Copy after login


  • Reference the CSS file at the beginning of the document, as follows ：

<head>
  <title>My pesto recipe</title>

  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">

</head>
Copy after login


Using these two methods, the browser will prepare the CSS information before parsing the HTML code. This helps improve page loading performance.

Enter JavaScript code before the closing tag of the body at the bottom of the page. This will help improve the page loading speed, because the browser will load the page before parsing the JavaScript code. Using JavaScript will have a positive impact on page elements. . 

<body>

  ...

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

</body>
Copy after login


Using Defer and async attributes, script elements with async attributes are not guaranteed to be executed in order.

Handlers can be added in JavaScript code. Never add it to HTML inline code. For example, the following code can easily lead to errors and is difficult to maintain:

index.html:

<head>
  
  ...

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

</head>

<body onload="init()">

  ...

  <button onclick="handleFoo()">Foo</button>

  ...

</body>
Copy after login

The following way of writing is better:

index.html:


##

<head>

  ...

</head>

<body>

  ...

  <button id="foo">Foo</button>

  ...

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

</body>
Copy after login

js/local.js: 


init();
var fooButton =
    document.querySelector(&#39;#foo&#39;);
fooButton.onclick = handleFoo();
Copy after login


Verification

One way to optimize a web page is that the browser can handle illegal HTML code . Legal HTML code is easy to debug, takes up less memory, consumes less resources, is easy to parse, renders and runs faster. Illegal HTML code makes it extremely difficult to implement responsive design.

When using templates, legal HTML code is extremely important. It often happens that templates run well alone but report various errors when integrated with other modules. Therefore, the quality of HTML code must be ensured. , you can take the following measures:

  • Add validation functionality to your workflow: Use validation plug-ins such as HTMLHint or SublineLinter to help you detect code errors.

  • Use HTML5 document type

  • Ensure that the hierarchical structure of HTML is easy to maintain and avoid nesting elements in the left-open state

    .

    • Make sure to add the closing tag of each element.

    • Remove unnecessary code; there is no need to add closing tags for self-closing elements; Boolean attributes do not need to be assigned a value, if they exist, they are True;

  • <video src="foo.webm" autoplay controls>
    Copy after login
    • Code format

Format consistency makes HTML code easy to read, understand, optimize, and debug.

语义标记

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

，
及
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution
3 weeks ago By DDD
What's New in Windows 11 KB5054979 & How to Fix Update Issues
2 weeks ago By DDD
Where to find the Crane Control Keycard in Atomfall
3 weeks ago By DDD
Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation
1 months ago By DDD
Roblox: Dead Rails - How To Complete Every Challenge
3 weeks ago By DDD
Show More

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?
7615
15
CakePHP Tutorial
1387
52
What is the format of the account name of steam
88
11
win11 activation key permanent
68
19
nyt connections hints and answers
29
136
Show More
Related knowledge
Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved