Some thoughts on JavaScript optimization and specification

Source: Internet
Author: User

variable ...

1. Only one type of data is stored in a variable,
2. Minimize the dependency on implicit conversions, which can enhance the readability of the program and will not be confusing in the future.
3. Using the Hungarian nomenclature,
4. When using local variables, remember to add Var to declare, otherwise it will conflict with the global variable.

site performance optimization aspects

1. Before working on the current DOM, do as much preparation as possible, ensuring that n times are created and 1 writes are made.

2. Before manipulating the DOM, remove the elements to be manipulated from the current DOM structure:

    • Real-world deletions are achieved through removechild () or replacechild ().
    • Set the display style for this element to "none".

After the modification operation is complete, the above process is reversed and the 2nd method is recommended.

3.CSS part
Another case that often causes reflux is to modify the appearance of elements through the style attribute, such as Element.style.backgroundColor = "Blue";
Each time you modify the style property of an element, you will definitely trigger the reflow operation, to resolve this problem:

    • The way to replace style.xxx=xxx with change classname.
    • Use Style.csstext = "; write style once.
    • Avoid setting too many inline styles
    • Add outside elements of the structure as far as possible to set their position to fixed or absolute
    • Avoid using tables to lay out
    • Avoid using JavaScript expressions in CSS (IE only)

4. Cache the obtained DOM data. This approach is especially important for obtaining properties that trigger reflux operations, such as Offsetwidth.

5. When working with Htmlcollection objects, the number of accesses should be minimized as much as possible, so you can cache the length property in a local variable, which can greatly improve the efficiency of the loop.


one, avoid large string literal object manipulation, such as String. Lenth, try to convert to new string (string) before Operation
second, the use of regular expressions to quickly grasp the ECMAScript regular expression in the operation of searching and replacing characters.
reduce statements, implement if else expressions with operator precedence, use ternary expressions, use continuous expressions (see case, lose program readability)
Iv. merging css,js files into one file (non-BT enthusiasts or don't play with ^_^)
v. Avoid memory leaks in JavaScript event bindings "These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE ' s DOM (Document Object model). " Microsoft Gpde Team Blog
vi. using Web workers Technology (HTML5-enabled browsers) Web workers provides JavaScript with a way to run in a background process that can process tasks without affecting the user interface.
Vii. y!14 (rules for faster-loading Web Sites)
* Rule 1-make fewer HTTP requests
* Rule 2-use a Content Delivery Network (server side)
* Rule 3-add an Expires Header (server side)
* Rule 4-gzip components (server side)
* Rule 5-put stylesheets at the Top
* Rule 6-put Scripts at the Bottom
* Rule 7-avoid CSS Expressions
* Rule 8-make JavaScript and CSS External
* Rule 9-reduce DNS lookups (server side)
* Rule 10-minify JavaScript
* Rule 11-avoid redirects (server side)
* Rule 12-remove Duplicate Scripts
* Rule 13-configure etags (server side)
* Rule 14-make AJAX cacheable
* Rule 15-use Iframes wisely
viii. Microsoft's early DHTML optimization recommendations * Use array push instead of string accumulation

operation of the AND operator of JavaScript

The operands of a logical AND operation can be of any type, not just a Boolean value, and if an operand is not the original Boolean value, the logical AND operation does not necessarily return a Boolean value
1) If one operand is an object and the other is a Boolean value, the object is returned.
2) If two operands are objects, the second object is returned.
3) If an operand is null, returns NULL.
4) If an operand is Nan, return nan.
5) If an operand is undefined, an error occurs.
6) Returns a Boolean value if all two operands are of type Boolean

JavaScript trivia point ...

1, = = and = = = The difference: "= =" only requires equal value; "= = =" Requires both values and types to be equal
2. The Isfinite () function is used to check if the parameter is infinite, and if number is a finite digit (or convertible to a finite number), it returns true. Otherwise, if number is NaN (not a number), or positive, negative infinity, then false is returned.
3, judge the null value with val = = = NULL

4, | | and ~ ~ is a good example of using both to convert a floating point into an integer and to be more efficient than a similar parseint,math.round. By the way,
//!! Convert a value to a Boolean value conveniently and quickly!! Window===true.

var foo = (12.4/4.13) | 0; // result is 3 var bar = ~ ~ (12.4/4.13); // result is 3

5, do not declare the value of the third variable Exchange

var a = 1, b = 2; A = [B, b = a][0];

6, for the traditional if statement, if the execution body code more than 1 statements, you need to add curly braces, and the use of a comma expression, you can execute arbitrary code without curly braces.

if (conditoin) alert (1), alert (2), Console.log (3);

7. The magical of &&

var day = (new Date). GetDay () = = = 0; // Traditional IF statements if (day) {    alert (' Today is sunday! ' );}; // use logic and replace ifday && alert (' Today is sunday! ');

8. Prohibit others from loading your page with an IFRAME  

if (window.location! = window.parent.location) window.parent.location = window.location;

Some thoughts on JavaScript optimization and specification

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.