Shulou(Shulou.com)06/03 Report--

Web front-end technology, which is composed of html, css and javascript, is a huge and complex technology system, and its complexity is no less than any back-end language. When we learn it, we often start from a certain point, and then constantly contact and learn new knowledge points, so it is difficult for beginners to understand the context structure of the whole system. This article will simply sort out the Web front-end knowledge system, and the corresponding knowledge points will not be introduced in detail. The purpose is to help people review whether their knowledge structure is perfect, if there are any omissions or inaccuracies, I hope to share with you.

JAVASCRIPT article 0, basic grammar

The basic syntax of Javascript includes: variable definition, data type, loop, selection, built-in object, etc.

Data types include string,number,boolean,null,undefined,object and so on. Where string,number and boolean are the base types, null and undefined are two special types in JS, and object is the reference type.

Javascript can judge the basic data type through typeof, but can not accurately judge the reference type, so another method is needed, which is Object's toString. About the data type and its judgment, you can refer to the following blog: detailed description of data type and four methods of judging JS data type.

The common built-in objects in JS are Date, Array, JSON,RegExp, and so on. Generally speaking, Date and Array are used most frequently, JSON can serialize and deserialize objects and arrays, and another function is to make deep copies of objects.

RegExp, or regular expression, is a powerful tool for dealing with strings. For an introduction to data types and regular expressions, please refer to the blog: ES5's 9 API and JS regular expressions reduction for array enhancements

1. Function prototype chain

Although Javascript does not have the concept of inheritance, Javascript establishes the prototype object prototype in the function Function object, and takes the Function object as the main line, and builds a prototype chain internally from top to bottom.

To put it simply, a variable lookup mechanism is established. when accessing the properties of an object, first find out whether the object itself exists, if it does not exist, go to the prototype connection where the object is located, until the Object object, if the property is not found, it will return undefined.

Therefore, we often use the prototype mechanism of functions to implement JS inheritance. For more information about function prototype chain, please refer to blog: JS prototype object and prototype chain.

2. Function scope

The scope of a function is that variables are defined in the body of the function that declares them and in any function nested within that body. There is no block-level scope in JS, only function scope, so there is another strange phenomenon in JS, which is variable promotion. For an introduction to scope, please refer to the blog: scope and scope chain of functions.

3. Function pointer this

This exists in the function and points to the object on which the function is called at run time. In the actual project, there are many pits that encounter this, so it is necessary to have an in-depth understanding of this.

The Function object also provides methods such as call, apply and bind to change the this direction of the function, in which call and apply actively execute the function, bind is generally used in event callback, and the difference between call and apply is that the parameters are passed in different ways. For users of call,apply and bind, please refer to the blog: explain JS's call,apply and bind in detail.

4. Constructor new

The function in JS can be either a constructor or an ordinary function. When you use new to create an object, the corresponding function is the constructor, and when called through the object, it is an ordinary function.

There are three ways to create ordinary functions: explicit declaration, anonymous definition, and new Function ().

When creating a new object through new, the bottom layer of JS points the prototype chain of the new object to the prototype object of the constructor, so a prototype chain is established between the new object and the function object, through which the methods and properties in the function object prototype prototype can be accessed. For a detailed introduction to new, please refer to the blog: understanding the new operator in JS

5. Closure

Closure is actually an active block of code, the special feature of this code block is that it can permanently store local variables, but does not pollute global variables, and can form an independent execution process, so we often use closures to define components. For an introduction to closures, please refer to: sharing practical information: let you learn JS closures every minute.

6. Single thread and asynchronous queues

SetTimeout and setInterval are two built-in timers in JS, which are easy to use, but the principles behind these two methods are not simple.

We know that JS is a single-threaded language, in the browser, when the JS code is loaded, the browser will assign a main thread to execute the task (function), the main thread will form a global execution environment, and the execution environment will use the stack to execute the tasks to be executed sequentially.

However, there are some tasks in the browser that are very time-consuming, such as http requests, timers, event callbacks and so on. In order to ensure that the execution efficiency of other tasks is not affected, JS maintains an asynchronous queue (also called worker thread) in the execution environment and puts these tasks into the queue to wait. The timing of these tasks is uncertain, only after the task execution of the main thread is completed. To check whether the task in the asynchronous queue needs to start execution. This is why setTimeout (fn,0) always waits until the last execution. For questions about single-threaded and asynchronous queues, please refer to: setTimeout (0)

7. Asynchronous communication Ajax technology

Ajax is an asynchronous communication technology specially used by browsers to interact with the server, and its core object is XMLHttpRequest, through which an Ajax request can be created. In order to prevent XSS***, browsers from restricting Ajax, Ajax is not allowed to request servers across domains, that is, it can only access url under the current domain name.

