1. Will the closure of some of the characteristics that have
A: Closures have three features:
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收Note: Closure ( closure) JS is a difficult language, but also its unique characteristics, in many advanced applications must rely on to achieve closure.
Download Link: https://www.yinxiangit.com
2, the definition of their advantages and disadvantages closure
definition: 闭包 当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的变量,且返回的这个函数在外部被执行，就产生了闭包.闭包是一个环境，具体指的就是外部函数--高阶函数。说白了就是一个环境，能够读取其他函数内部的变量。本质上，闭包是将函数内部和函数外部连接起来的桥梁。
Use: 1 reads the internal variable function;.
2. The values of these variables remain in memory and are not automatically cleared after the outer function call.
Advantages: 1: variable long-term presence in the memory;
2: to avoid contamination of global variables;
3: There is a private member;
Characteristics: 1: Function set function;
2: internal function may be used as an external local variable or parameter functions;
3: variables or parameters are not recovered GC garbage collection mechanism;
Disadvantages:
Permanent memory increases memory usage improper use can cause memory leaks
Detailed:
(1) Due to the closure will make the function of the variables are stored in memory, memory consumption is large, it can not be abused closure, otherwise it will cause performance problems webpage in IE may lead to memory leaks. The solution is, before exiting the function will delete all local variables are not used.
(2) closure will function outside the parent, the parent function changes the value of the internal variable. So, if you take the parent function as an object (object) to use, the closure of its public methods (Public Method) as, the internal variable as its private property (private value), then you must be careful not to just change the value of the parent function of internal variables.
3, garbage collection principles of javascript
(1), in the javascriptmiddle, if an object is no longer referenced, the object will be GCrecovered;
(2), if the two objects refer to each other, instead of being 3referenced by, then the two reference each other objects can also be recycled.
4, talk about the three-way handshake tcp transmission of four waving strategy
Three-way handshake TCP connection
- First, with the sender sends a
SYNdata packet to the other side of the sign. - After the receiver receives, with a return
SYN/ACKpacket flag to show convey acknowledgment information. - Finally, the transmitting end band pass a return
ACKpacket flag representative of a "handshake" end.
If some stage inexplicably interrupted during the handshake,TCPthe protocol will again send the same data packets in the same order.
Four-way handshake (waving) disconnect a TCP connection
- The first wave: the initiative sends a close
FIN, to shut down the data transfer to the active side passive side is closed, that is, take the initiative to close the square to tell passive close side: I've made will not give you the data (of course, in the fin package data previously sent, if does not receive a corresponding acknowledgment message ack, still actively closed side retransmits the data), but, this time actively closed side can accept data. - Second wave: passive shutdown has received
FINthe packet, a transmissionACKto the other party, the acknowledgment number for the receipt number+1(theSYNsame as aFINoccupy a sequence number). - Third Wave: Passive sends a close
FIN, to close passive close side to take the initiative to close the side of the data transfer, that is, to tell the initiative to close the party, I also send the data over, will not give you send the data. - The fourth wave: the initiative has received close
FINafter a sendACKto the passive side is closed, the acknowledgment number for the receipt number +1 This completes the four wave.
5, web performance optimization in several ways
Compression and packaging module 1. JavaScript
One of them is that you can get a faster start-up time
of which are used to package different modules packaged together and put the same script file. Less single file parsing HTTP requests and can reduce the loading time. Typically, a tool that can take care of individual packing and compression. webpack is one of them.
2, on-demand load resources
resources (especially pictures) loaded on demand or lazy loading, web application can help you get better performance overall. For a large number of pages used for lazy loading images has three significant benefits.
Reducing the number of concurrent requests to the server (which makes the rest of the page for faster loading times)
Reduce the browser's memory usage (less pictures, less memory)
Reduce the load on the server
The general idea is to load the picture just before resources (such as video) when necessary, such as when first displayed, or be loaded Dendrobium will be displayed. Since the establishment of the station you are closely related with the way this way, lazy loading solution to prevent usually need the help of plug-ins or other extension library to achieve.
3, the cache
Caches component for storing static data that is frequently accessed, facilitates subsequent request for this data may be more responsive to, or requesting more efficient manner. Since the web application is a combination of many removable parts together, many parts of the buffer can be present in the architecture. For example, the buffer may be placed in the dynamic content between the server and client, it can be avoided to reduce the load of public requests the server at the same time improve the response time. Other caches may be placed in the code to optimize the common mode for some scripts to access, there are some cache kennel is placed before the database or run a long process.
4, accelerate database queries using the index
if you need to solve a database problem that it takes a lot of time, it's time to find ways to speed up the database. Each database and data model has its own tradeoffs. Database optimization is a theme in every aspect: data model, database type, specific implementation plan, and so on. Speed may not be so simple. But there's a suggestion that may be helpful for some databases: indexes. The index is a process that is fast access to the data structure of the database created, mapped internally to the key, relevant data can improve the retrieval speed. Most databases support indexes hit. The index is not unique to the document database, including a relational database. To use the index to optimize your query, you will need to look at access mode for applications: What are the most common queries, or perform a search in which key columns, and so on.
5, load balancing
nginx + tomact cluster, practical haship load balancing scheme to avoid sesson lost.
Because the use of load balancing, do not upload files directly uploaded to the tomcat directory, you can be unified into a single file upload via ftp server
6, to optimize the performance of mobile terminals
1, load optimization, reducing HTTP request number because the mobile browser at the same time respond to the request for the four requests (Android support 4, iOS after 5 supports six), so to minimize the number of requests page is first loaded at the same time the number of requests not more than four.
2, image optimization compressed picture, the picture is most accounts the flow of resources, so try to avoid using him to choose the most appropriate format to use (achieved under the premise of demand to the size of the judgment), the right size, and then use the intellectual view of the compression, Srcset simultaneously displayed on demand by the code.
3, css optimization, try to avoid using the style attribute in the HTML tags. (Because the style in the HTML tag will block the rendering of the page), avoid the use of CSS expressions. (Because of its high frequency execution, when the page scroll or move the mouse and they will perform, which will bring significant performance loss)
4, js optimized value is stored with a list of variable length, to avoid every execution to the calculated value. DOM selection and calculation cache, avoiding every Dom choose to be recalculated.
5, GPU acceleration: CSS following attributes (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering, reasonable use.
Note: excessive use of these properties, the phone will lead to excessive power consumption
FIG distal Optimization:
CSS-related issues
7, css selectors What? What attributes can be inherited? How priority algorithm? css3 new pseudo-classes are those?
1.id选择器（2.类选择器（.myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）5.子选择器（ul > li）6.后代选择器（li a）7.通配符选择器（ * ）8.属性选择器（a[rel = "external"]）9.伪类选择器（a: hover, li:nth-child）
Priority:
! Important> id> class> tag important than inline priority, but inline higher than id
Example css3 new pseudo-class:
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。:enabled :disabled 控制表单控件的禁用状态。:checked 单选框或复选框被选中。
What's new css3 there?
css3实现圆角（border-radius），阴影（box-shadow）css3实现圆角（border-radius），阴影（box-shadow）对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的css选择器 多背景 rgba 在css3中唯一引入的伪元素是::selection. 媒体查询，多栏布局 border-image
css3 added in a box model calculation: box-sizing. Box model The default value is content-box, the new values are padding-box and the border-box, several boxes model calculation element width and height differences are as follows: content-box (default)
CSS3 box-sizing effect
Set CSS box model is the standard model or models IE. The width of the standard model includes only content, two models including border and padding IE
box-sizing property may be one of three values:
1, content-box, a default value, border and padding not count the width of
2, padding-box, padding into calculation width
3, border-box, border width and padding into the calculation of
8, talk about the understanding of front-end security, what, how to prevent
Front-end security problems are XSS, CSRF attacks
XSS: XSS
allows users to malicious code into a page to other users to use, you can simply understood as a javascript code injection.
XSS defenses:
1, the filter input and output escaped
2, to avoid the use eval, new Functionor the like execution string, unless the user input and confirmed character string irrelevant
3, the use cookieof the httpOnlyproperty, plus a property of this cookiefield, js is unable to read and write
4, using innerHTML, document.writewhen, if the data is entered by the user, then the object key character needs to be filtered and escaped
CSRF: Cross-site request forgery
fact, some of the submitted acts site, to be used by hackers, to operate when you visit a hacker website, will be operating on other sites
CSRF defenses:
1, to detect http refererwhether the same domain name
2, to avoid login sessiontime is stored in the client
3, the key codes or requesting to use tokenthe mechanism
There are some other HTTP hijacking attacks, hijacking interface operation
9、ES6、 let、const
the let
the let is perfect var
1, let the variable declaration have block-level scope, let statement still retained the upgrade features, but not blindly upgrade.
2, let's declare a global variable is not a property of the global object. Not by window.变量名way of access
3, shaped like for (let x…)loops are at each iteration xto create a new binding
4, let the variable declaration until the control flow reaches the line of code that defined variables will be loaded, so use before reaching the variable will trigger wrong
const
define constant values, can not be reassigned, but if the value is an object, the object may change in property values
const OBJ = {"a":1, "b":2};OBJ.a = 3;OBJ = {};// 重新赋值，报错！console.log(OBJ.a); // 3
10, deep copy and shallow copy
1. What is the deep copy and shallow copy:
shallow copy copy only a pointer to an object, rather than copying the object itself, or the old and new objects share the same memory (memory area is not isolated). But deep copy would otherwise create an identical objects, the new object with the original object is not shared memory (memory area isolation), modify the new object is not to change the original object. On the multilayer object shallow copy only one copy
Shallow copy Example:
var Chinese = {nation:'中国'};var Doctor ={career:'工程师'}function extendCopy(p) {var c = {};for (var i in p) {c[i] = p[i];}return c;}var Doctor = extendCopy(Chinese);Doctor.career = '工程师';alert(Doctor.nation); // 中国
Deep copy Example:
function deepCopy(p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c;}Deep copy implementation:
- Manual copy mode, such as the above code, the disadvantage is
- Object.assign, ES6 new functions that can help us achieve the same with the above functions.
-
var obj1 = { a: 10, b: 20, c: 30 };var obj2 = Object.assign({}, obj1);obj2.b = 100;console.log(obj1);// { a: 10, b: 20, c: 30 } <-- 沒被改到console.log(obj2);// { a: 10, b: 100, c: 30 }
JSON turn to turn back into
JSON.stringify with the object into a string, the string JSON.parse then transformed into a new object. Cons: Only objects can be converted into JSON format so it can be used as function can not turn into JSON.
- jquery, it has provided a $ .extend can be used for Deep Copy.
- lodash, also available _.cloneDeep used for Deep Copy.
- Recursive deep copy
function clone( o ) {var temp = {};for( var k in o ) {if( typeof o[ k ] == 'object' ){temp[ k ] = clone( o[ k ] );