Technical topics Collection and collation

1, (node) how to solve the uncaught exception in node. js?

A: Synchronous exception handling can be captured simply by using Try...catch, and asynchronous exception captures can take advantage of built-in function Process.on ("uncayghtexception") and can only be returned with a timeout.

Method: Process.on ("Uncaughtexception", function (Err) {

Console.log (ERR);

});

2. The result of Array.isarray (Array.prototype) is: (B)

A:true B:false C:error D:other

Note: Array.isarray (), is used to determine whether a value is an array, the implementation principle is:

if (! Array.isarray) {

Array.isarray=function (ARG) {

return Object.prototype.toString.call (arg) = = = "[Object Array]";

}

}

The lesser known is that Array.prototype is an array, and therefore, returns true;

3, ' 7 ' +2 ' 7 '-2 results were: 72 and 5;

4. For example, the concept and use of closure in JS:

Closures, the official explanation for closures is that an expression (usually a function) that has multiple variables and an environment that binds them is also part of the expression. Features of closures:

1): As a reference to a function variable, when the function returns, it is in the active state.

2): A closure is when a function returns, a stack that does not release resources;

To put it simply: JS allows the use of intrinsic functions---that is, function definitions and function expressions in the function body of another function. Furthermore, these intrinsics can access all the local variables, arguments, and other intrinsics declared in the external function in which they are located. When one of these intrinsics is called outside the outer function that contains them, a closure is formed.

Second, the closure of the common wording and usage

1) var circle=function () {

var obj=new Object ();

Obj. pi=3.14159;

Obj.area=function (R) {

return this. Pi*r*r;

}

return obj;

}

var c=new Circle ();

Alert (C.area (1.0));//Declare a variable and assign a function as a value to the variable.

2), Var circle={

"PI": 3.14159;

"Area": function (r) {

return this. Pi*r*r;

}

}

Alert (Circle.area (1.0)); The method uses the most;

About prototype:

Object methods defined using the prototype property are non-static methods and can only be used after instantiation! Its method can be used internally to apply other properties in the object itself.

Object methods that are not defined using the Protorype attribute are static methods and can only be called directly with the class name! In addition, this variable cannot be used in this static method to invoke other properties of the object.

Object has no prototype attribute, function only;

Third, the use of closures:

1) anonymous self-executing function

The function needs to be executed only once, and the internal variables need not be maintained, such as the initialization of the UI, then we can use closures:

var data={

Table:[],

tree:{}

};

(function (DM) {

for (Var i=0;i<dm.table.rows;i++) {

var row=dm.table.rows[i];

for (Var j=0;j<row.cells;j++) {

Drawcell (I,J);

}

}

}) (data);

When the anonymous function is executed, the resource is released immediately, and the key is not to pollute the global object.

2), result cache:

To store the calculated values:

3), Package:

var person=function () {

var name= "Default";

return{

Getname:function () {

return name;

},

Setname:function (newName) {

Name=newname;

}

}

}();

Print (person.name);//Direct access, the result is undefined;

Print (Person.getname ());//default;

Person.setname ("Zhazhuchi");

Print (Person.getname ());//zhazhuchi;

4), implementing Classes and inheritance

function person () {

var name= "Default";

return{

Getname:function () {

return name;//closures

}

Setname:function (newName) {

name=newname;//Closure Package

}

}

}

var p=new person ();

P.setname (' Tom ');

Alert (P.getname ());

var jack=function () {};

Jack.prototype=new person ();//Inherit the attributes and methods in person;

Jack.prototype.say=function () {//Add your own method;

Alert ("Hello,my name is Jack");

};

var j=new Jack ();

J.setname ("Jack");

J.say ();

Alert (J.getname ());//jack;

A closed-bag problem that is not understood: http://www.jb51.net/article/49127.htm;

