Overview of the browser-side technology system-seven types of weapons developed at the front

A popular science, said I to the front-end technology system (also known as the browser-side technology system), I hope to let more people know the front end, but also hope to enrich the front-end development of the bigger picture.

Last year I wrote the website performance Optimization series articles, the Friends will know that this kind of article is not to introduce a variety of specific optimization techniques, but focus on the exploration of these optimization points of thinking and methods. And then introduce to you a variety of detection methods to find problems, And then there is a goal to solve the problem. All of this requires a clear understanding of the entire life cycle of a Web page, and a clear understanding of the ways in which the various technologies in the Web are extremely interconnected. This returns to a more fundamental question: what is the browser-side technology architecture?

Want to use few words to say that the front-end technology is unlikely, but with a short article to say what is the front-end, or can do. Because I often give background development students to introduce the foreground technology, so will frequently involve this kind of topic.

To resolve the front end, I would like to answer a few questions below.
1. What are the front-ends involved in several technologies?
2. How do I integrate collaboration between various technologies in the front-end?
3. How does the front end communicate with the backend?

Answer these questions I will immediately throw out the front-end development of the "Seven Weapons" theory, the front-end mainly involved in seven kinds of technology is what, at the same time, focus on "Seven kinds of weapons" how to cooperate internally, how to communicate with the outside. (In view of the nature of the text, the following specific description of the "Everything", "all", "all" such an attribute may not be absolute, but can be determined in the case of 99% is correct)

I. http: Everything on a webpage comes from an HTTP request
All of the content on the page is loaded from the server with several HTTP requests.
The first request is usually a (X) HTML document, which is the point of the address bar in the browser:

(This image can be obtained by Fixfox Firebug plugin, IE's httpwatch tool, or chrome directly by Ctrl+shift+i)
URLs in the address bar usually contain addresses and some parameters so that the corresponding background service can be found and the output will be determined by these dynamic parameters.

Multiple HTTP requests are independent. So who else is triggering the other requests?
triggered by the browser! is emitted during the browser parsing the first (X) HTML document, and I'll cover this process next.

two. HTML: HTML is parsed into the DOM tree in the browser
An HTML document is a less rigorous XML (text) document. Right-click on any page to see the source code.
The browser runs from top to bottom with HTML document content. The final HTML text is parsed into a tree, called the DOM tree.
Note: Dom tree is the root of everything in the browser, is the focus of this article, will be emphasized many times.

(This image can be found by Fixfox Firebug plugin, IE8/9 by F12, or chrome directly by Ctrl+shift+i)
Continue to answer the previous question: the rest of the HTTP requests, in addition to XHR (described later), CSS @import and background map, almost all in the parsing of HTML, by several specific nodes on the DOM tree. Those nodes that are highlighted:

• : Used to embed a picture
• <iframe>: Used to nest other HTML
• <link>: can be used to introduce CSS files
• <script>: can be used to introduce JavaScript files
• <object> and <embed>: often used to introduce flash files

One reason for this is that it illustrates the relationship between HTML and http: the first HTTP load HTML, parsing the HTML to initiate other HTTP. Second, the DOM tree is emphasized again, and the request is triggered when the HTML parsing is parsed as a DOM tree.

three. CSS: use CSS to set presentation style and page layout
How do I define the style of a Web page, such as the color and size of a font? This is the work of CSS.

HTML code

2. < before!--CSS appears, use an extra style node--
4. <span><font size="color=" red> Text </font> </span>
6. <!--CSS, unified within the style attribute of the node--
8. <span style="color:red,font-size:50px"> Text </span>
10. <!--CSS, which is uniformly defined outside of the node, and is associated to a node by a property such as Class,id
12. <span class="Mytxt"> Text </span>

We see the last way to specify the class attribute mytxt for the <span> node. The detailed definition of mytxt can be added to the document in two ways.

HTML code

1. <!--define-->   within the style tag;
2. span class= "tag" ><style>  
3.     .mytxt:{color:red,font-size:50px}  
4. </style>  
5. <!--introduce additional CSS through the <link> tag, which contains the Mytxt class's style definition-->  
6. <link rel= "stylesheet"  type= " Text/css " href=" Http://a.com/a.css " />  

Of course, the function of CSS is not only a simple style definition, but also by defining the location of the block to determine the layout of the page, CSS naturally has its own set of syntax, describes the function of CSS, and determine the CSS rules and the association between the DOM node. These details are not the focus of this article.

We see CSS either through the node's style property, or through a particular <style><link> node affecting the page, which goes back to what we repeatedly emphasize, Dom tree, CSS is not out of the DOM tree, but resides on it.

four. javascript: using JavaScript to handle interactive events
When it comes to JavaScript, let's clarify that the relationship between Java and JavaScript is the relationship between Lei Feng and Leifeng Tower.
Web application is a typical event-driven GUI system. JavaScript defines the response body for interactive events, events on the timeline.
Let's look at a simple app and click on the button to pop up a warning box.

HTML code

2. <!--write directly in the onclick attribute--
4. <button onclick="alert (1)"></button>
6. <!--in the OnClick property, call the Test_clk method--
8. <button onclick="TEST_CLK ()"></button>
10. <!--in the Script tab, define the Test_clk method--
12. <script>
14. function Test_clk () {
16. Alert (1);
18. }
20. </Script>
22. <!--introduce an external JS file in the script tag, internally containing the definition of the TEST_CLK method--
24. <script src="Http://a.com/a.js"></script>

Next we have a question, JS when to run?

• First, when the browser resolves to the <script> tag, it starts running its code.
• The event response body can be defined within a specific attribute within the <script> tag or other tag, and is executed when the event is triggered
• Script code can specify that some code starts executing after a specified length of time, or repeats every interval

The important thing is that we still see that JS is also not out of the DOM tree. Resides in the DOM tree like a CSS. It is also necessary to be clear that JS is the load to the client browser, running in the browser, consumes the client computing resources. JS provides computing power to the browser side, while the browser side is the JS host. As a scripting language, JS does not necessarily have to work on the browser host, but this is out of the front-end technology system and is not discussed here.

Here we have a basic understanding of the elements that make up a separate Web page, what each is responsible for, and how it works with each other. You may notice that each HTTP request is independent from the previous one, so how do you relate each page to each other?

First, the pages are linked together through links <a> or <form> forms. The general situation between Web pages by clicking <a> forms a new HttpGet request that performs a tag href attribute, allowing the browser to move from one page to another.

When a browser is required to submit data through the client, we usually make a form, then submit the form, and the customer data will be submitted to another address via the HttpPost request.

Another requirement is to stay logged in, which requires a piece of information to always be passed between pages, but it is obviously unsafe to put it in the URL parameters. How do I do this? That's what's going on next.

Five. Cookies: Use cookies to identify your browser and keep conversations between pages
Back to HTTP itself, it is a stateless protocol, divided into header and body two parts, body is the main content of HTTP transmission, header is divided into the request header (Requestheader) and (Responseheader) two parts, The header contains some general information in addition to the parameters that indicate the relationship between the pages, the information in the header is written in the form of key-value pairs, and is primarily responsible for the general caching policy description and identity identification functions:

(this diagram, which is the details of the HTTP demand point in the first diagram, is shown above, the response header is listed above, the request header, and the order of occurrence is inconsistent.) Firebug is the order, attention to distinguish)
The server can grow the cookie to the client through the response header, and the client's request header will carry the cookie under the domain name. For example, this request to limu.iteye.com will contain cookies under iteye.com, It also includes limu.iteye.com cookies. The server can store the session ID through a cookie, so that there is an association between multiple requests. At the same time, the server set cookie specifies where the cookie is set under the domain name and path, and how long the client will reside.

