First, enter the URL to the page loads from the page displaying complete
Source: w ww.yinxiangit.com
Simple answer:
1. According to the browser URL request DNS lookup to find the real IP, initiates a request to a server;
2. The server returns data to the back-end processing is completed, the browser receives files (HTML, JS, CSS, images, etc.)
3. Browser loaded into the resource (HTML, JS, CSS, etc.) for parsing, to establish the appropriate internal data structures (such as the DOM of HTML);
4. resolves to load the resource file, rendering the page to complete.
Detailed answers:
The browser will open a thread to handle the request for analysis to determine if the URL is http protocol on the Web in accordance with ways to deal with;
2. The browser calls the corresponding method of the kernel, such as the WebView loadUrl method;
3. Analytical acquired URL IP address DNS, and other information sent UA provided a second GET request;
HTTP protocol for a session, the client sends a header (request header);
4. Go to Web Server on the web server, such as Apache, Tomcat, Node.JS peer server;
5. deployed into the back-end applications, such as PHP, Java, JavaScript, Python, etc., to find the corresponding request processing;
6. The process ends feedback header, if the browser has visited here, there is a corresponding cache resources, will contrast with the server was last modified, consistent returns 304;
7. The browser starts downloading html document (response header, status code 200), while using the cache;
Document tree is established, the desired specific MIME type file (such as css, js) The marker request, and set the Cookie;
8 start page rendering DOM, JS DOM API operation based on DOM, perform event binding, etc., to complete the page display.
Second, usually how to manage your project?
1. advance team must determine a good global style (globe.css), coding mode (utf-8) and the like;
2. Write habit must be consistent (for example, are based on the inherited type of writing, have written a single line style);
3. Prepared by dimension style, the modules are promptly labeled (marked local key style calls);
4. The pages marked (e.g. the start and end page module);
5.CSS with HTML parallel sub-folder storage, had named Unity (eg style.css);
6.JS points in folders named after the JS function subject to English translation.
Third, the page reconstruct how the operation?
Reconstruction Site: without changing the external behavior of the premise, to simplify the structure, add readability, and maintain a consistent behavior in the front end of the site. That is, without changing the UI, optimize the site, maintain a consistent UI while being expanded.
For the traditional site for reconstruction is usually:
a table (table) DIV + CSS layout was changed to
make the site compatible with front-end modern browser (for in sub-standard CSS, such as IE6 valid)
for the mobile platform optimized
for in SEO optimized
websites in-depth aspects of reconstruction should be considered
Reducing the coupling between the code
Let the code to maintain flexibility
in strict accordance with specifications write code
design scalable API
instead of the old frameworks, languages (eg VB)
enhance the user experience
generally speaking optimized for speed also included in reconstruction
Compression JS, CSS, image other front-end resources (usually solved by the server)
performance optimization program (e.g., write data)
using the CDN to accelerate resource loading
JS DOM is optimized for a
file cache HTTP server
Fourth, what mvvm framework? What is the difference between it and other frameworks (jquery) is? What a scene for?
A: a model + view + viewModel frame, the data model model, viewModel connecting two
Difference: vue data driver to view the display through the operation level instead of the node data.
Scene: more data manipulation scenarios, more convenient
Five, React and Vue What is the difference?
Set Map data structures ()
ES6 provides a new data structure Set it like an array, but the value of the member is unique, no duplicate values.
ES6 provides a Map data structure. It is similar to the object, but also a set of key-value pairs, but the scope of the "key" is not limited to character string, various kinds of values (including objects) can be used as keys. In other words, Object structures provide - corresponds to the "string value", Map provides the structure - corresponds to the "value", is a better structure to achieve Hash.
Sixth, the difference WeakMap, and Map?
Structure Map WeakMap structure substantially similar, the only difference is that it only accepts an object as keys (except the null), does not accept the values of other types as keys, and the keys pointed object, garbage collection is not included.
The biggest advantage is WeakMap prevents memory leaks. Only WeakMap object as a key and references, it will be recycled out of the garbage collector.
WeakMap owned and Map Similar set (key, value), get (key), has (key), delete (key) and clear () method, nothing to do with the properties and methods related to iteration.
Seven rearrangements and redraw
Render tree part (or the entire render tree) and the need to analyze the size of the nodes need to be recalculated. This is called rearranged. Note that at least there will be a rearrangement - initial page layout.
Due to the geometric properties of the node is changed due to the style is changed or, for example, changing the background color of the element, part of the screen needs to be updated. This update is called redraw
Eight, what is graceful degradation and progressive enhancement?
Graceful degradation:
Web sites can work in all modern browsers,
If the user is using an older browser,
The code checks to see if they can work,
Due to the unique IE box model layout problems,
Practice for the different versions of the hack IE had a graceful degradation,
Increased candidate for those who can not support browser functionality,
So that on older browsers degraded in some manner experience but will not completely ineffective.
Progressive Enhancement:
Start with a basic function is supported by all browsers,
Gradually add features that are only supported by modern browsers only,
To increase page-sound basis for additional styles and features of the browser,
When the browser support, they will automatically be rendered and play a role.