5, the Site resources optimization, reduce load Time method: (Supplement: can use YSlow (official website: http://developer.yahoo.com/yslow/) (Tutorial: http://devework.com/yslow.html) Yahoo's web Scoring system detects the Web site's various parameters that affect page loading speed. You can also use the Google official page to load speed detection tools Pagespeed Insights (: http://devework.com/google-chrome-pagespeed-insights.html)

1), merge JS files and CSS

The JS code and CSS styles are merged into a shared file, so that not only simplifies the code, and in the execution of the JS file, if the JS file is more, you need to make multiple "get" requests, to extend the loading speed, the JS files merged together, naturally reduced the number of GET requests, Increased speed of acceleration.

2), Sprite picture technology

Sprite is a Web page image application processing, it is a page involved in all the scattered images are included in a large map, and then use CSS technology to show. In this way, when the page is accessed, the loaded picture will not be as a picture of a slow display, can reduce the entire page image size, and the use of csssprite can be very good to reduce the Web page HTTP requests, which greatly improve the performance of the page. Csssprites in the domestic many people called the CSS Wizard, very early on, in a lot of large sites are useful to, especially some of the icons of all the existing pages with more, very good speed to increase loading.

3), compressed text and pictures

Compression technology such as gzip can effectively reduce the time of page loading. including HTML, XML, Json,js, CSS, and so on, the compression rate can be in the size of about 70%. Text compression used more, generally directly in the space to open the line, and the image compression is more arbitrary, many are directly uploaded, in fact, there is a lot of compression space.

4), delay the display of content outside the visible area

In order to avoid page distortion, you can use placeholder tags to make the correct height and width to ensure that users can see the visible areas of the Web page more quickly to delay loading or to show content outside the visible area. such as WP Jqueryimage LAZYLOAD plug-in can be in the user stay in the first screen, do not load any of the first screen below the picture information, only when the user mouse scroll down, the pictures began to load. This obviously increases the loading speed of the visible area and improves the user experience.

5), ensure that the function image first load

6), re-layout call-to-action button

Skip the overall load speed of the Web page, the speed has not changed, just let some behavior button advance, Call-to-action button general custom design at the bottom of the page.

7), Picture format optimization

Save the picture in the best format:

There are three basic formats in the Web page image: gif/jpg/png, what format should be used without fixed unified requirements, such as GIF format for small icons, color comparison single, animated pictures, jpg suitable for higher pixel requirements of the picture, and PNG format can be suitable for transparent bottom picture, or according to the specific requirements to choose. In addition, simple images tend to be smaller in PNG format, while more complex images tend to be jpeg better. Also depending on the quality of the different degrees of the situation.

8), using progeressive JPEGs

The Progressivejpegs image is a special variant of the JPEG format called "Advanced JPEG". When you create an advanced JPEG file, the data is arranged like this: when the image is loaded, it begins to show only a blurred image, and as the data is loaded, the image becomes clearer. It is equivalent to a picture in an interlaced GIF format.

9), Thin code

This is the most direct method, is also used more, the Web page code to thin, delete unnecessary sink redundant code, such as unnecessary space, line breaks, comments, etc., including the JS code in the useless code also need to clear.

10), lazy loading and execution of non-essential scripts

There are many scripts in the Web page that do not need to be executed until the page is fully loaded, and you can defer loading and executing nonessential scripts. These scripts can be executed after the OnLoad event to avoid affecting the rendering of important content on the Web page. These scripts are often third-party scripts, such as comments, ads, can only be recommended, Baidu Cloud, share, and so on, which can be completed after the topic loaded and then executed.

11), using Ajax

Ajax is a web development technique that creates interactive Web applications. Ajax enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.

12), automated page performance optimization

With the help of website speed-up tools, such as: Radwarefastview;

13), redirect minimized

Avoid using redirects

14). Using CDN

CDN: (content delivery Network) namely: Contents distribution Networks: The basic idea is to avoid the Internet as far as possible to affect the speed and stability of data transmission bottlenecks and links, is the content transmission faster and more stable. A smart virtual network based on the existing Internet, which is composed of node servers placed on the network, enables the CDN system to re-direct the user's request to the service node closest to the user based on the network traffic and the connection of each node, the load condition and the distance and response time of the user. The goal is to enable users to get the content they need, solve the congestion of Internet networks, and improve the responsiveness of users to websites.

15), using the cache system

Reduce the number of accesses to the database, consider using a cache system like memcache;