Finally, the relationship between JavaScript and cookie, JavaScript can read and write the cookie value under the domain name of the page.
It is important to note that under Http://www.a.com, http://www.b.com/b.js,b.js can read the cookie on the page, which is www.a.com and a.com, Instead of B.Com cookies. B.js This HTTP request header with the B.Com series of cookies, the response header of this request, can only give b.com to grow a cookie. It's a bit around here, but it's necessary to clarify that you can look at it more carefully when you encounter problems.

To this end, we understand the elements of a Web page, but also understand the link between the Web page, so that we understand a traditional site of the Frontend technology system. Next we'll introduce some of the tricks that bring Web2.0 's front-end transformation.

Six. DHTML: Manipulating the DOM tree with JavaScript
Back in the web, in fact we just got a DOM tree and everything else resides on the tree.
Next we think about, if there is a way to change the dynamic of the tree at will, it is not we have the ability to fully control a Web page in the client. This ability is naturally assumed by JavaScript.

Next, imagine what kind of API we need to manipulate a tree, which is a structured XML document.

• Find one or a set of leaf nodes, from a node to find the relevant node: Father, son, brother.
• Add/Copy nodes, insert them into the document at specified locations, and delete nodes.
• Delete and change the leaf node A property and the text that the node contains.

So the DOM level 1,2&3 of the World Wide Web Consortium defines 3 levels of operational interfaces on a series of Dom. Where Level1 mainly contains these interfaces. Level 1 can be implemented correctly in a variety of browsers.

Recall that before we mentioned JS three execution portal, it is very important to respond to various mouse keyboard events, how to bind the event response action for the node, IE has a unique event model. The event model for the rest of the browsers conforms to the Web-based DOM interface definition.

This series of techniques is known as the D (Dynamic) HTML, whose core is to better glue the Http,html,css,javascript together via JS. JavaScript makes it possible to change everything in a Web page, even including dynamically introducing new CSS and JS.
It's cool, isn't it? But the individual DHTML is not popular, because we have the power but do not know where to use the appropriate. So when the next introduction of the technology is introduced, when we can use the power of the foreground according to the instructions of the service side, a far-reaching real technological change has taken place. And before that, we need to realize , DHTML is just an extension of JavaScript capabilities in the browser.

