1
2
声明html文档使用的网页标准

1
2
3
4
5
区别1：link是XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本(IE5及以下)的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

1
2
内核的区别主要在于css引擎和js引擎，前者提供页面的排版算法用于渲染页面，js引擎则更多用于页面交互，少量用于排版渲染页面

1
2
3
4
5
6
7
8
9
10
11
12
13
webkit
gecko
presto
trident
不过貌似现在都开始拥抱webkit了
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
本地存储，标签语义化，自定义标签，音视频支持，地理定位，拖拽, worker websocket
requestIsNotToken
移除了
仅用于表现的标签: s big center u
影响页面性能的标签: frame frameset noframes
可通过html 文档声明 js属性， html标签

1
2
3
4
5
1.在没有css的情况下，页面不至于杂乱
2.有利于SEO, 更容易被搜索引擎和爬虫获取到
3.方便其他设备的有意义的解析语义
4.结构清晰便于代码维护

1
2
3
4
5
6
7
8
9
10
1. 在html表中加入 minifest属性，指定加载缓存文件 demo.appache
2. 在demo.appache中分三部分指定缓存or加载页面：
2.1 CACHE MINIFEST
缓存的文件
2.2 NETWORK
有网络时请求的文件
2.3 FULLBACK
页面加载失败时回退页面（404）
当被缓存的文件发生更新时，对应的缓存文件demo.appache 文件也要发生更新，才能触发客户端更新最新的文件

1
2
3
【在线】的情况下，浏览器发现【html】头部有【manifest】属性，它会【先请求manifest】文件，如果是【第一次访问app】，那么浏览器就会根据【manifest文件的内容】下载相应的资源并且进行【离线存储】。如果已经【访问过app】并且资源已经离线存储了，那么浏览器就会使用【离线的资源加载页面】，然后浏览器会对比【新的manifest文件】与【旧的manifest】文件，如果文件没有发生改变，就不做任何操作，【如果文件改变了】，那么就会【重新下载文件】中的资源并进行离线存储。
【离线】的情况下，浏览器就直接使用离线存储的资源。

1
2
3
4
1. 进入ie 打开f12, internet选项-内容-自动完成功能
2. 在表单form中设置autocomplete=off属性
3. 在表单元素input中设置autocomplete=off属性

1
2
通过监听visibilitychange这个属性，可以监听页面是否处于可见状态，可用于在打开或者关闭 时 打开或者关闭 音视频动画等

1
2
3
4
1. 使用border-radius设置为50%
2. 利用js判断圆形可点击得区域事件生效
3. 使用svg制作一个圆

1
2
3
4
原因在ie6下，默认所有元素都有一个默认高度10px-12px, 默认字体得高度(中英文)，此时设置height: 1px 则不会生效
1. <div style="height: 1px; font-size:0"></div>
2. <div style="height: 1px; overflow: hidden"></div>

