Page Contents
HTML5 Now is not SGMLa subset of the increase was mainly about the image, location, storage, multi-tasking and other features
Painting canvas for media playback videoand audioelements of local offline storage localStoragefor long term storage of data, the browser is closed after data is not lost sessionStoragedata is automatically deleted when the browser is closed meaning of better content elements of language, such as article, footer, header, nav, section form controls, calendar, date, time, email, url, search new technologies webworker, websocket,Geolocation
Elements:
Pure performance basefontelements: big, center, font, s, strike, tt, , u produce a negative impact on the availability of frameelements: frameset, ,noframes
Support for HTML5new tags:
IE8/IE7/IE6 supports document.createElementtags generated by methods. This feature can be used to make these browsers support HTML5 new tags. After the browser supports new tags, you also need to add the default style of the tags.
Of course, you can also directly use mature frameworks, such as html5 shim
< ! - [ if lt IE 9 ] > < script > src="http://html5shim.googlecode.com/svn/trunk/html5.js" < / script > < ! [ endif ] - >
What are the html5 new features
HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5.
- New Semantic Elements − These are like <header>, <footer>, and <section>.
- Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag.
- Persistent Local Storage − To achieve without resorting to third-party plugins.
- WebSocket − A next-generation bidirectional communication technology for web applications.
- Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
- Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.
- Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.
- Geolocation − Now visitors can choose to share their physical location with your web application.
- Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
- Drag and drop − Drag and drop the items from one location to another location on the same webpage.
Which SEOs should the front-end pay attention to?
- Reasonable
title
, ,description
:keywords
Search right in front of the three-by-weight decreases,title
the value of the focus to emphasize the important keywords appear no more than 2 times, and the former rely on different pagestitle
to be different;description
the high-level summary page content, length Appropriate, do not pile up keywords too much, different pagesdescription
are different; justkeywords
list important keywords - Semantic
HTML
code, in line with W3C specifications: Semantic code makes it easy for search engines to understand web pages - Important content
HTML
code is placed first: the search engine crawlingHTML
order is from top to bottom, and some search engines have restrictions on the crawl length to ensure that important content will be crawled - Do not use
js
output for important content : crawlers will not execute js to obtain content - Use less
iframe
: search engines will not crawliframe
the content - Non-decorative pictures must be added
alt
- Improve website speed: website speed is an important indicator of search engine ranking
Steps to enter the URL from the browser address bar to the displayed page
Brief answer
- According browser requests
URL
to theDNS
DNS to find realIP
, initiates a request to a server; - The server returns the data after the background processing is completed, and the browser receives the file (
HTML、JS、CSS
, image, etc.); - The browser parses the loaded resources (HTML, JS, CSS, etc.), and establishes the corresponding internal data structure (such as HTML DOM);
- Load the parsed resource file, render the page, and finish.
Detailed answer
- Received from the browser
url
to start the network request thread (this part can expand the mechanism of the browser and the relationship between the process and the thread) - Start the network thread to issue a complete
HTTP
request (this part involves dns query,TCP/IP
request, five-layer Internet protocol stack, etc.) - From the server receiving the request to the corresponding background receiving the request (this part may involve load balancing, security interception and internal processing in the background, etc.)
- The
HTTP
interaction between the background and the foreground (this part includes knowledge of theHTTP
header, response code, message structure,cookie
etc., which can improve thecookie
optimization of static resources , as well as encoding and decoding, such asgzip
compression, etc.) - Carry out a separate cache problem,
HTTP
a cache (Cache This section includes http headerETag
,catch-control
etc.) - Browser receives the
HTTP
resolution process (after parsing a packethtml
– lexical analysis and then parsed intodom
a tree, parsingcss
generationcss
, combined intorender
the tree, and thenlayout、painting
rendering the synthesized composite layer,GPU
process drawing, outside the chain of resources,loaded
andDOM Content Loaded
the like) CSS
Visual format model (elements rendering rules, such as including blocks, control boxes,,BFC
andIFC
other concepts)JS
Engine analysis process (JS
interpretation phase, preprocessing phase, execution phase to generate execution contextVO
, scope chain, recycling mechanism, etc.)- Other (different knowledge modules can be expanded, such as,
we
b,hybrid
mode and much more)
How to optimize website performance
content
aspect ReduceHTTP requests
: merge files,CSS sprites
sprites,inline Image
reduceDNS
queries:DNS
cache, distribute resources to the appropriate number of hostnames, reduce theDOM
number of elementsCookie
aspectReducecookie
sizeServer
aspect UseCDN
configurationETag
to useGzip Compression
compression on components- aspect Optimize the picture: According to the actual color needs to select the color depth, compress the optimization
css
wizard, do notHTML
stretch the picture in the middle css
aspect Put the style sheet at the top of the page Do not useCSS
expressions Use or<link>
not@import
js
aspect The bottom of the script into the pagejavascript
andcss
the introduction of pressurized from the outsidejavascript
and thecss
script removes unwanted reduceDOM
access
Semantic understanding
- Simply put: do the right thing with the right label!
HTML
Semantic is to structure the content of the page to facilitate the analysis of browsers and search engines;- It
CSS
is also displayed in a document format without a style and is easy to read. - Search engine crawlers rely on tags to determine the context and the weight of each keyword, which is beneficial
SEO
. - Make it easier for people who read the source code to divide the website into blocks, which is convenient for reading, maintaining and understanding
Please describe the difference between cookies, sessionStorage and localStorage?
cookie
It is the data (usually encrypted) stored on the user’s local terminal (Client Side) by the website in order to identify the usercookie
The data is always carried in the same http request (even if it is not needed), that is, it will be passed back and forth between the browser and the serversessionStorage
AndlocalStorage
will not automatically send the data to the server, only save it locally- Storage size:
cookie
The data size cannot exceed 4ksessionStorage
andlocalStorage
although there is also a storage size limit, the ratio iscookie
much larger and can reach 5M or more - Duration:
localStorage
To store persistent data, the browser is closed after data is not lost unless the initiative to remove datasessionStorage
data is automatically deleted after the window closes the current browsercookie
settingscookie
remain in effect until the expiration time, or even if the browser window is closed
Restrictions on page access cookies
cookie (data stored on the user’s local terminal)
Cookies refer to data stored on the user’s local terminal by certain websites in order to identify the user’s identity and perform session tracking. Cookies are almost everywhere in the network system. When we browse the websites we have visited before, the webpage may appear: Hello XXX.
1. Cross-domain issues:
cookie
Allow web developers to keep their users’ login status. However, problems can arise when your site has more than one domain name. According to the cookie
specification, one cookie
can only be used for one domain name and cannot be sent to other domain names. Therefore , if one is set for a domain name in the browser cookie
, this cookie
will be invalid for other domain names.
solve:
- Reverse proxy through nginx
- jsonp request
2. HTTP only is set:
If the HttpOnly
attribute is set in the cookie, the cookie
information will not be read through the program (JS script, Applet, etc.) , which can effectively prevent XSS
attacks.
The role and drawbacks of cookies
The role of cookies
- The user data can be saved on the client, which plays a simple role in caching and user identification.
- Save the user’s login status, and the user logs in. After successfully logging in, the server generates a specific cookie and returns it to the client. Next time the client visits any page under the domain name, it sends the cookie information to the server . Determine whether the user is logged in.
- Record user behavior.
cookie drawbacks
- To increase traffic consumption, you need to bring cookie information with each request.
- For security risks, cookies are transmitted in clear text. If the cookie is intercepted by someone, that person can get all the session information.
- Limits on the number and length of cookies. Each domain can only have 20 cookies at most, and each cookie cannot exceed 4KB in length, otherwise it will be truncated
What is the difference between xhtml and html?
- Functional differenceMainly XHTML is compatible with major browsers, mobile phones and PDAs, and the browser can also compile web pages quickly and correctly
- Differences in writing habitsXHTML elements must be properly nested, closed, case sensitive, and the document must have a root element
What are the disadvantages of iframe?
- iframe will block the main page
Onload
event - The retrieval program of the search engine cannot interpret this page, which is not conducive to
SEO
–iframe
sharing the connection pool with the main page, and the browser has restrictions on the connection of the same domain, so it will affect the parallel loading of the page iframe
These two disadvantages need to be considered before use . If you need to use itiframe
, it is best tojavascript
dynamically addsrc
attribute values to the iframe , which can bypass the above two problems
What does the webpage verification code do and what security issues are it to solve?
- A public fully automatic program that distinguishes whether the user is a computer or a human. Can prevent malicious password cracking, ticket swiping, and forum irrigation
- Effectively prevent hackers from continuously attempting to log in to a specific registered user using specific programs to brute force
What is the difference between title and h1, b and strong, i and em?
title
The attribute has no clear meaning and only means that it is a title,H1
which means a title with a clear level, which also has a great influence on the crawling of page information;strong
Key content is marked with the tone strengthen meaning when read using a reading device network,<strong>
it will be re-read, and<B>
is showing emphasize content.i
The content is displayed in italics,em
indicating emphasized text;