Seven. Ajax: Using JavaScript to interact with the server side within a Web page
With Dhtml,javascript has the ability to completely change every detail of the Web page. JavaScript is more ambitious than this, if JS can be driven by events, from the server side of a steady stream of fresh data, then theoretically no longer need a second page.
We recall that everything on the Web page comes from HTTP, which naturally requires JavaScript to initiate an HTTP request and can read the HTTP request response. So with XHR (XMLHttpRequest), first introduced as an ActiveX control IE5 (You have to thank IE right here?).
XHR is the one that can be sent by JS HTTP request, and when the request data returned after the service-side data to the JS object. and XHR supports asynchronous requests in the process of HTTP requests (because it is time-consuming to work with the server, so this operation can be lengthy), and the page works. An event callback will not be triggered until after the HTTP response. js method processes the data.

Ajax does not refer to XHR. All without leaving the current page under the premise of the JS initiative from the server side to obtain the JS resolvable data solution, can be called Ajax.
One of the most common implementations of Ajax is to create a <script> node through the DOM interface, specifying that the SRC of the node is an HTTP address to the data server, and the data is packaged as an executable JS, which executes immediately after the HTTP response is JSONP,JS. (Here we once again involved one of JS's execution portals, in which the browser encounters the <script> node being executed).

Under the guidance of Ms,google and other pioneers, the advent of Ajax has led to profound changes in the field of front-end, and even the entire development of the Internet, known as Web2.0. But back to the source, Ajax is still another extension of JavaScript capabilities in browsers.

Summarize

1. http: All content is obtained via HTTP request
2. HTML: The browser parses HTML into a DOM tree
3. CSS: Defining the layout and style of HTML
4. JavaScript: Provides compute power to handle interactive events
5. Cookies: Inter-page, inter-request session hold (JS can manipulate cookies)
6. Dhtml:javascript manipulating the DOM tree (including CSS)
7. Ajax:javascript manipulating HTTP

• All front-end applications afterlife the consolidation of these basic features
• Web2.0 is primarily afterlife to the ability of JavaScript such as DHTML and Ajax to expand

The introduction of the front-end technology system can be over, we do not have a concept of the English abbreviation, and then copied to obscure official explanation.  
"transmits HTML documents using HTTP, the document is parsed into a DOM tree, the CSS is responsible for layout and style, JS provides computing power, handles event responses, and cookies maintain sessions. "  
Yes, if you want to write a browser, will you do the same? So does the other client-side graphics interaction system do the same thing as transmitting, displaying, interacting with events, and so on?  
If I continue to introduce Firebug-type front-end development tools, By matching it with seven weapons, supplemented by some API documentation, you can try to experience the next front-end development.  

last and front-end development speak a few words  
Read the front-end development here, first say sorry, write so long, The whole thing is your heart. And you know more, and you don't mention it here.  
In fact, the main point is here, how to put forward a number of points in all the content you know, complete description of the front-end technology system, this thing for the front-end development is important? Is it important? Doesn't matter? Let's look at a few questions:  

Why there are dhtml? 
We understand Http,html,css,js's collaborative relationship, knowing that the DOM tree is everything, and we think of manipulating the DOM tree to manipulate everything in the web. .  

Why there is ajax? 
We know the capabilities of DHTML, but we don't know where it comes in, and then we think about relying on service-side guidance. Next we know that all the server content is obtained via HTTP, Naturally we need JavaScript to be able to manipulate HTTP objects.  

These issues require front-end development to be discovered and resolved. Although we are all following the steps of our forefathers, we seldom become pioneers in the field, But whether or not you know the difference between the entire front-end technology system is whether you are blindly follow suit. The difference is whether a new technology will find its core problem and the additional cost to solve it.  

The additional cost of introducing new technologies is another focus that I would like to highlight, What is the cost of using DHTML, and what is the cost of relying heavily on Ajax? Understand these and then we can better weigh whether or not to use.  

The development of the front-end is still continuing, what is the problem? How to fix it?

• Cookie capacity is small, each time with HTTP sent, whether through JS to store more data on the client? --Localstorage
• JS single-threaded, can I make a large number of JS calculation, the page no longer hangs? --Webworkers
• JS language is too random, rely on complex, how to organize code to facilitate the sharing of wisdom? --CommonJS Modules
• HTTP stateless short connection, can the client receive service-side messages more timely? --Various comet
• HTTP header large cannot be compressed, can not be a request to return multiple data objects, what to do? --Using the Spdy protocol

What is the cost of solving the problem? Does it cover all popular browsers, if not progressive enhancement? Do we have to do this? These are to be a qualified front-end, to do a technical framework has an impact on the front-end, must face the problem.

Front-end technology system, it seems that the problem is very large, but in fact there is no convoluted in the inside, so even if I do not write excellent, but it is still possible to say clearly. I am in the interview high-end of the time in fact very concerned about the front-end bigger picture, or how I can rest assured that a will continue to develop the product

from:http://limu.iteye.com/blog/986724

Overview of the browser-side technology system-seven types of weapons developed at the front