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

This article mainly introduces "what are the knowledge points that can not be ignored in the front-end development". In the daily operation, I believe that many people have doubts about the knowledge points that can not be ignored in the front-end development. The editor consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "what knowledge points can not be ignored in the front-end development". Next, please follow the editor to study!

1.css disable mouse event

.copy {pointer-events: none; cursor: default; opacity: 0.6;} copy the code

The understanding of 2.get/post and the difference between them

Http

Hypertext transfer Protocol (HTTP) is designed to ensure communication between the client and the server. HTTP works as a request-response protocol between the client and the server. The web browser may be the client, and the network application on the computer may also act as the server side.

Http method:

HEAD: same as GET, but only returns HTTP header, but does not return document body PUT: upload specified URI indicates DELETE: delete specified resource OPTIONS: return HTTP method supported by server CONNECT: convert request connection to transparent TCP/IP channel POST: submit data to be processed to the specified resource

/ / query string (name / value pair) is the POST / test/demo_form.asp HTTP/1.1 Host: w3schools.com name1=value1&name2=value2 sent in the HTTP message body of the POST request

GET: request data from a specified resource

The difference between GET and POST

GET requests can be cached GET requests are preserved in browser history GET requests can be bookmarked GET requests should not be used to process sensitive data GET requests have a length limit (2048 characters), IE and Safari browsers limit 2kbot Opera limit 4kbot Firefox dome Chrome limit 8k GET requests should only be used to retrieve data

POST requests are not cached POST requests are not retained in browser history POST cannot be bookmarked POST requests have no data length requirements

3. The way to realize the stripe grid

Nth-child (even/odd)

/ / odd represents the cardinality. The style of the cardinality row is selected, and even represents the even number of rows.

.row:nth-child (odd) {

Background: # eee

}

Nth-of-type (odd)

.row: nth-of-type (odd) {

Background: # eee

}

Gradual implementation of linear-gradient

.stripe-bg {padding: .5em; line-height: 1.5em; background: beige; background-size: auto 3em; background-origin: content-box; background-image: linear-gradient (rgba, transparent 0);}

4.js calculates the distance between two points in a plane

/ / data can be stored as an array or as an object, let a = {x dy*dy 6, y 10}, b = {x: 8, y: 20}; function distant (function distant b) {let dx = Number (a.x)-Number (b.x) let dy = Number (a.y)-Number (b.y) return Math.pow (dx*dx + dy*dy, .5)}

5.css forbids users to select

Body {- webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}

6. Array deduplication

/ / indexOf implements var array = [1,1,'1']; function unique (array) {var res = []; for (var I = 0, len = array.length; I)

< len; i++) { var current = array[i]; if (res.indexOf(current) === -1) { res.push(current) } } return res; } console.log(unique(array)); // 排序后去重 var array = [1, 1, '1']; function unique(array) { var res = []; var sortedArray = array.concat().sort(); var seen; for (var i = 0, len = sortedArray.length; i < len; i++) { // 如果是第一个元素或者相邻的元素不相同 if (!i || seen !== sortedArray[i]) { res.push(sortedArray[i]) } seen = sortedArray[i]; } return res; } console.log(unique(array)); // filter实现 var array = [1, 2, 1, 1, '1']; function unique(array) { var res = array.filter(function(item, index, array){ return array.indexOf(item) === index; }) return res; } console.log(unique(array)); // 排序去重 var array = [1, 2, 1, 1, '1']; function unique(array) { return array.concat().sort().filter(function(item, index, array){ return !index || item !== array[index - 1] }) } console.log(unique(array)); // Object键值对 var array = [{value: 1}, {value: 1}, {value: 2}]; function unique(array) { var obj = {}; return array.filter(function(item, index, array){ console.log(typeof item + JSON.stringify(item)) return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true) }) } console.log(unique(array)); // [{value: 1}, {value: 2}] // ES6 Set实现 var unique = (a) =>

[... new Set (a)]

7. What are the benefits of CDN and CDN

CDN:CDN is to distribute the content of the origin server to the node closest to the user, so that the user can get the required content nearby, and improve the response speed and success rate of user access. To solve the access delay caused by distribution, bandwidth and server performance, it is suitable for site acceleration, VOD, LVB and other scenarios.

Benefits:

1. In general, browsers limit the number of concurrent requests (file loading) under a single domain name, usually up to 4, so the fifth add-on will be blocked until one of the previous files is loaded. Because CDN files are stored in different areas (different IP), it is possible for browsers to load all the files needed for the page at the same time (far more than 4), thus increasing the page loading speed.

2, the file may have been loaded and saved to cache some general js libraries or css style libraries, such as jQuery, the use of the network is very common. When a user is browsing one of your web pages, there is a good chance that he has already visited another website through the CDN used on your website. Coincidentally, this site also uses jQuery, so the user's browser already caches the jQuery file (if a file with the same name as IP is cached, the browser will directly use the cache file and will not load it again), so it will not be loaded again. So as to improve the visiting speed of the website indirectly.

