Home > Developer > Web Develop
How to improve Web page performance, many web front-end developers from a number of aspects such as JavaScript, image optimization, server configuration, file compression or adjustment CSS.
it's obvious . HTML has reached a bottleneck, although it is The core language required to develop WEB interfaces. the load on the HTML page is also getting heavier. Most pages require 40K of space on average , like some large web sites that contain thousands of HTML elements, pages 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, from several aspects of how to write concise, clear HTML Code, can make the page load more quickly, and can run well in a variety of devices.
The following principles need to be followed in the design and development process:
structural separation: using HTML adds structure, not style content;
Keep it neat: Add code validation tools to your workflow; Maintain code structure and formatting with tools or style wizards
Learn a new language: Get the element structure and semantic markup.
Make sure you have access to: Use ARIA Properties and Fallback properties, etc.
Test: enables the site to function well across multiple devices, using emulators and performance tools.
the relationship between html,css and JavaScript
HTML is the markup language used to adjust the structure and content of the page. HTML cannot be used to decorate style content, or to enter text content in header tags, making the code verbose and complex, rather than using CSS to decorate layout elements and look more appropriately. The default appearance of HTML elements is defined by the browser's default style sheet, such as the H1 tag element in Chrome that renders 32px of the Times Bold.
Three general design rules:
Use HTML to construct the page structure,CSS decorated page rendering,JavaScript Implementation page function. CSS Zengarden is a good way to show the separation of behaviors.
If you can use CSS or JavaScript implementations use less HTML code.
will be CSS and JavaScript files are stored separately from HTML . This can be useful for caching and debugging.
The document structure can also be optimized as follows:
Use HTML5 Document Type, the following is an empty file:
<! DOCTYPE html>
<title>Recipes:pesto</title>
<body>
<p>pesto is good!</p>
</body>
Reference at document start location CSS file, as follows:
<title>my Pesto recipe</title>
<link rel= "stylesheet" href= "/css/global.css" >
<link rel= "stylesheet" href= "Css/local.css" >
using both of these methods, the browser will parse the HTML Code before you get the CSS information ready. Therefore, it helps to improve page load performance.
Enter the javascript code before the body ends the tag at the bottom of the page , which helps to increase the speed of page loading because the browser is parsing JavaScript the page is loaded before the code is completed, using the JavaScript can have a positive impact on page elements.
<body>
...
<script src= "/js/global.js" >
<script src= "Js/local.js" >
</body>
Use Defer and async Properties, script elements with async properties cannot be guaranteed to be executed sequentially.
can be in add handlersto the JavaScript code. Do not add to HTML Inline code, such as the following code, which is prone to errors and is not easy to maintain:
Index.html:
...
<script src= "Js/local.js" >
<body>
...
<button>Foo</button>
...
</body>
The following wording is better:
Index.html:
...
<body>
...
<button id= "foo" >Foo</button>
...
<script src= "Js/local.js" >
</body>
Js/local.js:
Init ();
var Foobutton =
Document.queryselector (' #foo ');
Foobutton.onclick = Handlefoo ();
Verify
one way to optimize Web pages is for browsers to handle illegal HTML Code. Legitimate HTML code is easy to debug and takes up less memory, consumes less resources, and is easy to parse and render to run faster. Illegal HTML Code makes it extremely difficult to implement a responsive design.
when a template is used, the legal HTML code is very important, often happens that the template runs well, when integrated with other modules to report a variety of errors, so be sure to ensure The quality of HTML code, you can take the following measures:
Add validation functionality to your workflow: using a validation plug-in such as Htmlhint or sublinelinter help you detect code errors.
Use HTML5 Document Type
ensure that the HTML hierarchy is easy to maintain, to avoid the nesting of elements in the left-open state.
Ensure that the end tag of each element is added.
Remove unnecessary code ; There is no need to add an end tag for self-closing elements; The Boolean property does not need to be assigned, or True if it exists ;
Code format
format Consistency makes HTML code is easy to read, understand, optimize, Debug.
Semantic markup
semantics refers to things that are related to meaning, HTML can see semantics from page content: The naming of elements and attributes partly expresses the role and functionality of the content. HTML5 introduces new semantic elements, such as , <footer> and <nav> .
Choosing the right element to write code can guarantee the readability of the code:
use ... ) represents the title, <ul> or <ol> Implementation list
Note The tag should be added before using the <article> tag;
Choose the right HTML5 semantic elements such as , <footer>, <nav>, <aside>;
using <p> to describe Body text,HTML5 semantic elements can form content, and vice versa.
Replace <i> and <b> with <em> and <strong> tags tags.
use the <label> element, input type, placeholder, and other attributes to force validation.
Mixing text and elements, and as child elements of another element, can cause layout errors,
For example:
<div>name: <input type= "text" id= "Name" ></div>
It's better to do it in another way:
1: <div>
2: <label for= "name" >name:</label><input type= "text" id= "name" >
3: </div>
Layout
to improve the performance of HTML code to follow the HTML code to achieve functionality and as a goal, rather than a style.
use the <p> element to decorate the text instead of the layout; default <p> provides edges automatically, and other styles are provided by the browser by default.
Avoid using <br> branches, instead using block elements or CSS Display properties.
Avoid using to add horizontal lines, instead of using CSS border-bottom .
Do not use div tags at critical times .
use as little as possible Tables to layout.
can use more Flex Box
Use CSS to adjust margins, and so on.
Css
Although this article explains how to optimize HTML, here are some basic techniques for using CSS:
Avoid inline CSS
use up to ID class One time
When multiple elements are involved, you can use the Class to implement.
the above is the optimization described in this article the skill of HTML code, a high-quality high-performance website, often depends on the processing of details, so we in the daily development, can take into account the user experience, post-maintenance and other aspects, will lead to more efficient development.
Source: Grape City Control technical team
Essential HTML optimization Tips for front-end development
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