Of course, if you are sure that there is no cross-domain risk on your site, you can actively open a cross-domain request on the server side. It can also be done directly through CORS or JSONP.

JSONP uses the cross-domain ability of scripting (script) to simulate Ajax requests.

CORS is a W3C standard, the full name is "cross-domain resource sharing" (Cross-origin resource sharing). It allows browsers to send XMLHttpRequest requests to cross-source servers, thus overcoming the limitation that AJAX can only be used in the same origin. For an introduction to CORS, please refer to: cross-domain resource sharing CORS details

8. DOM object document

The entire dom structure of the web page is stored in the document object, and all the elements on the page will eventually be mapped to a dom object. Document also provides a lot of api to find specific dom objects, such as getElementById,querySelector and so on.

9. Event system Event

Events are the basis for users to interact with the page. So far, DOM events have evolved from mouse events (mouse) on the PC to touch events (touch) and gesture events (guesture) on the mobile side.

Because the DOM structure may be nested in multiple layers, two kinds of event flows are derived: event capture and event bubbling, the latter of which is the most commonly used. Many functions can be achieved by using the event bubbling mechanism, such as page click statistics. For an introduction to two kinds of event flows, please refer to: event bubbling and capture

In addition, onload/onDOMContentLoaded, onscroll, onvisibility and onhashchange events are built in during page initialization, scrolling, hiding, returning and other operations. If you want to capture these events, you need to bind them through addEventLisener/attachEvent.

10. Global object window

In JS, when a piece of JS code is loaded and executed in the browser, the JS engine will build a global execution environment in memory. The function of the execution environment is to ensure that all functions can be executed in the correct order. The window object is a global object in this execution environment. The window object contains many operations api and objects, and the document object is one of them. For an introduction to the JS execution environment, please refer to the blog: in-depth understanding of JS implementation details

CSS

Css is a language used to modify html.

1. Selector

There are many kinds of selectors for css, such as class selector, tag selector, ID selector, descendant selector, group selector, pseudo-class selector (before/after), sibling selector (+ ~), attribute selector and so on.

2. Locate position

Positioning generally includes relative positioning (relative), absolute positioning (absolute) and fixed positioning (fixed). Relative and absolute are most commonly used on mobile, while fixed has compatibility problems on mobile, so it is not recommended to use it. The solution to replace fixed on mobile is to scroll inside absolute+.

3. Floating float

Setting float to left or right allows the element to float left or right out of the document stream. Generally used in the grid mode layout, if the child elements are all set to float, then the parent element is collapsed, then you need to clear the float, there are many ways to clear the float, the common method is to add an empty element to the end of the element to set clear:both, a bit more advanced to the parent container to set before/after to simulate an empty element, and you can also set overflow:auto/hidden directly. In addition to floating, grid mode can be implemented, as can inline boxes (inline-block) and table.

4. Box model Box

The box model is one of the most important concepts of css and the cornerstone of css layout. Common box models are block-level boxes (block) and inline boxes (inline-block). The key attributes of boxes include margin, border, padding, and content, which can set the relationship between box and box and between box and content. Another problem is calculating the size of the box. It is important to note that the setting of the box-sizing property affects the width and height of the box. Only the vertical outer margins of a block box in a normal document stream are merged. The outer margins between inline boxes, floating boxes, or absolute positioning are not merged.

5. Flexible layout Flex

The container in Flex layout is a scalable container. First, the container itself will be more capable of dynamically resizing the elements in the container; then when the Flex container is applied for one time (width and height), the elements in the container will be automatically adjusted to the new size. The Flex container can also set the scale and fixed width, as well as the orientation (landscape and portrait) of elements in the container, and whether automatic wrapping of elements is supported. With this artifact, it is much more convenient to do page layout. Note that when set to the Flex layout, the float, clear, and vertical-align attributes of the child elements are invalidated.

6. Transition Transition, rotation Transform

Using transform, elements can be translated (translate), rotated (rotate), zoomed in (scale), tilted (skew) and so on, while transition makes the css attribute values (including transform) transition smoothly in a period of time. The sliding switching effect of the page can be achieved by using transition and transform.

7. Animation Animation

Animation first needs to set up an animation function, and then use this animation to change the change of the css attribute of the element, and the animation can be set to a permanent loop. Compared with transition, the animation effect of animation is more flexible and rich, and another difference between the two is that transition can only trigger the animation effect by actively changing the CSS value of the element, while animation starts to execute animation once it is applied.

8. Sprite sprite

For large sites, in order to reduce the number of http requests, the commonly used small icons are usually arranged into a large image. When the page is loaded, the network is requested only once, and then the small icons needed to be displayed are controlled by setting background-position in css.

9. Font icon iconfont