Memcache is a distributed cache system developed by LiveJournal's Brad Fitzpatrick, but is currently used by many Web sites to improve the speed of access to the site, especially for large, frequently accessed sites that require frequent access to the database.

Its workflow is: first check whether the client's request data in the memcached, if any, directly return the request data, no longer do anything to the database, if the requested data is not in memcached, go to the database, the data obtained from the database to the client, At the same time, the data is cached to memcached, and each time the database is updated, the data in the memcached is updated to ensure consistency, and LRU (Least recently used, least recently used) is used when the allocated memcached memory space is exhausted. Policy Plus expiry expiration policy, the failed data is replaced first, and then replaced with the most recently unused data.

16), simplifying the DOM

17), reduce the size of cookies

18), add cycle head

The period header is: the File shelf life. No expiration date directly from the local call, expired after the update;

This practice is to add code directly to the end of the. htaccess file at the root of the Web site (only the Linux hosts have. htaccess) where axxxxxx is the time, in seconds.

The code is as follows:

<ifmodule mod_expires.c> expiresactive on ExpiresDefault A3600 expiresbytype image/gif A2592000 ExpiresByType Image/png A2592000 expiresbytype image/jpeg A2592000 expiresbytype text/plain A604800 expiresbytype application/ X-shockwave-flash A2592000 expiresbytype video/x-flv A2592000 expiresbytype application/pdf A2592000 expiresbytype text /html A600 expiresbytype image/x-icon A2592000 expiresbytype application/javascript A604800 expiresbytype text/css A604800 </IfModule>

19), configure the entity label Settings ETag

Practice: Add this sentence in the. htaccess:

Fileetag None

6. Is the responsive layout the same as an adaptive layout? If not the same, what is the difference?

Responsive and adaptive principles are similar, are detection equipment, according to different devices using different CSS, and CSS are used as a percentage, rather than fixed width, the difference is that the response template on different devices appear to be not the same, will change as the device changes the display style, and adaptive will not , all the equipment seems to be a set of templates, but the length or the picture is smaller, not according to the device using different display style, flow is the use of some settings, when the width is greater than how much how to show, less than how to show, and show the way to the water, part of the load, Static is the fixed width of the use.
7, explain the usefulness of using *{box-sizing:border-box} and the benefits of using it? 
 First summarizes the box model-related issues: CSS box model is divided into two factions: the school is the standard model of the Internet, the school is the traditional model of IE. It is necessary to be clear that they are all models for calculating the dimensions of the elements, specifically the width,height,padding,border of the elements and the actual dimensions of the elements, and the difference is that the computational methods of the two are inconsistent: 
 Box model: 
 Outer box Size: Element space Height: content height+padding+border+margin 
 Element space width: content width+padding+border+margin 
 Inner box size: element height: Content height+padding+border 
 Element width: content width+padding+border 
 ie traditional box model: 
 Outer box size: Element space Height: Content h Eight+margin (height contains the element content width, border width, padding width) 
 element space Height: Content width+margin (width contains the contents of the element, border width, padding width) 
 Inner box size: element Height: Content height (height includes element contents width, border width, padding width) 
 Element width: Content width containing the element contents, width of the border, width of padding 
 New properties in CSS3: Content-box and Border-box two values, 
 Content-box is the css2.1-defined width height behavior, the width and height are applied to the element's content box, and the inner margin and border of the element are drawn outside the width and height. The 
 Border-box is the width and height of the element that determines the bounding box of the element, that is, any padding and borders specified for the element will be drawn within the set width and height, and the width and height of the content can be obtained by subtracting the border and padding from the set width and height respectively. It's a weird pattern, actually. 
 Padding-box: Padding is counted into width. 
 
 Summary: 

Content-box, the width and height that we define in CSS are the widths and heights of the content, with padding, border, and margin added to the specific width.
Border-box, the width and height that we define in CSS are the last to be width, and the content is to subtract padding, border, margin.

The advantage of setting to Border-box is that the order of the pages will not be scrambled and the style must not be rewritten;
When used:-webkit-box-sizing:
      -mox-box-sizing:
         Box-sizing:


Not finished ...

Technical topics Collection and collation