Cookie
Drawbacks:
Cookie number and length are limited , each domain name can have up to 20 Tiao cookie , each cookie can not exceed 4KB , whether the person will be intercepted.
Cookie will be blocked, and then obtain session information.
Local browser cache
Web stroge and cookie, cookie actually do and server interaction, primarily for server use, Web strong is as a local store.
Web strong mainly two: localstroge and sessionstroge.
Localstroge : long-term presence, sharing the same domain name.
Sessionstroge : only session exists, then there is no window is closed, can not be shared between windows.
Display: none and visibility : hidden differences
Run the display : none : do not take up space.
Visibility : hidden : occupy the space, just to see.
@import and link
Link belongs html tag, @import belonging css provided;
Link while loading the page loads, @import page finished loading before loading;
@import in IE5 was only identified above, Link no compatibility;
Link weights higher than @import .
position of absolute and fixed
Common:
From the standard flow, does not occupy space
difference:
Absolute is set according to the setting of the above parent element relative positioning, Fixed is set according to the window awakened.
Css box model
There are two, IEs box model (IE8 hereinafter ) , W3C box model
IE box model: border padding + + Content
w3c box model: Content
Box-sizing: border-box; ie box model
Box-sizing: content-box; w3c box model
css selector
Selector:
ID selector
Class selector
Tag selector
Adjacent selector
Child selectors
Descendant selectors
Wildcard selector
Attribute selectors
Pseudo class selector
Can inherit the style:
Font-size,font-famaily,color,text-indent
@important> id selector > class selector > tag selector > Wild selector
Css new selector
:nth-child(n)
:disabled
:checked
Css3 new property
Rounded corners, gradients, rotation, shadow, transition, media queries, multi-column layout.
Semantic
Conducive to SEO , helps reptiles crawl information;
Conducive to team development, increase readability.
Doctype role ? How to distinguish between strict mode and promiscuous mode? What is the significance of them ?
<! DOCTYPE> declaration at the top of the document, is used to tell the browser what model to use to render the document;
Strict mode is typesetting and js mode of operation is in accordance with the highest standards of browser;
http与https
http is a hypertext transfer protocol, is now the most mainstream of the transmission network transmission protocol, data is transmitted in plain text, unencrypted.
https is secure targeted http protocol, encrypted data transmission.
Compatibility Issues
- Browser default padding and margin inconsistent.
Solution: * {padding : 0 ; margin : 0}
- Empty the INPUT : File in Apple's browser form form submission error.
Solution: remove empty before submitting to remove empty the INPUT : File
- Margin-bottom is not valid in the Apple browser.
Solve: padding-bottom in place
float
Will float off the standard flow, does not occupy the space. Will cause the collapse of the parent element, affect the page layout.
solve:
- overflow:hdden;
- Empty tags, provided Clear : both;
- Pseudo-class tag: clearfix
DOM node operation
Created: CreatedElement ();
Add: the appendChild () is inserted inside the element trailing elements
The InsertBefore () within the insert element start element
Removed: removeChild ();
Alternatively: The replaceChild ();
Html5
Add semantic tags:
Heater、footer、section、nav、aside；
Audio and video: Audio , Video ;
Canvas: Canvas ;
Local cache: Web stroge;
Form controls:
Date、time、email、url、search
New technology:
WebSocket。
Iframe
advantage:
Asynchronous slow loading pages or scripts;
Disadvantages:
Blocking the main page onload event, not semantic, html5 no advocate.
Multi-tab Communications
Web stroge use.
Websocket Compatibility Issues
Use socket.io .
Processes and Threads
A program has at least one process, a process at least one thread;
Js is single-threaded, asynchronous Why can?
Because js main thread though is single-threaded, but underlying it is multi-threaded, so support asynchronous.
Optimization Project
Image compression, FIG Sprite, GIF , images may preferably indicate the width and height;
File merge;
CDN hosting;
Cache Use: e.g. ajax cache;
Pictures lazy loading;
NaN、null、undefind
NaN Type: Number ;
Nulll Type: Object ;
Undefind Type: undefind ;
note:
NaN == NaN - FALSE
'To' == NaN - FALSE
NaN == 0 --false
Null == undefind --true because both represent no sense
Null === undefind --false
Null == false --false
Undefind == false --false
False == 0 --true
typeof (NaN)
"number"
typeof ( 'in')
"string"
typeof(0)
"number"
typeof(null)
"object"
typeof (NaN)
"number"
typeof(undefined)
"undefined"
To solve cross-domain
JSONP (GET , principle of dynamic insertion script, because the script there is no cross-domain problems ) , the proxy server (common).
Document.write和innerHTML
Document.write only a redraw the entire page;
innerHTML can redraw part of the page content;
.call () and .apply ()
The method is a function of two methods, you can change this points to the problem.
The Apply () multiple receiving . 1 array parameter. Obtaining maximum and minimum (Math.max.apply (window, arr).
Memory Leak
That due to some objects are no longer needed bad coding practices defined there.
Global variables abuse, or method of cyclic object references, or timer callback function.
Closure
Closure is actually a function, internal functions can access its parent function scope.
There are a = {b 1}
Var b = {}
b.a1 = a
b.a2 = a
b.a1 == b.a2 --false
Because the basic types are the presence of stack memory, there is a reference value of a variable type of heap memory, reference types in the face of the pile should be the key to a stack inside.
Browser kernel
Google Browser: Blink
ie browser: Trident
Safari browser: WebKit
Opera browser: Blink
Firefox: gecko
Progressive enhancement and graceful degradation
Progressive enhancement: first carried out for the construction of low version of the browser page, complete the basic functions, then high version of the browser to interact, the effect is to optimize the function.
Progressive Enhancement: In the beginning, then test and repair for the version of the browser to complete the building project.
An array of methods
Unshift、push、shift、pop、splice、concat、split、sort
String Methods
Split、replace、slice
status code
200-299 Request successful
300-399 redirection
400-499 Client Error
500-599 server error
Url to the page display
Browser request to obtain the corresponding ip
The browser and the server used TCP3 handshake, a request to establish
The browser sends a request to the server
Server receives the request , the corresponding request
The browser to get the returned data, rendering the page.
TCP: Transmission Control Protocol ( the TCP , Transmission Control Protocol ) is a connection-oriented, reliable transport layer protocol based on byte streams
Front-end security
XXS : malicious scripts or code injection.
Solution: filtered and escaped.
CSRF : Cross-site request forgery.
Solution: the rational use of GET , POST , verification codes, token .
Network hijacking.
Solve: HTTPS , submit data using asymmetric encryption. crypto-js
Event Bubbling and event delegation
Event bubbling: the implementation of elements of the operation up a level, until HTML ;
Delegating events: parent element to register an event, listen for the click event of child elements.