JavaScript小知识汇总
(本篇内容全部来自w3school)
操作符
===表示值和类型是否都相等
数据类型
undefined
如果一个变量声明了但是没赋值,则该变量的值就是 undefined,类型也是 undefined .
var car;// Value is undefined, type is undefined
null
null表示nothing,通常被认为变量不存在的意思。
但是,在JS中,null的类型是object。
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;// Now value is null, but type is still an object
可以使用undefined将值设为空。
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = undefined; // Now both value and type is undefined
null与undefined的不同
typeof undefined // undefined
typeof null// object
null === undefined // false
null == undefined // true
原始数据类型
typeof操作符会返回4种原始类型:
- string
- number
- boolean
- undefined
变量作用域
JS有两种类型的作用域:
Local Scope(本地作用域)
Global Scope(全局作用域)
在函数内声明的变量,就是本地类型。只能被本函数访问。
在函数外声明的变量,就是全局类型。在页面的所有脚本和函数都能访问。
自动全局(Automatically Global)
如果在一个函数中,对一个未声明的变量赋值,则该变量自动转为全局变量。
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
大多数浏览器都支持”Strict Mode”,该模式下,不会进行自动转换为全局变量的操作。
详见JS Scope
字符串
长字符串换行
因为有的浏览器可能不支持,所以不推荐反斜杠的方式:
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
最好使用+号的方式:
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
字符串对象
通常,字符串是个原始类型,但也可以以对象的方式创建:
var x = "John";
var y = new String("John");
// typeof x will return string
// typeof y will return object
不推荐以对象的方式创建字符串,这样会拖慢执行速度,同时也会造成其他后果:
var x = "John";
var y = new String("John");
// (x == y) is true because x and y have equal values
// (x === y) is false because x and y have different types (string and object)
或者更糟:
var x = new String("John");
var y = new String("John");
// (x == y) is false because x and y are different objects
// (x === y) is false because x and y are different objects
JS String Methods
slice()
slice()可以截取字符串的一部分,返回一个新字符串。
两个参数:第一个是其实位置;第二个是结束位置。
如果参数是负数,则位置从末尾算起。
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12, -6);
Banana
如果省略第二个参数,则表示从起始位置到结束。
substring()
substring()与slice()类似,不同的是不接受负数。
substr()
substr()与slice()类似,不同的是第二个参数表示长度。
replace()
replace()函数将字符串的特定字符替换,并返回一个新字符串。
replace()函数并不改变原字符串。
默认情况,replace函数是大小写敏感的,并且只替换第一个匹配项。可以使用正则表达式来解决这个问题。
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3Schools");
注意:正则表达式是没有引号的。
trim()
trim()会移除字符串两边的空格。
在IE 8及更低版本的IE中不被支持。
可以使用正则表达式:
var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
也可以通过再String.prototype中增加trim函数:
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = " Hello World! ";
alert(str.trim());
charAt()
charAt函数返指定位置的字符。
charCodeAt()
charCodeAt函数返回指定位置的unicode编码。
像使用数组一样访问字符串是不安全的
原因主要是不安全并且不可预测的:
- 并不是所有浏览器都支持。(如IE5,IE6,IE7)
- 是字符串看起来像数组,但实际上它们不是。
- str[0]=”H”并不会报错,但实际上并不会起作用。
split()
split函数可以将字符串转为数组。
var txt = "Hello"; // String
txt.split(""); // Split in characters
toUpperCase()
将字符串转为大写。
toLowerCase()
将字符串转为小写。
数字类型
JS的数字都是64位的浮点型。
JS没有像其它语言一样,定了整型、短整型、长整型等。
JS数字都是按IEEE 754标准,存储未双精度浮点类型。
存储格式:
Value (aka Fraction/Mantissa) Exponent Sign
52 bits (0 - 51) 11 bits (52 - 62) 1 bit (63)
精度
整型(非科学表示法)最高到15位数字。
var x = 999999999999999; // x will be 999999999999999
var y = 9999999999999999; // y will be 10000000000000000
小树最高到17位,但是浮点型不是100%精确。
var x = 0.2 + 0.1; // x will be 0.30000000000000004
To solve the problem above, it helps to multiply and divide:
var x = (0.2 * 10 + 0.1 * 10) / 10; // x will be 0.3
数字字符串
JS会尝试在一个数字操作中将数字字符串转换为数字。
var x = "100";
var y = "10";
var z = x / y; // z will be 10
但是+号除外:
var x = "100";
var y = "10";
var z = x + y; // z will not be 110 (It will be 10010)
NaN
NaN是JS的保留字,表示非法数字。
当操作非数字的字符串是,会返回NaN。(Not a Number):
var x = 100 / "Apple"; // x will be NaN (Not a Number)
isNaN(x); // returns true because x is Not a Number
var x = NaN;
var y = 5;
var z = x + y; // z will be NaN
var x = NaN;
var y = "5";
var z = x + y; // z will be NaN5
typeof NaN; // returns "number"
Infinity
Infinity或-Infinity表示超出最大范围的数字。
var x = 2 / 0; // x will be Infinity
var y = -2 / 0; // y will be -Infinity
typeof Infinity; // returns "number"
Hexadeximal
以0x开头的数字被认为是16进制。
var x = 0xFF; // x will be 255
默认,JS以10进制显示数字。
var myNumber = 32;
myNumber.toString(10); // returns 32
myNumber.toString(32); // returns 10
myNumber.toString(16); // returns 20
myNumber.toString(8); // returns 40
myNumber.toString(2); // returns 100000
数字对象
可以使用new创建数字对象:
var x = 123;
var y = new Number(123);
// typeof x returns number
// typeof y returns object
不推荐使用数字对象:
var x = 500;
var y = new Number(500);
// (x == y) is true because x and y have equal values
var x = 500;
var y = new Number(500);
// (x === y) is false because x and y have different types
var x = new Number(500);
var y = new Number(500);
// (x == y) is false because objects cannot be compared
JS数字操作函数
toExponential()
toExponential函数返回数字的指数形式的字符串。
var x = 9.656;
x.toExponential(2); // returns 9.66e+0
x.toExponential(4); // returns 9.6560e+0
x.toExponential(6); // returns 9.656000e+0
toFixed()
toFixed返回指定小数位数的小数。
var x = 9.656;
x.toFixed(0); // returns 10
x.toFixed(2); // returns 9.66
x.toFixed(4); // returns 9.6560
x.toFixed(6); // returns 9.656000
toPrecision()
toPrecision返回指定位数的数字。
var x = 9.656;
x.toPrecision();// returns 9.656
x.toPrecision(2); // returns 9.7
x.toPrecision(4); // returns 9.656
x.toPrecision(6); // returns 9.65600
valueOf()
在JS中,数字可以是原始类型(typeof = number),也可以是对象类型(typeof = object).valueOf用于将数字对象转换为原始类型。
JS的所有数据类型都有valueOf和toString函数。
将变量转换为数字
有三个函数可以将变量转换为数字:
- Number()
- parseInt()
- parseFloat()
Number()
Number()用于将变量转换为数字。
Number(true); // returns 1
Number(false); // returns 0
Number("10"); // returns 10
Number(" 10");// returns 10
Number("10 ");// returns 10
Number("10 20"); // returns NaN
Number("John");// returns NaN
If the number cannot be converted, NaN (Not a Number) is returned.
Number()也可以转换Date类型的数据。
Number(new Date("2017-09-30"));// returns 1506729600000
The Number() method above returns the number of milliseconds since 1.1.1970.
parseInt()
parseInt解析字符串,并返回一个数字。可以空格分割,只返回第一个数字:
parseInt("10"); // returns 10
parseInt("10.33"); // returns 10
parseInt("10 20 30"); // returns 10
parseInt("10 years"); // returns 10
parseInt("years 10"); // returns NaN
parseFloat()
parseFloat()解析字符串,并返回数字。可以空格分割,只返回第一个数字:
parseFloat("10");// returns 10
parseFloat("10.33"); // returns 10.33
parseFloat("10 20 30"); // returns 10
parseFloat("10 years"); // returns 10
parseFloat("years 10"); // returns NaN
Number的属性
Number.MAX_VALUE 返回最大数值
Number.Min_VALUE 返回最小数值
Number.NEGATIVE_INFINITY 表示负无限
Number.NaN 表示非数字
Number.POSTIVE_INFINITY 表示正无限
不能在变量上使用这些属性,如x.MAX_VALUE。
数组
数组的typeof类型是object。
可以使用Array.isArray()判断是否数组。
也可以自己实现一个isArray函数。
function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}
也可以使用instanceof来判断。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true
不要使用new创建数组,可以使用[]代替。
var points = new Array(); // Bad
var points = []; // Good
toString()
可以将数组转换为逗号分割的字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
Banana,Orange,Apple,Mango
join()
join函数将数组所有元素组成一个字符串。跟toString类似,但是可以自己指定分隔符。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
Banana * Orange * Apple * Mango
pop
pop函数将数组的最后一个元素移除。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // the value of x is "Mango"
push
push将一个新元素加入到数组中,并且返回数组长度。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi"); // the value of x is 5
shift
shift函数与pop类似,不同的是移除第一个元素而不是最后一个。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // Returns "Banana"
unshift
unshift函数会在数组头部增加一个新元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");// Returns 5
change elements
使用数组下标索引,修改数组中的值。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";// Changes the first element of fruits to "Kiwi"
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi"; // Appends "Kiwi" to fruit
delete elements
可以使用delete关键字删除数组中的某个元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // Changes the first element in fruits to undefined
使用delete会在数组中留下一个未定义的值,应该使用pop或shift替代。
splice
splice可以向数组中增加新的元素。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
第一个参数表示需要添加元素的起始位置;
第二个参数表示有几个元素需要移除。
剩下的参数表示需要添加的数组元素。
也可以使用splice移除数组元素。(除了前面两个元素,后面不传需要增加的元素即可)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);// Removes the first element of fruits
concat
concat可以将已有的数组合并并返回一个新数组。
concat不会改变原数组。
var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // Concatenates arr1 with arr2 and arr3
slice
slice函数将原数组切成一个新数组。
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
第一个参数为起始位置。
第二个参数为结束位置,并不包括该位置。如果不传第二个参数,则截取剩下所有元素。
字符串自动转换
在需要原始类型的地方,数组会自动转换为字符串。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
sort
sort函数按字符序排序数组。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();// Sorts the elements of fruits
reverse
reverse方法用于将数组中的元素调转顺序。
数字排序
默认情况下,sort函数将元素按照字符串类型排列。
对于字符串类型可以正常运行,比如“apple”在“banbana”前面;但是对于数字,“25”比“100”大,因为“2”比“1”大。所以,对于数字类型的数组,sort函数产生不正确的结果。
可以使用自定义函数排序:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
随机排序:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
Math.max
可以使用Math.max找出数组中的最大值。
function myArrayMax(arr) {
return Math.max.apply(null, arr);
}
也可以使用Math.min找出数组中的最小值。
Array.forEach
forEach函数对于数组中的每个元素都调用一次函数。
var txt = "";
var numbers = [4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt = txt + item + "<br>";
}
注意函数有三个参数,元素值、索引、数组本身。
Array.Map
map函数对数组的每个元素执行一次函数,并返回一个新数组。
var numbers1 = [4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);
function myFunction(value, index, array) {
return val * 2;
}
map函数对于数组中没有值的元素不会执行函数。
map函数不会改变原数组的值。
Array.filter
filter函数筛选原数组的值,并返回一个新数组。
var numbers = [4, 9, 16, 25];
var over18 = numbers.filter(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Array.reduce
reduce函数将数组返回一个值。
如数组求和:
var numbers1 = [4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
total参数是指初始值或者前一个返回值。
Array.every
every函数测试是否所有元素都满足条件。
比如检查所有数字是否大于某个值:
var numbers = [4, 9, 16, 25, 29];
var allOver18 = numbers.every(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
Array.indexOf
在数组中查找某个元素第一次匹配的地方并返回索引。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
还可以在后面传起始位置参数。
Array.lastIndexOf
查找某个元素最后一次匹配的地方,并返回索引。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
还可以在后面传起始位置参数。
JS Math
Math.PI
返回PI值。
Math.PI;// returns 3.141592653589793
Math.round
round函数对小数进行四舍五入。
Math.round(4.7);// returns 5
Math.round(4.4);// returns 4
Math.pow
pow函数返回x的y次幂。
Math.pow(8, 2); // returns 64
Math.sqrt
sqrt函数返回参数的平方根。
Math.sqrt(64); // returns 8
Math.abs
abs函数返回参数的绝对值。
Math.abs(-4.7); // returns 4.7
Math.ceil
ceil函数将小数向上取整。
Math.ceil(4.4); // returns 5
Math.floor
floor函数将小数向下取整。
Math.floor(4.7);// returns 4
Math.sin
sin函数返回参数的正弦值。
如果要重角度替代弧度,需要将角度转为弧度。
Angle in radians = Angle in degrees x PI / 180.
Math.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees)
Math.cos
返回参数的余弦值。(同sin)
Math.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees)
Math.min
返回数组的最小值。
Math.max
返回数组的最大值。
Math.random
random产生[0,1)之间的随机数。
Math.random(); // returns a random number
Math属性
Math.E// returns Euler's number
Math.PI // returns PI
Math.SQRT2// returns the square root of 2
Math.SQRT1_2 // returns the square root of 1/2
Math.LN2 // returns the natural logarithm of 2
Math.LN10 // returns the natural logarithm of 10
Math.LOG2E// returns base 2 logarithm of E
Math.LOG10E // returns base 10 logarithm of E
详见JS Math
随机数
Math.random返回[0,1)之间的随机数。
返回其他大小的整型:
Math.floor(Math.random() * 10); // returns a random integer from 0 to 9
Math.floor(Math.random() * 11); // returns a random integer from 0 to 10
可以定义随机函数[x,y):
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
也可以定义随机函数[x,y]:
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
布尔值
var x = 0;
Boolean(x); // returns false
var x = -0;
Boolean(x); // returns false
var x = "";
Boolean(x); // returns false
//undefined
var x;
Boolean(x); // returns false
var x = null;
Boolean(x); // returns false
//NaN
var x = 10 / "H";
Boolean(x); // returns false
var x = new Boolean(false);
var y = new Boolean(false);
// (x == y) is false because objects cannot be compared
跳转
continue关键字,无论带不带label,都会跳过当前循环。
The continue statement (with or without a label reference) can only be used to skip one loop iteration.
break关键字,如果不带label,会跳出当前的循环或switch。
The break statement, without a label reference, can only be used to jump out of a loop or a switch.
break关键字,带label,会跳出当前代码块。代码块由{}包裹。
With a label reference, the break statement can be used to jump out of any code block.
详见JS Break
类型转换
JS有5中不同的数据类型:
- string
- number
- boolean
- object
- function
对象类型有三种:
- Object
- Date
- Array
还有两种不包含值的类型:
- null
- undefined
构造函数原原型
"John".constructor// Returns function String() {[native code]}
(3.14).constructor// Returns function Number() {[native code]}
false.constructor // Returns function Boolean() {[native code]}
[1,2,3,4].constructor // Returns function Array() {[native code]}
{name:'John',age:34}.constructor // Returns function Object() {[native code]}
new Date().constructor// Returns function Date(){[native code]}
function () {}.constructor// Returns function Function(){[native code]}
可以用函数原型判断是否数组:
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
也可以直接判断该对象是不是数组:
function isArray(myArray) {
return myArray.constructor === Array;
}
Unary + Operator
单+符号可以将变量转换为数字。
var y = "5"; // y is a string
var x = + y; // x is a number
自动转换
5 + null// returns 5 because null is converted to 0
"5" + null // returns "5null" because null is converted to "null"
"5" + 2 // returns "52" because 2 is converted to "2"
"5" - 2 // returns 3 because "5" is converted to 5
"5" * "2" // returns 10because "5" and "2" are converted to 5 and 2
正则表达式
格式: /pattern/modifiers;
正则表达式通常用于字符串的两个函数中:search和replace。
var str = "Visit W3Schools";
var n = str.search(/w3schools/i);
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");
修饰符(modifiers):
- i 大小写不敏感
- g 全局搜索,而不是在第一个匹配的地方停止
- m 多行搜索
模式:
- [abc] 查找括号中的任一字符
- [0-9] 查找括号中的任一数字
- (x|y) 查找|号分割的任意字符
元字符:
- \d 数字
- \s 空格符号
- \b 匹配词的开头和结尾
- \uxxxx 查找16进制表示的unicode字符。
数量符号:
- n+ 表示匹配一个或多个字符n
- n* 表示匹配0个或多个字符n
- n? 表示匹配0个或1个字符n
test
test函数查找一个字符串或模式,返回true或false。
var patt = /e/;
patt.test("The best things in life are free!");
true
exec
exec查找一个字符串或模式,并返回找到的字符串。
/e/.exec("The best things in life are free!");
e
异常
使用try catch捕获异常。
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
throw
throw可以抛出一个自定义异常。
throw "Too big";// throw a text
throw 500; // throw a number
finally
finally块,不论代码执行结果如何,finally块中的代码都会执行。
Error Object
error对象有两个属性:
- name 错误的名称
- message 错误的信息
Strict Mode
在脚本或者函数起始处,使用”use strict”声明,会使用strict mode,比如强制变量声明、不允许使用关键字为变量名等。
"use strict";
x = 3.14;// This will cause an error
this关键字
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
在函数定义中,this表示该函数的所有者。
在上例中,this表示person对象。
person对象包含fullName函数。
默认绑定
当单独使用this时,this表示全局对象。
在浏览器中,全局对象表示对象窗口。
var x = this;
在stric mode下,this是undefined,因为该模式下不允许默认绑定。
最佳实践
避免使用全局变量
全局变量和函数会被其他脚本覆盖。
永远声明局部变量
所有在函数中使用的变量都要使用var声明为局部变量,否则会被自动转换为全局变量。
strict mode可以禁止未声明的变量
在起始处声明变量
在脚本或函数的起始处声明变量。
- 代码更清晰
- 只有头部放置局部变量,可以很容易排查
- 可以很容易的避免自动转换为全局变量
- 减少重复声明的可能性
初始化变量
代码更清晰
只有一个地方初始化
避免未定义的值
永远不要使用Number、String或Boolean对象
对于这三种类型,要永远使用原始类型,而不是对象类型。
不要使用new创建对象
- 使用{}代码new创建对象
- 使用”“代替创建String对象
- 使用0代替Number对象
- 使用false代替Boolean对象
- 使用[]代替Array对象
- 使用/()/代替RegExp对象
- 使用function(){}代替Function对象
注意自动类型转换
JS是松散类型的语言。一个变量可以保护不同的数据类型,而且变量也可以改变数据类型。
var x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
使用===比较
==号会在比较前进行类型转换。
===同时会比较类型和值。
使用参数默认值
如果函数调用缺少参数,则该参数会被设为undefined。比较好的做法是给该值设默认值。
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
在switch语句中使用default
要使用default关键字结束switch语句。
避免使用eval
eval函数用于运行一段文本代码。在大多数情况下,都不需要使用它。
因为随机代码的运行,会有安全问题。
常见错误
Undefined is not NUll
可以将一个对象与undefined比较,但是不能将一个undefined类型的对象与null比较,这样做会抛出异常。
Incorrect:
if (myObj !== null && typeof myObj !== "undefined")
Correct:
if (typeof myObj !== "undefined" && myObj !== null)
代码块范围
JS并不会为每个代码块创建新的作用域范围。
for (var i = 0; i < 10; i++) {
// some code
}
return i;
性能
减少循环中的操作
循环中的每个语句,包括循环表达式,会在每次循环时执行。
Bad:
var i;
for (i = 0; i < arr.length; i++) {
Better:
var i;
for (i = 0; i < arr.length; i++) {
减少DOM的访问
访问DOM非常慢,如果要多次访问,可以赋值给变量:
var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";
减少DOM个数
尽量减少页面的元素个数。这样可以改善页面加载,加速页面渲染,特别是在小的设备上。如果DOM个数少,那每次查找消耗的时间也会比较少。
减少不必要的变量
不要创建不需要存储值的变量。
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Better:
document.getElementById("demo").innerHTML = firstName + " " + lastName
延迟加载JS
将脚本放在页面的底部,让浏览器首先加载页面。
当脚本在下载时,浏览器不会开始其他的下载。解析和渲染都会被阻塞。
Http规格定义浏览器不应该并发下载超过两个组件。
替代做法是使用defer=”true”。defer属性会告诉浏览器在页面解析完之后再执行脚本,但是只对外部脚本起作用。
也可以在页面加载完后,通过代码将脚本包含进来。
<script>
window.onload = function() {
var element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
不要使用with
使用with关键字,会对速度有负面影响。
在strict模式下会禁用该关键字。