1), h label use:
Note that, regardless of any page, h1 tags can appear only once, which is the main title of the current page, right up to heavy, so be careful. In general, if there is, then the best keyword appears in h1 inside.
h2 is a paragraph headings or subheadings like, if connected to h2 seo aspect, it may be arranged inside the tail keywords. H3 lower level, or other passages may be arranged lower.
h1 tags do not appear after the h2-h6, h tags are in accordance with the level of importance and to divide, from No. ~ h6, it is necessary to write to the top h1 tag
H label on visual performance are often bold, but its grammatical meaning black body is completely different, do not abuse on the page.
2) select the appropriate label:
a, multi-H5 semantic labels
b, p is the word to use tags, titles ~ h6 with h1, do not have a div
c, acquiring form elements, multi-use form instead of div:
Such as the use div:
<div>
<input id="user-name">
<input id="password">
</div>
// 获取时
<script>
let userName = $('#user-nam').val();
let password = $('#password').val();
</script>
In order to obtain two forms of data checked twice the DOM., If there are 10, 10 is necessary to check, if it is 20, 30 ...... on the performance impact, especially in the mobile terminal.
If the div into form:
<form id="register">
<input name="user-name">
<input name="password">
</form>
// 获取时:
<script>
let form = document.getElementById('register'),
userName = form['user-name'].value,
password = form.password.value;
</script>
d, other small details:
With bold text: b / strong (have emphasized the role), without having to manually set the font-weight, the benefits are: change the font after only need to set b / strong of font-family.
3) reduce the number of iframe
Use iframe to pay attention to understand the advantages and disadvantages of the iframe
advantage
-
Content can be used to load slower, such as advertising.
-
Security sandbox protection . The browser will be the contents of the iframe security control.
-
Scripts can be downloaded in parallel
Shortcoming
-
Even if the content is empty iframe load time is consumed
-
It will prevent the page loads
-
No semantic
4), to avoid empty pictures and iFrame and other Src, Src empty reloads the current page, affect the speed and efficiency.
5), try to avoid Reset image size.
Reset image size is in html, CSS, JavaScript, etc. several times to reset the image size, repeatedly reset the image size will lead to redraw the picture many times, affect performance.
6), reduce the node Dom Dom node page rendering much of an impact should be minimized Dom node
7), reduce congestion
Written in HTML head Js, and written in HTML tag Style block the page rendering, so the CSS on the head of the page and use the Link mode is introduced, to avoid writing Style in the HTML tags, Js on the end of the page or use loaded asynchronously
8), html tag nested layers do not affect the page loads
9), the condition annotation method
Note IE conditions (Conditional comments) browser is IE proprietary code are treated as comments in other browsers.
<-! [if IE]> for IEs <[endif] -!>
<-! [IF IEs. 6]> for IE6 <[endif] -!>
<-! [IF IEs. 7] > for IE7 <[endif] -!>
<-! [IF IEs. 8]> for IE8 <[endif] -!>
<-! [IF IEs. 9]> for IE9 <[endif! ] ->
<-! [IF gt IEs. 6]> above for IE6 <[endif] -!>
<-! [IF LTE IEs. 7]> for IE7 or earlier <[endif! ] ->
<-! [IF GTE IEs. 8]> IE8 or later versions for <[endif] -!>
<-! [IF lt IEs. 9]> or lower for IE9 <[endif! ] ->
<-! [IF IEs. 8]> -!> for non-IE <-!! <[endif ] ->
gt: greater than, the selection criteria or later versions, does not include conditional versions> lt: less Within last, the selection condition version or lower, does not include conditional Version < GTE: Greater Within last or equal, the selection criteria or later versions, the conditions version contains> = lte: less than or equal, the following selection criteria version version version contains conditions <= :! select all versions except the condition version, regardless of the level of
* Only IE conditional comments recognize that other browsers will skip
Such as:
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset = "UTF-. 8">
<title> </ title>
<-! [IF gt IEs. 6]>
<style>
body {
background: LightBlue;
}
< / style>
! <[endif] -> ! <- [IF lt IE 8]> <Script of the type = "text / JavaScript"> Alert ( "Out of your browser, please download the update."); < / Script> ! <[endif] -> </ head> <body> <-! [IF gt IEs. 6]> <H2> greater than IE6 browsers </ H2 <![endif]--> </body></html>