The so-called font icon is to convert commonly used icons into font resources in the file, by referencing the font file in CSS, and then you can directly control the font's css properties to set the style of the icon, the advantage of the font icon is that it is not affected by the screen resolution, and the color of the icon can be modified arbitrarily.

HTML part 1, Web semantics and SEO

Html regular tags include html,head,body,div,span,table,ul,ol,dl,p,b,h2~h7,strong,form,input,img,em,i and so on, and html5 also adds a lot of semantic tags, such as header,acticle,aside,section,footer,audio,radio and so on.

Web semantics refers to the use of semantically appropriate tags, so that the page has a good structure, page elements have meaning, so that people and search engines can easily understand.

SEO refers to the internal and external adjustment and optimization of the website on the basis of understanding the natural ranking mechanism of the search engine, to improve the natural ranking of keywords in the search engine, to obtain more display, and to attract more target customers to click to visit the website, so as to achieve the goal of Internet marketing and brand building.

Search engine crawler technology to get the page is a pile of html tags composed of code, people can visually determine what is important on the page, but the machine can not. However, the search engine will judge the weight of the content according to the meaning of the tag. therefore, use the appropriate tag in the right place to make the semantics and structure of the whole page clear, so that the search engine can correctly identify the important content in the page. and give a higher weight. For example, h2~h7 tags have a very high weight in SEO, and using them as the title of the page is a simple SEO optimization.

2. Page rendering mechanism

Page rendering is the process by which the browser's rendering engine displays html code in the browser window according to the rules defined by CSS. The general working principle is as follows:

The user enters the URL, the browser sends a request to the server, and the server returns the html file

The rendering engine begins to load html code and converts the tags in HTML into DOM nodes to generate DOM trees

If an external css file is referenced in, a css file request is issued and the server returns the file

If an external js file is referenced in, a js file request is issued, and the server returns the file and starts running

The rendering engine continues to load the code in the html, and starts parsing the css file returned earlier, then calculates the style of the node according to the css selector, and creates the render tree

Recursively called from the root node, calculating the size, location, etc., of each element, giving each node the exact coordinates that should appear on the screen

If the body

If the image resource is referenced, a request will be made to the server immediately, and the rendering engine will not wait for the image to be downloaded, but will continue to render the following code.

The server returns the picture file, because the picture occupies a certain area, which affects the typesetting of the following paragraphs, so the engine needs to go back and re-render this part of the code.

If style.display= "none" is running in the js script, the layout is changed and the engine needs to re-render this part of the code.

Until the page is rendered.

3. Redraw and reflow

When some (or all) of the rendering tree needs to be rebuilt due to changes in the size, layout, hiding, and so on. This is called reflux. For example, the above img file will cause reflux after loading, and each page needs to be reflowed at least once, that is, when the page is loaded for the first time.

When some elements in the rendering tree need to update attributes, and these attributes only affect the appearance and style of the elements, but not the layout, such as background-color. It's called redrawing.

As can be seen from the above, reflow will lead to repainting, and repainting will not necessarily cause reflow.

Operations that cause redrawing and reflux

Add and remove elements (reflow + redraw)

Hidden elements, display:none (reflow + redraw), visibility:hidden (redraw only, no reflow)

Move an element, such as changing the value of top,left,transform, or moving an element to another parent element. (redraw + reflow)

Operations on style (for different attribute operations, the impact is different)

Another is the user's operation, such as changing the browser size, changing the browser font size, etc. (reflow + redraw)

4. Local storage

The most primitive way of local storage is that cookie,cookie is a piece of text stored in the local browser, the data is saved in the form of key-value pairs, and the expiration time can be set. But cookie is not suitable for storing large amounts of data, because every time a page is requested, cookie is sent to the server, which makes cookie slow and inefficient. Therefore, the size of cookie is limited to about 4k (different browsers may be different, sub-HOST), as follows:

Firefox and Safari allow cookie to be up to 4097 bytes, including name (name), value (value), and equal sign.

Opera allows cookie to be up to 4096 bytes, including: first name (name), value (value), and equal sign.

Internet Explorer allows cookie to be up to 4095 bytes, including: first name (name), value (value), and equal sign.

In all browsers, any cookie size that exceeds the limit is ignored and never set.

Html5 provides two new ways to store data on the client: localStorage and sessionStorage, both of which store data in the form of key/value, the former is permanent storage, and the latter's storage period is limited to the browser session (session), that is, when the browser window is closed, the data in the sessionStorage is cleared.

The storage space of localStorage is about 5m (different browsers may vary, sub-HOST). This database is equivalent to a 5m-sized front-end page. Compared with cookie, localStorage can save bandwidth, but localStorage is not readable in browser privacy mode. An exception will be thrown when the stored data exceeds the storage space of localStorage.