3. High efficiency your website will not NB Baidu NB or Google again NB, will it? A good CDNs will provide higher efficiency, lower network latency and lower packet loss rate.

4. Distributed data center if your site is located in Beijing, when a Hong Kong or more distant user visits your site, his data requests are bound to be slow. CDNs, on the other hand, allows the user to load the required files from the nearest node, so it is only natural to increase the loading speed.

5. Usage Analysis in general, CDNs providers (such as Baidu Cloud acceleration) will provide data statistics to learn more about users' access to their websites, and can make timely and appropriate adjustments to their sites according to the statistical data.

6. Effectively prevent websites from being attacked. In general, CDNs providers will also provide website security services.

8. The regular expression matches the mobile number

Function checkPhone () {if (! (/ ^ 1 [34578]\ d {9} $/ .test (phone)) {alert ("Mobile phone number is incorrect, please fill in again"); return false;}}

9. How to improve the loading speed of the first frequency

1.js outreach files are placed at the bottom of body, and css outreach files are placed in head using as many subdomains as possible for 2.http static resources. When the server provides html and http static resources, it is best to turn on gzip 4. 0. Set expires,last-modified 5. 0 in the http headers of resource responses such as js,css,img. Reduce the number of http requests as much as possible. 6.js/css/html/img resources are compressed by 7. With css spirtes, the number of img requests can be reduced by 8. 5%. The large image uses lazyload lazy load 9. 0. Avoid 404 and reduce outreach js 10. Reducing the cookie size can increase the response time by 11. 5%. Reduce the number of dom elements by 12. Create scripts dynamically using asynchronous scripts

10. Browser kernel (rendering engine)

IE/360/ Sogou browser: Trident Chrome/Safari/Opera: WebKit (an open source branch of KHTML) (although we call WebKit the browser kernel, it is not suitable to call the rendering engine directly, because WebKit itself is mainly composed of two engines, one is the rendering engine "WebCore", and the other is the javascript interpretation engine "JSCore", which are derived from KDE's rendering engine KHTML and javascript interpretation engine KJS.) (starting with the release of Chrome 28.0.1469.0 in 13 years, Chrome abandoned the Chromium engine to use the latest Blink engine (based on WebKit2-- Apple's new WebKit engine launched in 2010), Blink streamlined the code, improved the DOM framework, and improved security compared to the previous generation of engines.) (in order to reduce research and development costs, Opera announced in February 2013 that it would abandon Presto and use Chromium engine of WebKit branch as its browser core engine instead of Chrome.) Firefox/SeaMonkey: Gecko

11. Browser rendering process and optimization suggestions

Browser render proc

1) parsing: one is HTML/SVG/XHTML. In fact, Webkit has three C++ classes corresponding to these three types of documents. Parsing these three files results in a DOM Tree. CSS, parsing CSS will generate CSS rule tree. Javascript, scripts, mainly through DOM API and CSSOM API to operate DOM Tree and CSS Rule Tree.

2) rendering: the browser engine constructs Rendering Tree through DOM Tree and CSS Rule Tree. Note: Rendering Tree rendered trees are not the same as DOM trees, because something like Header or display:none does not need to be placed in the rendered tree. The main purpose of CSS's Rule Tree is to match and attach the CSS Rule to each Element on the Rendering Tree. The DOM node. Also known as Frame. Then, calculate the location of each Frame (that is, each Element), which is also called the layout and reflow process.

3) drawing: finally, by calling the API of the operating system Native GUI.

Optimization suggestion

Reduce reflow and repaint

1) Don't change the style of DOM one by one. You might as well pre-define the class of css, and then modify the className of DOM.

2) modify DOM after offline. For example, use the documentFragment object to manipulate DOM in memory and first give the DOM to display:none (once reflow), and then you can change it as you like. For example, modify it 100 times, and then show it. Clone a DOM node into memory, and then change it as much as you want, and then swap it with the online one.

3) do not put the attribute value of the DOM node in a loop as a variable in the loop. Otherwise, this will result in a large number of reading and writing of the properties of this node.

4) use fixed or absoulte position for animated HTML components, use transfoem as much as possible, then modifying their CSS will not reflow 5) use table layout as little as possible. Because a small change may cause the entire table to be rearranged.

twelve。 What's the difference between using link and @ import when importing styles into a page?

(1) link belongs to the XHTML tag, which can also be used to define RSS and rel connection attributes in addition to loading CSS. @ import is provided by CSS and can only be used to load CSS.

(2) when the page is loaded, the link will be loaded at the same time, and the CSS referenced by @ import will wait until the page is loaded.

(3) import is proposed by CSS2.1 and can only be identified above IE5, while link is a XHTML tag and there is no compatibility problem.

(4) link supports using js to control DOM to change styles, but @ import does not.

13. Briefly describe your understanding of the semantics of HTML?

Do the right thing with the right label. Html semantics makes the content of the page structured, easy for browsers and search engines to parse; even without style CSS, it is displayed in a document format and is easy to read; search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO; to make it easier for people who read the source code to block the site and facilitate maintenance and understanding.