1
2
3
1. 区分是计算机还是人得公共自动程序,可以防止恶意暴力破解密码,刷票，网站论坛灌水
2. 防止黑客暴力破解密码，恶意登陆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
1. 设置绝对定位
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
2. 设置绝对定位50%
div {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
}
3. 设置transform
div {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%)
}
4. 不定宽高
.box {
display: flex;
justify-content: center;
align-items: center;
}
5. 表格居中
.table {
display: table;
}
.table .tr {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.table .tr .td {
display: inline-block;
}
6. 计算属性
div {
position: absolute;
left: calc((100% - 50px) / 2);
top: calc((100% - 50px) / 2);
}

1
2
3
1. relative 是以自身左上角当前的位置为参照的
2. absolute是以当前元素最近的定位（relative absolute）元素左上角来作为参照的

1
2
3
4
5
div:nth-child() {}
div:nth-of-type() {}
div:first-child {}
div:last-child {}

1
2
border-raidus: 50px;

1
2
box-shadow: 5px 2px 6px rgba(0, 0, 0, 0.1)

1
2
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

1
2
3
4
5
* why: 传统网页布局采用 float position display 来进行特殊网页布局，但是诸如垂直居中布局就不是很方便
* what: 任何元素都可以指定为flex容器， 其子元素自动成为容器成员，父元素设置flex布局后，子元素身上设置的float clear vertical-align将失效
容器默认存在两根轴 水平轴称为main axis,纵轴称为cross axis, 交叉轴的开始位置为 cross start, 结束位置为cross end
* how: 垂直居中布局，nav导航布局

1
2
3
4
5
6
7
8
div {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

1
2
3
4
5
6
7
8
div {
width:0;
height:0;
border-top: 50px solid transparent;
border-bottom:50px solid transparent;
border-left: 50px solid red;
}

1
2
3
4
5
6
7
8
div {
width:0;
height:0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid red;
}

1
2
b^2 = c^2 - a^2

1
2
3
4

框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔”
设置font-size: 0;可解决

1
2
不同的浏览器对于标签设置的默认值是不同的，通过css 初始化可以抹平不同浏览器的由于默认值带来的差异

1
2
3
4
5
6
7
8
9
1. 优先级就近原则
内联样式 > 内部样式 > 外部样式表 > 默认缺省样式
!important 优先级高于一切
2. 权重分为四个等级 0001 0010 0100 1000
0001： 标签选择器
0010： 类选择器、属性选择器
0100： id选择器
1000： !important

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

浮动是为了方便块级元素横向布局产生的，浮动的出现导致页面中包含浮动元素的盒子高度出现了塌陷，当盒子中没有除浮动元素的其他元素的时候，盒子的高度为零
清楚浮动的方式 6
1. 添加额外的标签 <br clear="all"> or <div style="clear:both"></div>
2. 给父元素设置浮动
3. 给父元素设置高度
4. 给父元素设置overflow: hidden; clear: both
5. 采用伪元素清除浮动
.clearfix::after {
content: '';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}

1
2
https://www.w3cplus.com/mobile/vw-layout-in-vue.html

1
2
3
4
5
6
7
8
9
10
sass
变量
嵌套
混入(mixin)
继承
函数
@import
运算符
逻辑控制

1
2
3
4
5
6
7
8
四个方面：加载性能 选择器性能 渲染性能 可维护性
1. 优化选择器嵌套，避免层级过深
2. 尽量少用浮动 定位
3. 不适用@import 加载css 样式
4. 尽量抽取公共样式，减少代码量
5. 尽量利用继承属性，减少代码量
6. 将css 文件放在head中进行加载

1
2
从右往左解析css 选择器

1
2
偶数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
css样式文件结构( 模块划分的单入口 )
common
|_ _ _ _ _ _reset.css
|_ _ _ _ _ _common.css	公用样式
libs
|_ _ _ _ _ _bootstrap
|_ _ _ _ _ _swiper	第三方库样式
modules
|_ _ _ _ _ _index
|_ _ _ _ _ _category
|_ _ _ _ _ user
......	模块样式
index.css
category.css
user.css
......	入口样式文件
1. 使用样式重置来统一各个浏览器的初始样式
2. 抽取公共样式形成代码库
3. 提取页面公共变量，便于更换主题换肤 如： 尺寸、颜色
4. 集中管理小图标iconfont

1
2
元素的宽高是基于容器的宽高，元素的padding margin 都是基于【容器的宽度】

1
2
3
4
动鼠标滚轮或者点击导航按钮，页面会平滑滚动到对应的模块
fullScreen.js
overflow: hidden; transition: all 1000ms ease;

1
2
3
4
5
页面的设计和开发应当根据【用户行为】以及【设备环境】（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括【弹性网格】和布局、【图片】、css 【media】 query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。
响应式网页设计就是【一个网站能够兼容多个终端】——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明viewport：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

1
2
3
4
css1 中伪类（:link, :visited, :hover, :actived）跟伪元素 :before :after 写法一致
css3中伪元素被抽出来用::before ::after 代替
:after :before 的写法更加兼容老版本浏览器

1
2
3
4
5
给input 框autofill伪类属性 设置内阴影遮住原本的黄色部分
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}

1
2
3
使用css3属性:
transform: scale(0.8) 属性设置小于 1

1
2
倾斜

1
2
采用position: absolute 绝对定位来处理

1
2
多数显示器的默认频率是60HZ，即每秒刷新60次。所以理论上的最小间隔是 1/60*1000ms = 16.7ms

1
2
3
4
5
6
当行内块平铺在一个盒子里时会出现4px间隔，原因是有换行或空格
解决方法：
1. 去除空格
2. 针对父盒子设置font-size: 0; letter-space: -4px;
3. 设置浮动，父盒子清除浮动

1
2
3
4
5
6
7
andriod4.0之前不支持区域滚动，andriod5开始支持区域滚动，所以主要是为了支持低版本的andriod 系统，可以采用设置 以下内容启用硬件加速
{
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
也可以采用js框架， iscroll.js 来解决平滑滚动的问题

1
2
精髓使用padding值占位，使用position 定位第一个元素，或者使用负marging, item2设置高度100%

1
2
3
4
5
1. gif图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
2. jpg支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
3. png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
4. webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，google39+，safari7+

1
2
静态资源放到CDN中，不同域名访问就不会带cookie信息

1
2
优先级不同，就近原则，离标签越近的style优先级越高

1
2
3
4
5
6
7
8
9
10
11
12
5种基本类型
Numebr
String
Boolean
Null
Undefined
4种复杂类型
Array
Object
Function
Regexp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
1. 不要在同一行声明多个变量
2. 使用全等
3. 使用数组字面量中括号[]代替new Array
4. 不要使用全局变量
5. switch 分支一定要写default分支
6. for if 等强制一定要写花括号{}
7. for in 中使用var 定义局部变量
8. 注释尽量简洁As long as possible As long as Neccssary
9. 使用单行注释代替多行注释
10. 函数/方法提供入参 出参 作用范围 等描述
11. 文件注释
12. 命名方式
属性、变量驼峰命名 eg: hellWorld
前置下划线表示私有属性、方法 eg: _demo: () => {}
常量使用大写命名，单词之间以下划线间隔 CIRCLE_PAI
类名采用首字母大写
eg: function Animal () {}
缩写单词组词全部大写
eg: innerHTML
13. 命名语法
类名一般采用名词
eg. Pig
方法名采用动宾结构 eg. getStyle
布尔值 采用is has 开头
Promise 采用动宾短语
const loadingData = new Promise();
14. 使用let命名基本类型数据， 常量使用const 命名以及复杂类型数据
15. 使用三元运算符代替if-else 语句
16. 合理使用缩写
17. 检测数据类型优先使用typeof, 其次instanceof , null、undefined 使用全等比较， 最次使用Object.prototype.toString.call()判断类型。
18. 使用短路运算符减少不必要的计算 && ||
19. 不要针对数组使用for-in 循环

1
2
javascript是基于原型发展出来的语言，在javascript的世界中所有的元素，都是原型链最顶端的Object的实例, 每个对象都有它的原型，通过__proto__ 可以找到原型对象，层层向上找，一直找到object, object 的原型是null, null 没有原型， 对象上不存在的属性会一直通过原型链进行查找，一直查找到null,如果属性不存在，则返回undefined。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
基础类型
String
Number
Boolean
Null
Undefined
复杂类型
Object
Array
Date
RegExp
Function
基础数据的创建、赋值都在栈中， 复杂类型的数据在栈中存储了内存地址，在堆中真正保存了数据，在栈中复制对象就是复制了栈中的内存地址，并没有真正复制堆中的对象

1
2
3
4
5
6
7
8
9
10
11
1. 原型继承
将原型实例赋值给 对象的prototype属性
2. 构造函数继承
在构造函数内部，执行原型时使用call绑定当前构造函数this
3. 混合继承
原型继承 + 构造函数继承
注意修正对象的指针constructor属性
4. 通过Object.create 构造一个新对象（注意浅拷贝）
5. 寄生式继承 函数内部构建对象，return对象
6. 组合寄生继承 原型链继承 + 寄生继承

1
2
作用域分为全局作用域和局部作用域，当代码开始运行时，当前运行环境中的变量会创建一个作用域链，来管理变量对作用域链上的变量方法访问的权限以及有序访问。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
回答方向：
1. 是什么
2. 全局与局部
3. 使用场景
this 一般指向调用对象的当前执行上下文；
全局：默认this指向window, 直接定义在script 标签种执行的方法，方法体内this指向window, 默认可以不写
局部：4
1. 全局作用域调用函数，函数方法体内this 指向window
2. 在对象调用时，哪个对象调用就指向哪个对象（事件）
3. 在实例化对象时，this 指向当前实例
4. 当使用call apply 时，可以改变当前this指向
使用场景：
1. 在构造函数时，区分局部变量与全局变量时会用到
2. 返回当前函数的执行上下文（链式调用）

1
2
3
4
5
6
7
8
9
作用：
1. 解析js 代码并执行
2. 解析JSON 字符串
运行效率：
运行效率低，运行代码分两步，先解析，后执行
作用域：
作用范围与正常变量一样
兼容性： ie8以下不支持，仅支持window.execScript()

1
2
3
4
window对象是指当前窗口或者在框架内部的窗口（iframe）,window 是全局对象，定义了核心javascript的所有方法和属性；
document 代表整个文档，用于访问页面元素。
document是window对象的属性，HTMLDocument 扩展了访问操作DOM的方法和属性；HTMLCollection对象，保存了锚点，表，链接的引用。

1
2
3
null 表示空对象，代表空对象指针，类型为object
undefined 表示对象已经声明，但是没有赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var myEvent = {
// 页面加载
readyEvent: function (fn) {
if (fn == null) {
fn = document;
}
var oldOnload = window.onload;
if (typeof oldOnload !== 'function') {
window.onload = fn;
} else {
window.onload = function () {
oldOnload();
fn();
}
}
},
// 绑定事件
addEvent: function (el, type, handler) {
if (el.addEventListener) {
el.addEventListener(type, handler, false);
} else if (el.attachEvent){
el.attacheEvent('on' + type, function () {
handler.call(el);
});
} else {
el['on' + type] = handler;
}
},
// 取消绑定事件
removeEvent: function (el, type, handler) {
if (el.removeEventListener) {
el.removeEventListener(type, handler, false);
} else if (el.detachEvent) {
el.detachEvent('on' + type, handler);
} else {
el['on' + type] = null;
}
},
// 组织冒泡
stopPropagation: function (ev) {
var e = ev || window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
},
// 组织默认事件
preventDefault: function (ev) {
var e = ev || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
},
// 获取事件详细信息
getEvent: function (ev) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
}

1
2
3
4
5
[1, NaN, NaN]
parseInt 函数会传入两个参数 value radix
radix 取值范围为2 - 36之间的整数
当radix 的值小于字符串的值的时候，会报NaN

1
2
3
4
5
6
IE 是基于冒泡设计的事件流，不支持事件捕获
ff 既支持事件冒泡也支持事件捕获
阻止事件冒泡：
ie: event.cancelBubble = false;
ff: event.stopPropagation();

1
2
3
4
5
定义在函数内部的函数，可以读取到函数内的私有变量
1. 私有化变量
2. 保持变量在内存中，防止被垃圾回收机制回收
缺点是会造成内存开销增大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
严格模式，通过在作用域的顶部插入 "use strict"可以使得代码在更严格的环境中执行
作用：
1. 消除语法不严格，不严谨之处，减少怪异行为
2. 提高代码运行效率
3. 消除代码中不安全的写法，保证运行安全
使用前后的区别：
1. 变量声明即赋值
2. 禁止关键字指向全局变量
构造函数，实例化时不加new, 内部this 指向window,导致报错
3. 禁止删除变量
只能通过clone 对象的方式，设置configurable: true删除对变量的引用
"use strict";
　　var x;
　　delete x; // 语法错误
　　var o = Object.create(null, {'x': {
　　　　　　value: 1,
　　　　　　configurable: true
　　}});
　　delete o.x; // 删除成功
4. 重复定义对象的属性会报错
5. 参数重名报错 const a = (b, b, c) => {}

1
2
3
4
typeof
instanceof
constructor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1. 申请内存空间，初始化一个空对象
2. 设置原型链
3. 绑定执行环境，并执行
4. 判断类型，如果是复杂类型则返回对象的引用，如果时基础类型数据则直接返回值
var Func=function(){
};
var func=new Func ();
/ 模拟步骤开始
var obj = new Object();
obj.__proto__ = Func.prototype;
var result = Func.call(obj);
if (typeof(result) === 'object' ) {
func = result;
} else {
func = obj;
}

1
2
3
4
5
6
7
8
9
10
滚动顶部
级联菜单
下拉框
模态框
提示框
取色器
楼层效果
贪吃蛇
计算器

1
2
hasOwnProperty

1
2
3
4
Javascript Object Notation
轻量级数据交互格式，简洁明了，不支持注释, 是javascript 的子集;
使用JSON.stringify 可以将json 转成jSON 字符串，使用JSON.parse 可以将JSON 字符串转化为JSON, 转化过程中对象的引用会被切断

1
2
3
4
5
1. 使用setTimeout
2. 在body 底部页面onload时动态加载对应需要引入的js文件,类似jsonp
3. defer 立即下载，延迟执行；注意区分async 异步无顺序加载，onload 前执行
4. 使用get 请求方式获取文件内容，动态创建标签，插入文件内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
异步的javascript和xml, 局部无状态刷新，无需刷新整个页面，可直接修改局部数据
1. 创建一个xmlHttp对象
2. 执行open 方法传入参数
3. 发送请求
4. 监听返回值
GET:
var xmlHttp = null;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 异步需要
xmlHttp.onreadyStatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
// xmlHttp.responseText
}
};
// 同步直接
// *** = xmlHttp.responseText;
xmlHttp.open("GET", 'www.baidu.com?fname=cungen&lname=xu&r' + Math.random(), true); // 异步
xmlHttp.send();
POST:
var xmlHttp = null;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
// 异步需要
xmlHttp.onreadyStatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
// xmlHttp.responseText
}
};
// 同步直接
// *** = xmlHttp.responseText;
xmlHttp.open("POST", 'www.baidu.com, true); // 异步
// 设置请求头
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 参数采用send 中发出
xmlHttp.send('fname=cungen&lname=xu&r' + Math.random()');

1
2
同步时上一个事件或者方法没有执行完成，就不能进行其他的事件或者方法，异步时上下排列的事件和方法可以同时进行， 不必按照排列顺序一次执行，谁先返回值就先执行谁

1
2
3
4
5
6
7
8
9
10
11
12
13
1. jsonp
get 请求后面接callback函数名，仅支持get 请求
3. window.name
同一个声明周期内的window 窗口name属性是共享的，大小2M左右。
4. document.domain
在页面不同的框架中设置相同的domain, 可以绕过页面中不同框架的同源限制，进而通过操作contentWindow对象来操作不同的框架
3. window.postMessage
不同域的框架通过iframe是可以相互获取window 对象的，
首先使用iframe获取目标网页的window对象
使用postMessage方法传参
三个参数： data targetOrigin
在目标页面监听message 方法

1
2
encodeURI decodeURI

1
2
3
4
5
6
7
8
9
模块化开发要点在于封装细节，开放接口，每个模块都是为了某一个特定的功能设计，模块之间彼此独立，互不影响，通过接口来实现模块的交互。
模块化要解决的问题包括：
命名冲突
文件依赖
限制作用域
方案一：匿名函数
方案二：对象封装
方案三: 第三方模块化 seajs common.js

1
2
3
AMD:提前执行（异步加载：依赖先执行）+延迟执行
CMD:延迟执行（运行到需加载，根据顺序执行）

1
2
3
动态创建script加载js
加载之后创建一个对象，用来唯一标识模块，避免多次加载

1
2
3
4
1. 动态创建标签
2. 设置defer async 属性
3. 使用ajax get方式加载代码，动态解析执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1. 创建节点
createDocumetnFragment
createElement
createTextNode
2. 添加、删除、替换、插入, 复制
appendChild
removeChild
replaceChild
insertBefore
cloneNode
3. 查找节点
// 一般方法
getElementById
getElementsByClassName
getElementsByTagName
// HTMLCollection
document.forms
document.links
window.frames

1
2
3
4
都是用于修改对象调用时的上下文
call 后面接枚举的参数
applay 后面接数组