Some Suggestions for Writing High Performance HTML Applications

Time:2019-10-7

How can you improve web performance?

Most developers optimize through JavaScript and images, compress files and merge files through server configuration – and even adjust CSS (merge small pictures).

Poor HTML is always ignored, although it has always been the core language of the network.

HTML is getting bigger and bigger. The top 100 websites are mostly around 40K per HTML page. Amazon and China use thousands of HTML pages. On the YouTube.com home page, there are 3500 HTML elements.

Reduced HTML complexity and the number of elements in a page do not significantly increase parsing time – but HTML is a key factor in building extremely fast pages, adapting to different devices and influencing success.
In this article, you will learn how to write concise and clean HTML so that you can create websites that load quickly and support multiple devices, which will be easy to debug and maintain.

There’s not only one way to write code — especially HTML. It’s just about general experience, but it’s not the only right choice.
HTML, CSS and JavaScript

HTML is a markup language used to represent structure and content.

HTML should not be used to display styles and styles. Don’t write text in header tags (h1-h6) to appear “bigger”, or just use blockquotes elements to shrink. Instead, use CSS to change the appearance and layout of elements.

The default appearance of HTML elements is achieved through the default style of browsers: Firefox, Internet Explorer and Opera are different. For example, the default H1 element in Chrome is 32 PX in size.

 Three basic principles:

Using HTML to represent structure, CSS is used to represent different styles and themes. JavaScript responds to user behavior.

Use HTML, use CSS when necessary, and add JavaScript when you have to. For example: In many cases, you may use HTML forms for validation and CSS or SVG for animation.

Separate CSS and JavaScript from your HTML code. Let them cache, which makes the code easier to debug. In production, CSS and JavaScript can be compressed and merged as part of your Build system. Note * See JavaScript Construction (Deduction) System Competition
Document document structure

Use HTML5 document type:

XML/HTML CodeCopy content to clipboard
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.  <title>Recipes: pesto</title>  
  5. </head>  
  6. <body>  
  7.   
  8.   <h1>Pesto</h1>  
  9.   <p>Pesto is good!</p>  
  10.   
  11. </body>  
  12. </html>  

Refer to a CSS file at the top of the page, such as in the head element:

CSS CodeCopy content to clipboard
  1. <head>   
  2.   <title>My pesto recipe</title>   
  3.   <link rel=“/css/global.css”>   
  4.   <link rel=“css/local.css”>   
  5. </head>  

In this way, browsers can pre-load styles before parsing HTML without presenting a messy page layout.

Put JavaScript at the bottom of the page, before the body closes. This will increase page rendering time because browsers can render pages before JavaScript is loaded:

JavaScript CodeCopy content to clipboard
  1. <body>   
  2.   …   
  3.   <script src=“/js/global.js”>   
  4.   <script src=“js/local.js”>   
  5.   
  6. </body>  

Add event handling in JavaScript. Don’t add it to HTML. This is very difficult to maintain, for example:

XML/HTML CodeCopy content to clipboard
  1. index.html:   
  2.   
  3. <head>  
  4.   …   
  5.   <script src=“js/local.js”>  
  6.   
  7. </head>  
  8.   
  9. <body onload=“init()”>  
  10.   …   
  11.   <button onclick=“handleFoo()”>Foo</button>  
  12.   …   
  13. </body>  

That’s much better:

