Home >Web Front-end >HTML Tutorial >Some suggestions for writing high-performance HTML applications_HTML/Xhtml_Web page production
Some suggestions for writing high-performance HTML applications_HTML/Xhtml_Web page production
- WBOYOriginal
- 2016-05-16 16:36:281105browse
How can you improve web page performance?
Most developers will optimize through JavaScript and images, through server configuration, compressing files and merging files - even adjusting CSS (merging small images).
Poor HTML is always ignored, even though it has always been the core language of the Internet.
HTML is getting bigger and bigger. Each HTML page of the top 100 websites is mostly around 40K. Amazon and Yahoo use thousands of HTML pages. On the main page of youtube.com, there are as many as 3,500 HTML elements.
Reducing the complexity of HTML and the number of elements on a page does not significantly improve parsing time - but HTML is a critical factor in building extremely fast web pages, adapting to different devices and affecting success.
In this article, you will learn how to write concise and clean HTML, allowing you to create a website that loads quickly and supports multiple devices, and will be easy to debug and maintain.
There is no one way to write code - especially HTML. This is just a general experience, but it is not the only right choice.
HTML, CSS and JavaScript
HTML is a markup language used to express structure and content.
HTML should not be used to display styles and styles. Don’t put text in title tags (h1~h6) to appear “bigger” or use blockquotes elements just for indentation. Instead, use CSS to change the appearance and layout of elements.
The default appearance of HTML elements is achieved through the browser's default styles: Firefox, Internet Explorer and Opera are all different. For example, in Chrome the h1 element is rendered to a size of 32px by default.
Three basic principles:
Use HTML to express the structure, and CSS to express different styles and themes. JavaScript to respond to user actions.
Use HTML, CSS when necessary, and JavaScript when necessary. For example: In many cases, you might use HTML forms for validation and CSS or SVG for animations.
Separate CSS and JavaScript from your HTML code. Making them cacheable makes the code easier to debug. In production, CSS and JavaScript can be minified and merged and should be included as part of your Build system. Note* See JavaScript Construction (Compilation) System Competition
Document Document Structure
Use HTML5 document type:
- >
- <html>
- <head>
- <title>Recipes: pesto title>
- head>
- <body>
- <h1>Pestoh1>
- <p>Pesto is good!p>
- body>
- html>
Quote the CSS file at the top of the page, such as in the head element:
-
My pesto recipe - "/css/global.css">
- "css/local.css">
In this way, the browser can preload the styles before parsing the HTML without rendering a confusing page layout.
Place JavaScript at the very bottom of the page, before the body is closed. This will improve page rendering time because the browser can render the page before the JavaScript is loaded: