The value 1.position, relative and absolute are positioned relative to whom?
§ absolute: generate absolute positioning element, the parent element relative to the recent level is not static positioning to locate.
§ fixed (old IE does not support) to generate absolute positioning of elements, usually relative to the browser window or frame positioning.
§ relative forming elements relatively positioned, relative to its normal position positioning stream.
§ static default. No positioning element appears in the normal stream
§ sticky viscous generated positioning element, according to the normal position of the container obtained document flow calculation
2. How to solve cross-domain problems
JSONP:
The principle is: dynamically insert script tags, the introduction of a js file via a script tag, this js file loaded successfully performs the function we specified in the url parameter, and we will need the json data as a parameter.
Since homologous restriction policy, only the XmlHttpRequest current resource request source (the domain, protocol, port) in order to achieve cross-domain request, the request may be achieved by cross-domain script tag, and then outputs the data on the server and JSON callback function, so as to solve cross-domain data request.
Advantage of good compatibility, easy to use, browser and server support bi-directional communication. The disadvantage is that only supports GET requests.
JSONP: json + padding (inner fill), the name suggests, is to fill a box JSON
<script>
functioncreateJs(sUrl){
var oScript =document.createElement('script');
oScript.type = 'text/javascript';
oScript.src= sUrl;
document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
box({
'name': 'test'
});
functionbox(json){
alert(json.name);
}
</script>
HEARTS:
The server-side support for CORS, mainly by setting Access-Control-Allow-Origin carried out. If the browser detects that the appropriate settings, you can allow cross-domain access to Ajax.
By modifying the document.domain come across subdomains
The document.domain subdomain and main domain is set to the same main domain prerequisite: The two domain name must belong to the same base domain name and the protocol used, the port must be consistent, otherwise you can not use the document.domain cross-domain!
Primary domain using the same document.domain
Window.name to use cross-domain
window object has a name attribute, which has a feature: that is, in a window (window) of the life cycle, the window to load all the pages are sharing a window.name, each page has to window.name read and write permissions, window.name is persistent over a window loading all pages
Use HTML5 in the newly introduced window.postMessage ways to transfer data across domains
There are flash, set the proxy page and other cross-domain mode on the server. The method does not think window.name complex, also compatible with almost all browsers a cross-domain method which is really excellent.
3. Talk about your views on the webpack
WebPack module is a packaged tool that you can use to manage your WebPack module dependency, and unravel a static file output modules are required. It is well managed, packaged Web development in the use of HTML, JavaScript , CSS and various static files (images, fonts, etc.), make the development process more efficient. For different types of resources, webpack a corresponding module loader. webpack packer module analyzes the dependencies between modules, the last generation of optimized and static resources combined.
webpack of two characteristics:
1.code splitting (can be automated)
2.loader can handle various types of static files, and support for tandem operation
webpack is commonJS form to write the script drops, but support for AMD / CMD is also very comprehensive, accessible legacy code migration project.
webpack has requireJs and browserify functions, but there is still a lot of their new features:
1. CommonJS, AMD, grammar ES6 made compatible
2. The support package for js, css, pictures and other resource files
3. The tandem loader modules and plug-in mechanism allowed more flexibility and scalability, for example, support for CoffeeScript, ES6 of
4. There is a separate configuration file webpack.config.js
The code can be cut to a different chunk, load-demand, reducing the initialization time
4.XSS and CSRF Is there any difference?
XSS is access to information, users do not need to know in advance the code pages and other data packets. CSRF is completed instead of the user's specified actions, users need to know the code for the other pages and data packets.
To complete a CSRF attack, the victim must complete two steps in sequence:
Login trusted site A, and generates Cookie locally.
In the case of A is not out of, access to dangerous websites B.
CSRF defense
§ service side of the CSRF many ways like, but the general idea is the same, that is, increase the client page pseudo-random number.
§ codes by the method of
Support SourceUrls and SourceMaps, easy to debug
. With a strong Plugin Interface, mostly internal plug-in, use more flexible
.webpack using asynchronous IO and has a multi-level cache. This makes webpack more quickly and speed up on the incremental compilation
The talk about Performance Optimization
Code level: Avoid using css expressions, avoid the use of advanced selectors, wildcard selector.
Cache use: Cache Ajax, use CDN, use external js and css files for caching, add the Expires header, the server configuration Etag, reduce DNS lookup, etc.
The number of requests: picture resources outside of merging styles and scripts, css images using the wizard, the initial screen first demand loading, lazy loading static resources.
Requested bandwidth: the compressed file, open GZIP,
Code-level optimization
To optimize the use hash-table lookup
Less use of global variables
Instead of operating with the innerHTML DOM, reducing the DOM number of operations, to optimize performance javascript
With setTimeout to avoid losing page response
Result Cache DOM node lookups
Avoid using CSS Expression
Avoid Global Query
Avoid using with (with create their own scope, would increase the scope chain length)
Merge multiple variable declarations
Avoid pictures and iFrame like empty Src. Src empty reloads the current page, affect the speed and efficiency
Try to avoid writing write Style attributes in HTML tags
Moving end performance optimization
Try to use css3 animation, open hardware acceleration.
Appropriate use of touch event instead of click event.
Avoid using a gradient css3 shadows.
You can transform: translateZ (0) to turn on hardware acceleration.
Do not abuse Float. Float when rendering computationally intensive, minimize the use of
Web fonts do not abuse. Web fonts need to download, parse, redraw the current page, minimize the use.
RequestAnimationFrame rational use of animation instead of setTimeout
The CSS property (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) will trigger GPU rendering, reasonable use. Excessive use of mobile phones can cause excessive power consumption increases
In the mobile end PC side also apply
6.js inheritance and their advantages and disadvantages
Prototype chain to inherit shortcomings
First, the literal rewriting prototype disrupt relations, prototype using reference types and subtypes can not pass parameters to the super type.
Borrowing Constructor (formula inherited class)
Borrowing Constructors while solving both of these problems just now, but there is no prototype, the reuse of the question. So we need to borrow + prototype chain model constructor, this mode is called inheritance composition
Combined inheritance
Inheritance is a more modular commonly used inherited methods, the idea behind it is a prototype of the prototype implementation inheritance chain properties and methods, and to achieve an instance attribute inherited by borrowed constructor. Thus, not only to achieve the function defined by multiplexing method on the prototype, and to ensure that each instance has its own properties.
7. Please talk about the shortcomings of Cookie
Although the cookie to persist client data to provide a convenient, sharing the burden of server storage, but there are still many limitations.
Generate a maximum of 20 cookie each particular domain: the first
1.IE6 up to 20 or earlier cookie
After the final version 2.IE7 and can have 50 cookie.
3.Firefox maximum of 50 cookie
4.chrome and Safari do not have a hard limit
IE and Opera will clean cookie least recently used, Firefox will randomly clean up cookie.
The cookie is a maximum of about 4096 bytes for compatibility, generally not more than 4095 bytes.
IE provides a persistent user data can be stored, called the UserData, supported from start IE5.0. Each data up to 128K, at each domain name up to 1M. The persistent data in the cache, the cache if not cleaned, it will always exist.
Advantages: high scalability and availability
1. Good programming, control the size of objects stored in the session cookie in FIG.
2. encryption and secure transmission technology (SSL), to reduce the possibility of cookie to crack.
3. store not only sensitive data in a cookie, even if stolen will not have significant losses.
4. Control cookie lifetime, so that it will not always be effective. Thieves are likely to get an expired cookie.
Disadvantages:
1.`Cookie` number and length limit. Each domain can only have a maximum of 20 cookie, each cookie can not exceed 4KB, otherwise it will be truncated.
2. Security issues. If the cookie was intercepted person, that person can get all the information session. Even if encryption is also unhelpful because the interceptor does not need to know the meaning of the cookie, as long as they are forwarded cookie he can achieve their goals.
3. Some state can not be stored in the client. For example, in order to prevent duplicate submission form, we need to save a counter on the server side. If we put this counter is stored in the client, then it would not achieve any effect.
Browser local storage
In later versions of the browser, js provided sessionStorage and globalStorage. Providing in HTML5 localStorage instead globalStorage.
html5 The Web Storage includes two storage methods: sessionStorage and localStorage.
sessionStorage a local storage for data session (session) of these data only in the same page in order to access a session and after the session ends data also will be destroyed. So sessionStorage not a persistent local storage, only the session-level storage.
The localStorage for persistent local storage, unless the initiative to delete data, or the data is never out of date.
Difference 8.web storage and a cookie
Web Storage concept and cookie similar, except that it is designed for greater storage capacity. Cookie size is limited, and every time you request a new page when Cookie will be sent in the past, so that virtually wasted bandwidth, in addition cookie also need to specify the scope, not cross-domain calls.
In addition, Web Storage has setItem, getItem, removeItem, clear methods, unlike the cookie need front-end developer 's own package setCookie, getCookie.
But the cookie is not indispensable: the role of the cookie is to interact with the server as part of the HTTP specification exists, and Web Storage simply to the local "store" raw data
In addition to support browser does not support IE7 and below, other standard browsers fully support (ie FF and need to run a web server inside), it is worth mentioning that IE always good things, such as IE7, IE6 in fact userData javascript is local storage solutions. It can be unified by a simple code package to all browsers support web storage.
sessionStorage localStorage and have the same operation method, e.g. setItem, getItem and the like removeItem
9. the cookie and session difference:
1, cookie data is stored on the customer's browser, session data on the server.
2, cookie is not very safe, people can analyze stored locally and COOKIE COOKIE cheat
Taking into account the security should be used session.
3, session will be stored on the server within a certain period of time. When accessing the increase would be more take up the performance of your server
Taking into account mitigating server performance, you should use COOKIE.
4, a single cookie stored data can not exceed 4K, many browsers are limited to a maximum of 20 sites saved cookie.
5, so personal recommendations:
The login information and other important information is stored as SESSION
Additional Information If you want to keep, you can be placed in COOKIE
display: none and visibility: hidden the difference?
display: none to hide the corresponding elements are no longer assigned to it in the document layout in space, it will close the sides of the elements, when he would never exist.
visibility: hidden hides the corresponding elements, but still retain the original space in the document layout.
10.CSS the link and @import difference is?
(1) link part of the HTML tags, and CSS @import is provided;
(2) the page is loaded, link will also be loaded, and the CSS @import cited references will wait until its CSS file is loaded and then finished loading;
(3) import IE5 only to identify more, the HTML link tag, no compatibility problems;
Right pattern (4) link weights above embodiment @import heavy weight.
Similarities and differences between absolute and float attributes: position
§ common: inline element is set to float and absolute property, allowing elements from the document flow, and can set its width and height.
§ different points: float will occupy the position, absolute override other elements in the document flow.