JavaScript CodeCopy content to clipboard
  1. <head>   
  2.   …   
  3. </head>   
  4.   
  5. <body>   
  6.   …   
  7.   <button id=“foo”>Foo</button>   
  8.   …   
  9.   <script src=“js/local.js”>   
  10. </body>   
  11.   
  12.   js/local.js:   
  13.   
  14. init();   
  15. var fooButton =   
  16.     document.querySelector(‘#foo’);   
  17. fooButton.onclick = handleFoo();  

Legal HTML

A major factor in the success of Web pages is that browsers can handle invalid HTML. Browsers also have standardized rules on how to render invalid code.

But that’s not your reason for indulgence. Effective HTML is easier to debug, often with smaller files, faster speed, and less resources because they render faster. Invalid HTML makes responsive design difficult to implement.

It is particularly important to write valid HTML when using templates.

Verify HTML in your BUILD system: Use validation plug-ins, such as HTMLHint and SublimeLinter, to check your HTML syntax.

Use HTML5 document type.

Make sure you keep the HTML hierarchy: nest elements correctly and make sure there are no unclosed elements. It can help debuggers add comments.

XML/HTML CodeCopy content to clipboard
  1. <div id=“foobar”>  
  2. …   
  3. </div> <!– foobar ends –>  

Be sure to add the end tag after the non-self-enclosed element. For example, the following can also work:

XML/HTML CodeCopy content to clipboard
  1. <p>Pesto is good to eat…   
  2. <p>…and pesto is easy to make.  

But the following wording can avoid mistakes, and the level of paragraph is more obvious.

<p>Pesto is good to eat…</p>
<p>…and pesto is easy to make.</p>

Items elements (LI) are not necessarily closed. Some very clever programmers will write this way. In any case, the list element (UL) must be closed.

XML/HTML CodeCopy content to clipboard
  1. <ul>  
  2.   <li>Basil   
  3.   <li>Pine nuts   
  4.   <li>Garlic   
  5. </ul>  

One thing you have to pay attention to is the video and audio elements. They are not self-enclosed:

XML/HTML CodeCopy content to clipboard
  1. <! – Error: liable to cause layout grief – >  
  2. <video src=“foo.webm” />  
  3.   
  4. <! – Correct – >  
  5. <video src=“foo.webm”>  
  6.   <p>Video element not supported.</p>  
  7. </video>  

Instead, HTML pages become cleaner by removing unnecessary code

There is no need to add “/” for self-enclosed elements, such as img, etc.

Setting attributes has no value, if no attributes are added (in this case, it will not play automatically, there is no control).

Video, it has no properties

XML/HTML CodeCopy content to clipboard
  1. <video src=“foo.webm”>  

The following two are better

XML/HTML CodeCopy content to clipboard
  1. <video src=“foo.webm” autoplay=“false” controls=“false”>  
  2. <video src=“foo.webm” autoplay=“true” controls=“true”>  

This is more readable

XML/HTML CodeCopy content to clipboard
  1. <video src=“foo.webm” autoplay controls>  

Style and script tags do not require type attributes; by default, CSS and JavaScript

Optimizing protocol addresses is better (removing the placement of HTTP or https, which will be automatically allocated according to the current protocol)

XML/HTML CodeCopy content to clipboard
  1. <a href=“//en.wikipedia.org/wiki/Tag_soup”>Tag soup</a>  

Enhance readability. For example, at first glance it looks like a headline

XML/HTML CodeCopy content to clipboard
  1. <h2><a href=“/contact”>Contact</a><h2>  

And this is like a link.

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

Should use lowercase

XML/HTML CodeCopy content to clipboard
  1. <A HREF=“/”>Home</A>  

A combination of case and case looks more disgusting

XML/HTML CodeCopy content to clipboard
  1. <H2>Pesto</h2>  

semantic marker

The meaning of “semantics” is related to meaning.

HTML should mark meaningful content: elements match what is described.

HTML5 introduces some new’semantic elements’such as <header>, <footer> and <nav>.

Using the right elements to express the right content is helpful for accessibility.

Use < H1 > < H2 >, < H3 > to represent the title, < UL > or < ol > to represent lists

Note that the title of <article> should start with <h1>.

Use <header>, <footer>, <nav> and <aside>.

Use < p > to write the text

Use < EM > and < strong > instead of < I > and < b > to emphasize

Forms use < label > elements, input type

Mixed text and elements lead to layout issues

XML/HTML CodeCopy content to clipboard
  1. <div>Name: <input type=“text”></div>  

It’s better to use the following expression

XML/HTML CodeCopy content to clipboard
  1. <div><label>Name:</label><input type=“text”></div>  

layout

HTML should be implemented using meaningful organizational structures rather than styles.

Use < p > elements to represent text rather than layout.

Avoid using < br > to wrap lines and use block-level elements and CSS instead.

Avoid using horizontal divider < HR >. Use CSS border style to control.

Do not use unnecessary DIV. W3C defines DIV as the last element sorted.

To understand which elements are block-level elements, avoid placing unnecessary block-level elements in DIV. It is not necessary to put a list in a Div.

Don’t use tables for layout.

Flex box is widely recommended. Use it if you can.

Use padding and margin of CSS to understand the box model.
 CSS

This article is about HTML, but here are some basic CSS tips.

Avoid embedded CSS. For performance reasons, CSS can be embedded in your web page at BUILD time.

Avoid ID duplication.

If you want to apply a style to multiple elements, use class, which is better for parent than for child.

XML/HTML CodeCopy content to clipboard
  1. <! – A little dumb: (–> ____________)  
  2. <ul>  
  3.   <li class=“ingredient”>Basil</li>  
  4.   <li class=“ingredient”>Pine nuts</li>  
  5.   <li class=“ingredient”>Garlic</li>  
  6. </ul>  
  7.   
  8. <! – Better:) –>  
  9. <ul class=“ingredients”>  
  10.   <li>Basil</li>  
  11.   <li>Pine nuts</li>  
  12.   <li>Garlic</li>  
  13. </ul>  

Accessibility

Using Semantic Elements

Provide backward compatibility

Add Title attributes to links and avoid the same content as link text

Add type and placeholder attributes to input elements

Recommended Today

Front-end core tools: yarn, NPM, and CNPM how can they be used together elegantly?

A front end that doesn’t work well with package managers is an entry-level front end that doesn’t work wellwebpackThe front end is a primary front end Three package managers can be used together, as long as you are bold enough, no problem! Recommend two articles Handwritten React scaffolding Handwritten Vue scaffolding Front-end performance optimization incomplete […]