14. Could you describe the difference between cookies,sessionStorage and localStorage?

Cookie is the data (usually encrypted) stored on the user's local terminal (Client Side) by a website to identify the user. Cookie data is always carried in a homologous http request (even if it is not needed) and is passed back and forth between the browser and the server. SessionStorage and localStorage do not automatically send data to the server, but only save it locally.

Storage size: the cookie data size cannot exceed 4k. SessionStorage and localStorage also have storage size limits, but they are much larger than cookie, which can reach 5m or more.

Term time: localStorage stores persistent data, and the data will not be lost after the browser is closed unless the data is actively deleted; sessionStorage data is automatically deleted after the current browser window is closed. The cookie expiration time set by cookie is valid until the window or browser is closed

15. What are the shortcomings of iframe?

* iframe will block the Onload event of the main page; * the search engine's search program cannot interpret this kind of page, which is not conducive to SEO; * iframe and the main page sharing connection pool, while browsers have restrictions on connections in the same domain, so it will affect the parallel loading of pages. You need to consider these two disadvantages before using iframe. If you need to use iframe, it's best to dynamically add the value of the src attribute to iframe through javascript, so you can get around the above two problems.

16. What is the webpage CAPTCHA for, and what security problem is it to solve?

A fully automatic public program that distinguishes whether a user is a computer or a human. It can prevent malicious password cracking, ticket brushing and forum flooding, and effectively prevent hackers from constantly trying to crack a specific registered user with a specific program.

17. Introduce the standard CSS box model? What is the difference between the box model of the lower version of IE?

(1) there are two kinds, IE box model and W3C box model; (2) box model: content (content), padding (margin), border (border); and (3) division: the content part of IE calculates border and padding.

18. What are the values of position relative and absolute positioning origin?

Absolute generates an element that is absolutely positioned relative to the first parent element whose value is not static. Fixed (not supported by old IE) generates absolutely positioned elements that are positioned relative to the browser window. Relative generates elements that are relatively positioned, relative to their normal positions. Static default value. Without positioning, the element appears in the normal flow (ignoring the top, bottom, left, right z-index declaration). Inherit specifies that the value of the position attribute is inherited from the parent element.

19. What are the compatibility of browsers you often encounter? The reason, what is the solution, commonly used hack skills?

The png24-bit image appears in the background on the iE6 browser, and the solution is to make it PNG8.

The default browser margin is different from padding. The solution is to add a global * {margin:0;padding:0;} to unify.

IE6 double-spaced bug: after the block attribute tag float, when there is a horizontal margin, the margin display in ie6 is larger than the set one.

Double distance generated by floating ie # box {float:left; width:10px; margin:0 00 100px;}

In this case, IE produces the distance of 20px, and the solution is to add-_ display:inline; to the tag style control of float to convert it to an inline attribute. (_ this symbol is recognized only by ie6)

The way of progressive recognition gradually excludes the local part from the whole.

First of all, the ingenious use of the "\ 9" flag separates the IE browser from all situations. Then, use "+" again to separate IE8 from IE7 and IE6, so that IE8 has been identified independently.

Css .bb {background-color:red;/ all recognition / background-color:#00deff\ 9; / IE6, 7, 8 recognition / + background-color:#a200ff;/IE6, 7 recognition / _ background-color:#1e0bd1;/IE6 recognition /}

Under IE, you can use the method of getting general attributes to get custom attributes, or you can use getAttribute () to obtain custom attributes; under Firefox, you can only use getAttribute () to get custom attributes. Solution: get custom attributes uniformly through getAttribute ().

Under IE, the even object has an XMague attribute, but no pageX,pageY attribute; under Firefox, the event object has a pageX,pageY attribute, but no XMagi y attribute. Solution: (conditional comments) the disadvantage is that additional HTTP requests may be added in IE browsers.

Text smaller than 12px is forced to be displayed according to 12px by default in the Chrome Chinese interface, which can be solved by adding the CSS attribute-webkit-text-size-adjust: none;.

The hover style does not appear after the hyperlink is accessed. The hyperlink style that has been accessed no longer has hover and active. The solution is to change the order of the CSS attributes: L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}

20. What are the ways to optimize and improve the performance of CSS?

Key selector (key selector). The last part of the selector is the key selector (that is, the part used to match the target element); if the rule has an ID selector as its key selector, do not tag the rule. Filter out extraneous rules (so that the style system does not waste time matching them); extract common public styles of the project, enhance reusability, and write components by module; enhance the collaborative development, maintainability and extensibility of the project; use preprocessing tools or build tools (gulp for css syntax checking, automatic prefix, packaging compression, automatic elegant downgrade)

21. How to modify the yellow background of the form automatically after chrome remembers the password?

Input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {background-color: rgb (250,255,189); / * # FAFFBD; * / background-image: none; color: rgb (0,0,0);} at this point, the study of "what are the knowledge points that can not be ignored in front-end development" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.