In addition, H5 also provides reverse websql and indexedDB, allowing the front end to store local data as a relational database. Relatively speaking, this feature is rarely used and will not be introduced here.

5. Browser caching mechanism

Browser caching mechanism refers to the mechanism that controls file caching through fields such as Cache-Control (or Expires) and Last-Modified (or Etag) in the HTTP protocol header.

Cache-Control is used to control how long files are valid in the local cache. The most common, such as the server return packet: Cache-Control:max-age=600 indicates that the file should be cached locally and has a valid duration of 600 seconds (from the time the request was made). In the next 600 seconds, if there is a request for this resource, the browser will not issue a HTTP request, but will directly use the locally cached file.

Last-Modified is the latest update time of the identity file on the server. On the next request, if the file cache expires, the browser takes this time through the If-Modified-Since field and sends it to the server. The server compares the timestamp to determine whether the file has been modified. If there are no changes, the server returns 304 and tells the browser to continue using the cache; if there are changes, 200 is returned and the latest file is returned.

Cache-Control is usually used with Last-Modified. One is used to control the validity time of the cache, and the other queries the service for updates after the cache expires.

Cache-Control has another field with the same function: Expires. The value of Expires is an absolute point in time, such as Expires: Thu, 10 Nov 2015 08:45:11 GMT, indicating that the cache is valid until this point in time.

Expires is a field in the HTTP1.0 standard, and Cache-Control is a new field in the HTTP1.1 standard, which has the same function and controls the valid time of the cache. When these two fields appear at the same time, the Cache-Control is highly optimized.

Etag is also a field that identifies a file, just like Last-Modified. The difference is that the value of Etag is a characteristic string that identifies the file. When querying the server whether the file is updated, the browser sends the feature string to the server through the If-None-Match field, and matches the latest feature string between the server and the file to determine whether the file is updated or not. There is no update packet 304, there is an update package 200. Etag and Last-Modified can be used either at the same time or both as needed. When both are used at the same time, the file is considered not updated as long as one of the conditions in the base is met.

There are two other special cases:

Manually refresh the page (F5), the browser will directly think that the cache has expired (maybe the cache has not expired), add the field: Cache-Control:max-age=0 to the request, and send a package to the server to check whether the file has been updated.

If the page is forced to be refreshed (Ctrl+F5), the browser will directly ignore the local cache (even if there is no cache), add a field: Cache-Control:no-cache (or Pragma:no-cache) to the request, and send the package to the service to pull the file again.

6. History operation

The history of a user's visit to a web page is usually saved in a stack-like object, that is, a history object, which clicks back out of the stack and jumps the next page into the stack. It provides the following ways to manipulate the forward and backward of the page:

Window.history.back () returns to the previous page

Window.history.forward () goes to the next page

Window.history.go ([delta]) jumps to the specified page

HTML5 has enhanced History Api by adding two Api and one event, namely pushState, replaceState and onpopstate

PushState is to add a new history to the history object, that is, stack.

ReplaceState replaces the current history in the history object.

The onpopstate event is triggered when the browser back button is clicked or when js calls history.back.

Similarly, there is another event: onhashchange,onhashchange is an old API with high browser support, and it is originally used to listen for hash changes, but it can be used to listen for client forward and backward events. Onpopstate is specifically used to monitor browser forward and backward events, not only for hash, but also for non-hash homologous url.

7. HTML5 offline cache

HTML5 offline cache, also known as Application Cache, is a cache area separated from the browser's cache. If you want to save data in this cache, you can use a description file (manifest file) to list the resources to be downloaded and cached.

A manifest file is a simple text file that tells the browser what is cached (and what is not cached). The manifest file can be divided into three parts:

-CACHE MANIFEST-the files listed under this heading will be cached after the first download

-NETWORK-the files listed under this heading require a connection to the server and will not be cached

-FALLBACK-the files listed under this heading specify fallback pages (such as 404 pages) if the page is inaccessible.

Offline caching brings three advantages to applications:

Offline browsing-users can use them when applying offline

Speed-cached resources load faster

Reduce server load-the browser will download only updated or changed resources from the server.

8. Canvas and SVG

Canvas uses Javascript to draw 2D graphics. Canvas is rendered pixel by pixel. In Canvas, once the graph is drawn, it will no longer get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that may have been covered by the drawing.

SVG is a language that uses XML to describe 2D graphics. SVG is based on XML, which means that every element in SVG DOM is available. You can attach a JavaScript event handler to an element. In SVG, each drawing is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphics.

Compared with SVG, Canvas is more dependent on resolution, does not support event handlers, and has weak text rendering ability, so it is more suitable for intensive games, in which many objects are drawn frequently, while svg is more suitable for applications similar to Google Maps with large rendering areas.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.