20190204：《imooc -前端跳槽面试技巧》

第01章课程介绍

01-01 课程导学

一、一面知识点
1、面试技巧页面布局类
2、css盒模型dom事件类
3、http协议类原型链类
4、面向对象类通信类
5、前端安全类前端算法类
二、二面
1、面试技巧
2、渲染机制类
3、js运行机制
4、页面性能
5、错误监控
三、三面
1、面试技巧
2、业务能力
3、团队协作能力
4、带人能力
四、终面
1、面试技巧
2、职业竞争力
3、职业规划

第02章面试准备

2-02 职位分析（JD）（一）

一、京东金融是京东最赚钱的软件开发部门。
3、代码易读易可维护。
4、用户体验，用户研究等相关知识有深入的了解和实践经验。
5、web前端技术有兴趣，github，博客前沿技术。
6、sass、less等css预编译语言。（sass看一下）
7、了解、熟悉、精通。构建工具，推荐gulp。
8、grunt和gulp的区别。
9、面向对象，类，原型链
10、系统化设计：模块化设计，前后端分离
11、动画：dom动画，SVG的path
12、gpu加速，css的属性有哪些是能提高性能的？
13、web标准
14、js异常：js运行异常，资源加载错误（资源可用性、可访问性）

2-03 职位分析（JD）（二）

一、

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" cootent="webkit">

二、怎么提升网站性能，dns预解析
<link rel="dns-prefetch" href="//static.360buyimg.com">
三、application
1、local storage
2、字体，自定义字体，字体图标

2-05 业务分析或实战模拟（二）

一、async
<script async>
script外链加载方式有几种?
二、requirejs 模块化加载
模块化加载的方式有几种
requirejs和cjs的区别
三、静态域：专门放静态资源的域
四、jquery的模板引擎：head bar、ejs引擎、underspone的template
deligate（延迟的方法）
es6怎么处理模块化

2-06 面试准备-技术栈准备

一、jquery的源码：核心架构、事件委托、插件机制。
二、MVM：vue、react、angular
三、阿里很喜欢问vue的源码（v2.0静态语法检查）
四、postcss不如less/sass全面。
五、npm scripts怎么用的

2-07 面试准备-自我陈述

一、自我介绍
1、简历
（1）基本信息，姓名、年龄、手机、邮箱、籍贯
（2）学历，本科
（3）工作经历，时间、公司、岗位、职责、技术栈、业绩
（4）开源项目，github和说明
charles、webpack、es6
略微了解nodejs
不推荐写自我评价
背景、技术（mvc/less，ajax不属于技术）、收益（业务收益、技术收益）
熟悉http协议（包括http2,https协议）
2、自我陈述
（1）把握面试的沟通方向，1个点不够，多准备几个点。
（2）豁达、自信的适度发挥

2-08 面试准备-自我陈述（二）

一、遇到不知道的问题，不能说不知道、不懂、没经历过。可以说思考一下、回去思考一下，也可以请教面试官
二、页面布局，能写几种方法就写几种，实现->追求技术难度。面试题没有标准答案。
三、给你出再难的题目，不要自卑，心态要平和。

第03章一面二面

3-01 页面布局（一）

一、知识要系统
在这里插入图片描述
二、三栏布局：左右各300px,中间自适应
1、5种写法：
flex布局，浮动float, 绝对定位position:abolute, 表格布局 table-cell，网格布局grid布局
2、注意点：
（1）所有元素重置padding,margin
（2）浮动布局中间块元素自动撑开，中间块元素不要用float:left;
（3）绝对定位的时候，最好三栏都用绝对定位，不要一会儿用浮动，一会儿用绝对定位。
（4）不要通篇用div，语义化标签
3、代码

  <style>html * {padding:0;margin:0;}.layout{margin-top:20px;}.layout article div{min-height:100px;}</style>
</head>
<body>
<!--浮动解决方案-->
<section class="layout float"><style media="screen">.layout.float .left{float:left;width:300px;background:red;}.layout.float .right{float:right;width:300px;background:blue;}.layout.float .center{ /*块元素自动撑开*/background:yellow;}</style><article class="left-right-center"><div class="left"></div><div class="right"></div><div class="center"><h1>浮动解决方案</h1>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div></article>
</section><!--绝对定位解决方案-->
<section class="layout absolute"><style>.layout.absolute .left-center-right>div{position:absolute;}.layout.absolute .left{left:0;width:300px;background:red;}.layout.absolute .center{left:300px;right:300px;background:yellow;}.layout.absolute .right{right:0;width:300px;background:blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>绝对定位解决方案</h2>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div><div class="right"></div></article>
</section><!--flexbox解决方案-->
<section class="layout flexbox"><style>.layout.flexbox{margin-top:140px;}.layout.flexbox .left-center-right{display:flex;}.layout.flexbox .left{width:300px;background:red;}.layout.flexbox .center{flex:1; /*中间自适应原理*/background:yellow;}.layout.flexbox .right{width:300px;background:blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>flexbox解决方案</h2>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div><div class="right"></div></article>
</section><!--表格布局解决方案-->
<section class="layout table"><style>.layout.table .left-center-right{width:100%;display:table;height:100px;}.layout.table .left-center-right>div{display:table-cell;}.layout.table .left{width:300px;background:red;}.layout.table .center{background:yellow;}.layout.table .right{width:300px;background:blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>表格布局解决方案</h2>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div><div class="right"></div></article></article>
</section><!--网格布局解决方案-->
<section class="layout grid"><style media="screen">.layout.grid .left-center-right{display:grid;width:100%;grid-template-rows:100px;grid-template-columns:300px auto 300px;}.layout.grid .left{background:red;}.layout.grid .center{background:yellow;}.layout.grid .right{background:blue;}</style><article class="left-center-right"><div class="left"></div><div class="center"><h2>网格布局解决方案</h2>1.这是三蓝布局中间部分2.这是三蓝布局中间部分</div><div class="right"></div></article>
</section>

4、延伸
（1）这5种方案的优缺点
①浮动：清除浮动，兼容性比较好。
②绝对定位：快捷，布局已经脱离了文档流，导致下面的元素也要脱离文档流，使用性较差。
③flex布局，解决了浮动和绝对定位的缺点，移动端基本已经支持了兼容性。
④表格布局：表格布局的兼容性非常好
⑤网格布局：新出的
（2）如果“高度已知”去掉，中间内容高度撑开了，需要左右的高度也自动撑开，哪些方案仍适合，哪些方案不再适用。
①flex、table能用
②flex左边有遮挡，所以显示在右边，没有遮挡的时候，就会显示在最左边。创建bfc
（3）5种方案的兼容性，如果是实际项目中，最优方案是什么？
（4）三栏布局
①左右宽度固定，中间自适应
②上下高度固定，中间自适应。
（5）两栏布局
①左宽度固定，右自适应
②右宽度固定，左自适应
③上高度固定，下自适应
④下高度固定，上自适应

3-04 css盒模型（一）

一、谈谈你对css盒模型的认识
1、基本概念：标准模型+IE模型
margin、border、padding、content
2、标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的
width:100px; 如果是IE，100px包括border和padding，
3、css如何设置这两种模型
box-sizing:content-box;
box-sizing:border-box; /IE模型/
4、js如何设置获取盒模型对应的宽和高
dom.style.width/height // 只能取到内联样式
dom.currentStyle.width/height // 取到渲染后的样式（只有IE支持）
window.getComputedStyle(dom).width/height // 兼容firefox，chrome，兼容性更好
dom.getBoundingClientRect().width/height // 运行后的宽度，getBoundingClientRect()能得到left/top/width/height，bounding:范围,rect，矩形
5、实例题（根据盒模型解释边距重叠）
（1）边距重叠：父子元素，兄弟元素，空元素上下边距
（2）#sec的子元素是.child
①#sec{}
.child{height:100px;margin-top:10px;}
这时#sec的高度为100px;
②#sec{overflow:hidden;}
.child{height:100px;margin-top:10px;}
这时#sec的高度为110px;
6、BFC（边距重叠解决方案）
（1）BFC的基本概念：块级格式化上下文,Block Formatting Context
IFC：内联元素格式化上下文，不过面试问的比较多的是BFC
（2）BFC原理/BFC渲染规则
①BFC元素垂直方向的边距会发生重叠
②BFC的区域不会与浮动元素的box重叠（可用于清除浮动）
③BFC为一个独立的元素，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。
④计算BFC高度的时候，浮动元素也会参与计算。
（3）如何创建BFC
①float值不为none；
②position的值不为static(默认值),relative，即为absolute,fixed
③display为inline box,table-cell,table,table-caption，跟table相关的。
④overflow不为visible，overflow为auto,hidden;
（4）BFC的使用场景
①BFC垂直方向边距重叠
②BFC不与float重叠
③清除浮动：子元素是浮动元素的时候，把外层元素设置成BFC的时候，子元素的浮动元素也会参与到父级元素的高度计算上来。

<!--BFC不与float重叠-->
<section id="layout"><style media="screen">#layout{background:red;}#layout .left{float:left;width:100px;height:100px;background:pink;}#layout .right{height:110px;background:#ccc;overflow:auto;}</style><div class="left"></div><div class="right"></div>
</section>
<!--BFC子元素即使是float，也会参与高度计算-->
<section id="float"><style media="screen">#float{background:red;/*overflow:auto;*/float:left;}#float .float{float:left;font-size:30px;}</style><div class="float">我是浮动元素</div>
</section>

3-6 dom事件（一）

一、dom事件类
1、基本概念：dom事件的级别
（1）dom0 element.οnclick=function(){}
（2）dom2 element.addEventListener(‘click’, function(){}, false) // 默认是false。false：冒泡阶段执行，true：捕获阶段产生。
（3）dom3 element.addEventListener(‘keyup’, function(){}, false) // 事件类型增加了很多，鼠标事件、键盘事件
2、dom事件模型
捕获：从上到下
冒泡：从当前元素往上
3、dom事件流
浏览器在为当前页面与用户交互的过程中，比如说点击鼠标左键，左键怎么传到页面上，这就是事件流，他又是怎么响应的。
捕获-> 目标阶段->冒泡
4、描述dom事件捕获的具体流程
window-> document-> html-> body-> … -> 目标元素
document.documentElement();获取到html
document.body获取到body
5、event对象的常见应用

event.preventDefault(); // 阻止默认行为，阻止a链接默认的跳转行为
event.stopPropagation(); // 阻止冒泡
event.stopImmediatePropagation(); // 按钮绑定了2个响应函数，依次注册a,b两个事件，点击按钮，a事件中加event.stopImmediatePropagation()就能阻止b事件
event.currentTarget // 早期的ie不支持，当前绑定的事件
event.target

6、自定义事件/ 模拟事件
（1）给一个按钮自己增加一个事件，在其他地方触发，而不是用回调的方式触发

var ev = document.getElementById('ev');
var eve = new Event('custome'); // eve：事件对象
ev.addEventListener('custome', function(){console.log('custome');
});
ev.dispatchEvent(eve);

（2）customeEvent

3-08

一、http协议类
HyperText Transfer Protocol，超文本传输协议。因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准
1、http协议的主要特点
简单快速、灵活、无连接、无状态
①简单快速：每个资源的url是固定的
②灵活：每个http协议中有个头部分，有个数据类型，通过一个http协议，可以完成不同类型数据的传输。
③无连接：连接一次就会断掉，不会保持连接。
④无状态：客户端、服务端是两种身份，http传输完成后，下次连接再过来，服务端无法确认是否是上一次连接者的身份。
2、http报文的组成部分
在这里插入图片描述
（1）请求行：包含http方法，页面地址，http协议，版本。
（2）请求头：key,value值，告诉服务端我要哪些内容。
（3）空行：分隔请求头、请求体。
3、http方法
get：获取资源
post：传输资源
put：更新资源
delete：删除资源
head：获得报文首部
4、post和get的区别
9个区别，至少记住标记的4个
（1）get在浏览器回退时是无害的，而post会再次提交请求。（记住）
（2）get产生的url地址可以被收藏，而post不可以。
（3）get请求会被浏览器主动缓存，而post不会，除非手动设置。（记住）
（4）get请求只能进行url编码，而post支持多种编码方式。
（5）get请求参数会被完整保留在浏览器历史记录里，而post中的参数不会被保留。（记住）
（6）get请求在url中传送的参数是有长度限制的，而post没有限制。
（7）对参数的数据类型，get只接受ASCII字符，而post没有限制。
（8）get比post更不安全，因为参数直接暴露在url上，所以不能用来传递敏感信息。
（9）get参数通过url传递，post放在request body 中。（记住)
5、http状态码
1、状态码
1xx：指示信息-表示请求已接收，继续处理。
2xx：成功-表示请求已被成功接收。
3xx：重定向-要完成请求必须进行更进一步的操作。
4xx：客户端错误-请求有语法错误或请求无法实现。
5xx：服务器错误-服务器未能实现合法的请求。
2、常见状态码
200 OK:客户端请求成功
206 Partial Content：客户发送了一个带有Range头的GET请求，服务器完成了它。 // video, audio
301 Moved Permanently：所请求的页面都已经转移至新的url
302 Found：所请求的页面已经临时转移至新的url
304 Not Modified：客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户，原来缓冲的文档还可以继续使用。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解
401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden：对被请求页面的访问被禁止
404 Not Found：请求资源不存在
500 Internal Server Error：服务器发生不可预期的错误
503 Server Unavailable：请求未完成，服务器临时过载或宕机，一段时间后可能恢复正常。
6、什么是持久连接
（1）http协议采用“请求-应答”模式，当使用普通模式，即非keep-alive模式时，每个请求/应答，客户端和服务器都要新建一个连接，完成之后立即断开连接（http协议为无连接的协议）
当使用keep-alive模式（又称持久连接、连接重用）时，keep-alive功能使客户端到服务器端的连接持久有效，当出现对服务器的后继请求时，keep-alive功能避免了建立后者重新建立连接。
（aSuncat：chrome默认开启持久连接)
（2）http1.1才支持，http1.0是不支持的。
7、什么是管线化
（1）在使用持久连接的情况下，某个连接上消息的传递类似于
请求1-> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3
某个连接上的消息变成了类似这样
请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3
（2）管线化注意点：
6个注意点，至少记住标记的3个
①管线化机制通过持久连接完成，仅http/1.1支持此技术。（记住）
②只有get和head请求可以进行管线化，而post则有所限制。（记住）
③初次创建连接时不应启动管线机制，因为对方（服务器）不一定支持http/1.1版本的协议。（记住）
④管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变。
⑤http/1.1要求服务器支持管线化，但并不要求服务器也对响应进行管线化处理，只是要求管线化的请求不失败即可
⑥由于上面提到的服务器问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，因为现代浏览器如chrome和firefox默认并未开启管线化支持

3-09 原型链（一）

一、原型链类
1、创建对象有几种方法
（1）
①字面量对象 // 默认这个对象的原型链指向object
var o1 = {name: '01'};
②通过new Object声明一个对象
var o11 = new Object({name: '011'});
（2）使用显示的构造函数创建对象

var M = function(){this.name='o2'};
var o2 = new M();
o2.__proto__=== M.prototype

o2的构造函数是M
o2这个普通函数，是M这个构造函数的实例
（3）object.create()

var P = {name:'o3'};
var o3 = Object.create(P);

2、原型、构造函数、实例、原型链
在这里插入图片描述
（1）Object.prototype属性是整个原型链的顶端
（2）原型链通过prototype原型和__proto__属性来查找的
（3）实例本身的属性和方法如果没有找到，就会去找原型对象的属性和方法。如果在某一级找到了，就会停止查找，并返回结果
（4）函数才有prototype，对象是没有prototype的
（5）对象才有__proto__，实例是构造函数生成的
（6）函数也是对象
3、instanceof的原理
在这里插入图片描述
（1）实例对象的属性引用的是构造函数的原型对象
（2）instanceof的原理：实例对象的这个属性和构造函数的属性，判断是不是同一个引用

var M = new Object({name: '1'});
var o3 = new M;
console.log(o3 instanceof M); // true
console.log(o3 instanceof Object); // true,只要是原型链上的构造函数，都会被看成是object的构造函数，都会返回true
console.log(M.prototype.__proto__===Object.prototype);
console.log(o3.__proto__.constructor === M); // true，o3是M这个构造函数直接生成的
console.log(o3.__proto__.constructor === Object); // false

4、new运算符
new运算符后面跟的是一个构造函数
在这里插入图片描述

var new2 = function(func) {var o = Object.create(func.prototype);var k = func.call(o); // call转移上下文if (type k === 'Object') {return k;} else {return o;}
}
var o6 = new2(M);
console.log(o6 instanceof M); // true
o6 instanceof Object // true
o6.__proto__.constructor === M; // true
M.prototype.walk = function(){console.log('walk')};
o6.walk(); // 能成功

3-11

一、类与实例
1、类的声明

 /*类的声明*/// 传统的构造函数，声明一个类function Animal() {this.name = 'name';}/*es6中的class声明*/class Animal2{constructor() {this.name = name;}}

2、生成实例

 /*实例化*/console.log(new Animal(), new Animal2()); // 通过New就可以实例化一个类,如果没有参数，Animal后面的()可以不要

3、声明一个类，怎么生成类的实例？
二、类与继承
1、如何实现继承
（1）继承的本质就是原型链
（2）aSuncat：call、apply的共同点与区别
①改变了函数运行上下文
（aSuncat：call()和apply()主要是能扩充函数赖以运行作用域。两者的作用方式相同，它们的区别在于接收参数的方式不同，对于call()而言，第一个参数this与apply()相同，其他的参数必须直接传给函数，要一个一个的列出来，而对于来说，apply()可以接收一个数组或arguments对象。所以如何选择二者，在于哪种给函数传参数的方式最简单。）
2、继承的几种方式，这几种方式的优缺点
（1）方法1：借助构造函数实现继承（部分继承）

  /*** 借助构造函数实现继承*/function Parent1() {this.name = 'parent';}Parent1.prototype.say = function() {}; // 不会被继承function Child1() {// 继承：子类的构造函数里执行父级构造函数// 也可以用apply// parent的属性都会挂载到child实例上去// 借助构造函数实现继承的缺点：①如果parent1除了构造函数里的内容，还有自己原型链上的东西，自己原型链上的东西不会被child1继承// 任何一个函数都有prototype属性,但当它是构造函数的时候，才能起到作用(构造函数是有自己的原型链的)Parent1.call(this);this.type = 'child1';}console.log(new Child1);

①如果父类的属性都在构造函数内，就会被子类继承。
②如果父类的原型对象上有方法，子类不会被继承。
（2）方法2：借助原型链实现继承

/*** 借助原型链实现继承*/function Parent2() {this.name = 'name';}function Child2() {this.type = 'child2';}Child2.prototype = new Parent2();console.log(new Child2().__proto__);console.log(new Child2().__proto__ = Child2.prototype); // truevar s1 = new Child2(); // 实例var s2 = new Child2();console.log(s1.play, s2.play);s1.play.push(4);console.log(s2.__proto__ === s2.___proto__); // true // 父类的原型对象

①原型链的基本原理：构造函数的实例能访问到它的原型对象上
②缺点：原型链中的原型对象，是共用的
（3）方法3：组合方式

 /*** 组合方式*/function Parent3() {this.name = 'name';this.paly = [1, 2, 3];}function Child3() {Parent3.call(this);this.type = 'child3';}Child3.prototype = new Parent3();var s3 = new Child3();var s4 = new Child3();s3.play.push(4);console.log(s3.play, s4.play);// 父类的构造函数执行了2次// 构造函数体会自动执行,子类继承父类的构造函数体的属性和方法

①组合方式优化1：

  /*** 组合继承的优化方式1：父类只执行了一次*/function Parent4() {this.name = 'name';this.paly = [1, 2, 3];}function Child4() {Parent4.call(this);this.type = 'child4';}Child4.prototype = Parent4.prototype; // 继承父类的原型对象var s5 = new Child4();var s6 = new Child4();console.log(s5 instanceof Child4, s5 instanceof Parent4); // trueconsole.log(s5.constructor); // Parent4  //prototype里有个constructor属性，子类和父类的原型对象就是同一个对象， s5的constructor就是父类的constructor

②组合方式优化2：

  /*** 组合继承优化2*/function Parent5() {this.name = 'name';this.paly = [1, 2, 3];}function Child5() {Parent4.call(this);this.type = 'child5';}Child5.prototype = Object.create(Parent5.prototype);  // Object.create创建的对象就是参数Child5.prototype.constructor = Child5;var s7 = new Child5();console.log(s7 instanceof Child5, s7 instanceof Parent5);console.log(s7.constructor); // 构造函数指向Child5

3、一个对象，是继承了某个类，问你他的原型链

3-13 通信类

一、通信类
1、什么是同源策略及限制
（1）同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这个是一个用于隔离潜在恶意文件的关键的安全机制。
源：协议、域名、端口
（2）Cookie、localStorage 和indexDB无法读取。
（3）DOM无法获得。
（4）ajax请求不能发送
2、前后端如何通信
ajax（同源）
websocket
cors
3、如何创建ajax

var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHttp);
xhr.open(type, url, true);
xhr.sendRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send();

（1）XMLHttpRequest对象的工作流程
（2）兼容性处理
（3）事件的触发条件
（4）事件的触发顺序
4、跨域通信的几种方式
（1）jsonp
script标签的异步加载
原理：视频#3-13的第20分钟
（2）hash
hash改变，页面是不刷新的
search改变，页面是会刷新的
window.onhashchange 得到window.location.hash
（3）postMessage

Bwindow.postMessage('data', 'http://B.com');
windwo.addEventListener('message', function(event) {console.log(event.origion); // http://A.comconsole.log(event.source); // Awindowconsole.log(event.data); // data
})

（4）websocket

var ws = new WebSocket('wss://echo.websocket.org');
ws.open, ws.onmessage, ws.onclose

（5）cors
①cors会在http请求中添加origin的请求头
②ajax不支持跨域，cors是变种的ajax
③同源下，fetch就是ajax

fetch('/some/url', {method: 'get'
}).then(function(response) {}).catch(function(err) {})

④参考资料：http://www.ruanyifeng.com/blog/2016/04/cors.html

3-14 安全类

一、CSRF
1、基本概念和缩写
CSRF，通常被称为跨站请求伪造，英文名Cross-site request forgery。
2、攻击原理
在这里插入图片描述
（1）前提：①用户在注册网站A登录过，②接口有漏洞。
（2）引诱点击，往往是一个链接（这个链接自动携带cookie，不会带token），指向网站A的api，接口是get类型。浏览了A，浏览器自动生成新的cookie，网站A拿到cookie，接口运行。
3、防御措施
（1）token验证。
注册网站，或者访问网站，服务器自动向本地存储一个token。
（2）refer验证。
服务器判断页面是不是我这个站点来的页面。
（3）隐藏令牌。
http的head头，不会放在链接上。
二、XSS
1、基本概念和缩写
XSS(cross-site scripting 跨域脚本攻击)
2、攻击原理：http://www.imooc.com/learn/812
原理：向页面注入脚本。
eg:提交区（评论区）写img标签，script标签，利用合法渠道向页面注入js
3、防御措施：http://www.imooc.com/learn/812
宗旨：让xss不可执行。
三、CSRF ,XSS的区别
XSS是向页面注入js去运行，然后在js函数体中做他想做的事情。
CSRF是利用网站漏洞，自动执行接口。用户需要登陆网站。

3-15 算法类

通常情况下，搞金融的都会考算法。
一、排序
在这里插入图片描述
快速排序：https://segmentfault.com/a/1190000009426421
选择排序：https://segmentfault.com/a/1190000009366805
希尔排序：https://segmentfault.com/a/1190000009461832
二、堆栈、队列、链表
堆栈：https://juejin.im/entry/58759e79128fe1006b48cdfd
队列：https://juejin.im/entry/58759e79128fe1006b48cdfd
链表：https://juejin.im/entry/58759e79128fe1006b48cdfd
（1）js数组本身就具备堆栈和队列特性。
（2）堆栈：先进后出。
三、递归
递归：https://segmentfault.com/a/1190000009857470
（1）60%的算法题都用到递归。
四、波兰式和逆波兰式
理论：http://www.cnblogs.com/chenying99/p/3675876.html
源码：https://github.com/Tairraos/rpn.js/blob/master/rpn.js

第04章二面三面

4-01 渲染机制

一、什么是DOCTYPE及作用
DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。
1、常见的doctype有哪些？
①HTML5：
②HTML4.01 Strict：该DTD包含所有html元素和属性，但不包括展示性的和启用的元素，如font
③HTML 4.01 Transitional ：该DTD包含所有html元素和属性，包括展示性的和启用的元素，如font
2、h5的doctype怎么写
<!DOCTYPE html>
二、浏览器渲染过程
1、在浏览器中输入url，发生了哪些事情？
dns解析、发送到服务器、服务器响应、浏览器渲染过程
2、浏览器的渲染过程:
在这里插入图片描述

三、重排Reflow
1、定义
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow
2、触发reflow
（1）增加、删除、修改dom结点时，会导致reflow或repaint
（2）移动dom的位置，或是搞个动画的时候
（3）修改css样式
（4）resize窗口的时候（移动端没有这个问题），或者是滚动的时候，有可能会触发。
（5）修改网页的默认字体时
3、如何避免reflow
四、重绘Repaint
1、定义
当各种盒子的位置、大小及其他属性，如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，也是页面的内容出现了，这个过程称之为repaint
即页面呈现的内容统统画在屏幕上。
2、触发repaint
（1）dom改动
（2）css改动
3、如何尽量减少repaint
向浏览器中一次repaint一个节点
五、布局layout

4-02 js运行机制

一、

console.log(1);
setTimeout(function(){console.log(2);
}, 0);
console.log(3);
// 依次输出1，3，2

1、js是单线程的。
2、任务队列。
3、setTimeout就是一个异步任务。异步任务要挂起。
4、同步任务没有被执行完之前，所有异步任务都是不会被执行的。

二、

console.log('A');
while(1) {};
console.log('B');
// 输出A(因为1一直为true,while一直在执行，页面一直在转，执行不到B)

三、

for(var i = 0; i < 4; i++) {setTimeout(funciton(){console.log(i);}, 1000)
}

1、for循环是一个同步任务。
2、队列插入的时间。
3、浏览器的timer模块（主要处理setTimeout、setInterval）：定时器到了那个时间，才会把语句放在异步队列。而不是执行到这个异步任务的时候，就会把它放入异步队列，如setTimeout(function(){console.log(i)}, 1000)，是在1000ms后才会被放入异步队列中。
四、
1、如何理解js的单线程
一个时间内，js只能干一件事
2、什么是任务队列
同步任务，异步任务，异步任务的执行时间。
3、什么是event loop
事件循环。
在这里插入图片描述
运行栈：执行同步任务的
浏览器js引擎遇到了setTimeout，识别了这是一个异步任务，不会将其放入运行栈，而是把它拿走，拿走了之后也没有立马放到异步任务队列中，按延迟时间放入到异步队列中。同步任务没有正在执行的东西，就会读异步任务，把任务放到运行栈中，执行完了又去读异步任务，把任务放到运行栈中，如此循环。
五、异步任务
1、哪些语句会放入异步任务队列中?
setTimeout和setInterval
dom事件
ES6中的promise

4-03 页面性能

一、题目：提升页面性能的方法有哪些？
1、资源压缩合并，减少http请求。
2、非核心代码异步加载。
（1）异步加载的方式
①动态脚本加载
script标签，加入到body中
②defer
加载js的时候，script标签加defer和async
③async
（2）异步加载的区别
①defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次进行。
②async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关。
3、利用浏览器缓存。
（1）缓存的分类
①强缓存

// Expires：
Expires:Thu, 21 Jan 2017 23:39:02 GMT // value值表示的是绝对时间，一般都是服务器时间，可能与客户端时间不一样
// Cache-Control：
Cache-Control: max-age=3600 // value值是以客户端时间为准

如果服务器这两个时间都下发了，以后者为准
②协商缓存：与服务器协商是否要用，是否过期

// Last-Modified If-Modified-Since
Last-Modified: Web, 26 Jan 2017 00:35:11 GMT
// Etag If-None-Match
// if-none-match的值就是服务器发过来的etag的值

1）与浏览器缓存相关的http头有哪些？
Expires、Cache-Control、Last-Modified、If-Modified-Since、Etag、If-None-Match
（2）缓存的原理。
4、使用cdn
5、预解析dns
（1）

<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

（2）强制打开a标签的dns预解析

<meta http-equiv="x-dns-prefetch-control" content="on">

页面中所有a标签，默认打开了dns预解析，如果链接是https开头的，默认关闭dns预解析

4-04 错误监控类

一、如何检测js错误？（如何保证你的产品质量？）
1、前端错误的分类？
（1）即时运行错误：代码错误
①try.catch
②window.onerror：只能捕获即时运行错误
（2）资源加载错误，资源加载错误不会向上冒泡，不会冒泡到window
①object.onerror：图片有onerror事件，script标签也有onerror事件
②performance.getEntries：高级浏览器，可以间接拿到没有加载的资源错误。返回的是一个数组。

performance.getEntries().forEach(item=> {console.log(item.name)}); // 打印出来的是已成功加载的资源
document.getElementByTagName('img'); // 打印出来的是所有图片资源（包括已经成功加载和没有成功加载）

③error事件捕获：资源加载错误不会冒泡，但是会发生捕获
2、错误的捕获方式？（同上述方法3的error事件捕获）

window.addEventListener('error', function(e) {console.log('捕获：', e);
}, true); // 第三个参数是true:捕获, false:冒泡

延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？
①在script标签增加crossorigin属性。
②设置js资源响应头Access-Control-Allow-Origin:*
3、上报错误的基本原理？
（1）采用ajax通信的方式上报。
能做到，但是所有的错误监控都不是通过这种方式做的。
（2）采用image对象上报。
所有的错误方式都是通过这种方式上报的。

(new Image()).src = 'http://baidu.com/tesjk?r=tksjk'; // 不需要借助任何第三方库，错误上报路径后面可以加任何参数，如r=tksjk等

4、参考资料：http://www.cnblogs.com/luozhihao/p/8635507.html

第05章三面四面

5-01 业务能力

一、业务能力、团队协作能力、事务推动能力、带人能力、其他能力。
二、面试题
1、我做过什么业务？一两句话
独立负责360数据彩票走势图开发
2、负责的业务有什么业绩？最好是能量化：用户增加了多少，性能提升了多少，收入增加了多少
历时3周完成所有彩种开发，用户量上涨15%
3、使用了什么技术方案？
区别常规canvas方案，使用vml+svg方案
canvas：ie9以下不兼容，如果页面高度大于2000px，canvas无法绘画。
4、突破了什么技术难点？
解决了走势图高级绘图板的开发
5、遇到了什么问题？
橡皮擦的问题，动态连线甲酸等
6、最大的收获是什么？
对业务的理解更加深入，对技术图表更有把握

5-02 团队协作能力

一、团队协作能力（主动描述）
1、对彩票足球的奖金算法有深入研究，业内第一。
2、为h5、客户端讲解算法并协助完成开发。
3、和php、pm同学在一天的时间内快速支持足球竞猜活动。
4、和leader独立负责彩票pc站。
二、事务推动能力
1、对历史算法更新换代。
2、推动专题的CMS架构。
3、主导客服系统的建设。
4、完成多项专利的申请。
三、带人能力
1、带一个社招完成数字彩的开发和维护。
2、带一个实习生完成专题活动的开发。
3、代码规范、review

第06章课程终面

6-01 职业竞争力

一、在职业竞争力、职业规划中要表现出：
1、乐观积极
2、主动沟通
3、逻辑顺畅
4、上进有责任心
5、有主张，做事果断
二、职业竞争力
公司这么多人应聘，为什么要招你？
1、业务能力
可以做到行业第一
2、思考能力
对同一件事可以从不同角度去思考，找到最优解
3、学习能力
不断学习新的业务和技术，沉淀、总结
4、无上限的付出
对于无法解决的问题可以熬夜、加班
三、职业规划
1、目标是什么
在业务上成为专家，在技术上成为行业大牛
2、近阶段的目标
不断的学习积累各方面的经验，以学习为主
3、长期目标
做几件很有价值的事情，如开源作品、技术框架等。
4、方式方法
先完成业务上的主要问题，做到极致，然后逐步向目标靠拢
5、多赞美公司，多赞美hr

第07章面试总结

7-01 面试总结

一、jd描述一定要看。
二、简历：对照jd改写出相吻合的简历，对于未掌握的技术栈快速复习、理解。
三、自我介绍：一定要打草稿，展示什么优势、描述什么项目，切忌临场发挥。
四、gulp是通过流来传递的
五、http://www.w3school.com.cn，html,html5,css,css3,javascript的属性等。
六、算法：LeetCode，https://leetcode.com/problemset/algorithms

20190218：《imooc- 揭秘一线互联网企业前端javaScript高级面试》

（aSuncat：①内容较为冗余，不复杂的内容，说得却不够简洁。②很多简单的东西，对于高级面试课程，可以一笔带过，讲师却浮于表面过多解释。③第三章讲解jQuery源码，原型-构造函数-实例，可以看一下）

第01章课程介绍

01-01 课程介绍

一、基础知识
1、es6常用语法
class、module、promise等
2、原型高级应用
结合jQuery和zepto源码
3、异步全面讲解
从原理到jQuery，再到promise
二、框架原理
1、虚拟dom
存在价值，如何使用，diff算法
2、MVVM dom
vue 响应式、模板解析、渲染
3、组件化react
组件化、jsx、vdom、setState
三、混合开发
1、hybrid
2、hybrid vs h5
基础，和h5对比，上线流程
3、前端客户端通讯
通讯原理，js-bridge封装
四、热爱编程
1、读书博客
2、开源
五、高级js面试中，面试官爱问“源码”、“实现”

01-02 架构

一、es6
1、模块化的使用和编译环境
2、class和js构造函数的区别
3、promise的用法
4、es6其他常用功能
二、异步
1、什么是单线程，和异步有何关系
2、什么是event-loop
3、目前js解决异步的方案有哪些
4、如果只用jquery，如何解决异步
5、promise的标准
6、async/await的使用
三、原型
1、原型如何实际应用
2、原型如何满足扩展
四、vdom
1、什么是vdom，为何要用vdom
2、vdom如何使用，核心函数有哪些？
3、了解diff算法吗
vom的核心算法
五、mvvm
1、之前使用jquery和现在使用vue或react框架的区别
2、你如何理解mvvm
3、vue如何实现响应式
4、vue如何解析模板
5、介绍vue的实现流程
六、组件化
1、对组件化的理解
2、jsx是什么
3、jsx和vdom什么关系
4、简述react和setState
5、阐述自己如何比较react和vue
七、hybrid
1、hybrid是什么，为何要用hybrid
2、hybrid如何更新上线
3、hybrid和h5如何区别
4、js如何与客户端通信
八、其他
如何写博客
如何做开源

第02章 es6语法

02-01 开始

一、es6模块化如何使用，开发环境如何打包？
二、class和普通构造函数有何区别？
三、promise的基本使用和原理？
四、总结一下es6其他常用功能？

2-02 es6模块

一、es6模块化如何使用，开发环境如何打包？
1、模块化的基本语法
export/ˈekspɔːrt/

export default{a: 100
}

2、开发环境配置
3、关于js众多模块化标准

2-02 babel-new-part

一、开发环境-babel （处理es6语法）
1、电脑有node环境，运行npm init
2、npm install --save-dev babel-core babel-preset-es2015 babel-pareset-latest
3、创建.babelrc文件
4、npm install --global babel-cli
5、babel -version
6、创建 ./src/index
7、.babelrc文件

	"presets": ["es2015", "latest"],"plugins": []

8、sudo npm install -g babel-cli (windows需要管理员模式)
9、babel src/indes.js 就能得到es6转换为es5的代码

2-05 模块化-webpack

一、webpack （处理es6模块，当然还有其他功能）
1、npm install webpack bable-loader --save-dev
2、配置webpack.config.js

module.exports = {entry: './src/index.js',output: {path: __dirname,filename: './build/bundle.js'},module: { // 模块rules: [{test: /\.js?$/,exclude: /(node_modules)/, // 安装第三方插件创建的，是第三方插件的代码loader: 'babel-loader'}]}
}

3、配置pacakage.json的scripts

“scripts”: {"start": "webpack" // 运行webpack,根据webpack.js对babel进行编译，输出bundle.js
}

4、运行npm start
5、index.html中script 的src 是build/bundle.js
6、http-server -p 8881 // 启动一个静态服务

2-06 rollup介绍

一、rollup
1、npm init
2、npm i --save-dev rollup ruollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest babel-core
3、配置.babelrc(一般面试官不会问这个配置文件里的东西)

{"presets": [["latest": {"es2015": {"modules": false}}],"plugins": ["external-helpers"]]
}

4、配置rollup.cofig.js

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
export default {entry: 'src/index.js',format: 'umd',  // 格式，兼容直接引入，兼容amd，兼容comonJsplugins: [resolve(),babel({exclude: 'node_modules/**'})],dest: 'build/bundle.js'
}

5、package.json里的scripts的start改成rollup -c rollup.config.js
6、npm start
二、rollup功能单一，只能打包模块化，webpack功能强大
参考《设计原则》和《linux/unix设计思想》
三、rollup没有冗余代码，调试方便。

2-08 模块化-总结

一、模块化
1、amd成为标准，require.js（也有cmd）
2、前端打包工具，使nodejs可以被使用（commonJs虽然是后端的，但是可以被打包成前端可识别的方式）
3、es6出现，想统一现在所有模块化标准
4、nodejs积极支持，浏览器尚未统一
5、可以自造库lib，但是不要自造标准（造轮子是属于造类，造库，但是不属于造标准）
二、问题解答
1、语法：import export(注意有无default)
2、环境：babel编译es6语法，模块化可用webpack和rollup
3、扩展：说一下自己对模块化标准统一的期待

2-09 class-js构造函数

1、class和普通构造函数有何区别？
（1）js构造函数

function MathHandle(x, y) { // 构造函数this.x = x;this.y = y;
}
MathHandle.prototype.add = function() { // 原型的一个扩展return this.x + this.y;
}
var m = new MathHandle(1, 2); // new一个实例
console.log(m.add())

（2）class基本语法

class MathHandler{ // MathHandler是一个构造函数，构造函数都有显式原型:prototypeconstructor(x, y) { // 构造器，java,c#的语法，面向对象高级语言的语法this.x = x;this.y = y;}add() {return this.x + this.y;}
}
const m = new MathHandle(1, 2); // 实例，所有实例都会有一个隐式原型:__proto__
console.log(m.add());typeof MathHandle  // 'function'
MathHandle.prototype.constructor === MathHandle; // true
m.__proto__ === MathHandle.prototype; // true

（3）语法糖
class本身就是一个语法糖
（4）继承
①低级构造函数的原型，赋值成高级构造函数的实例
②

function Animal(){this.eat = function() {console.log('animal eat')}}
function Dog(){this.bark = function() {console.log('dog dark')}}
Dog.prototype = new Animal(); // 绑定原型，实现继承
var hashiqi = new Dog();

class的继承

class Animal() {constructor(name) {this.name = name;}eat() {alert(this.name + 'eat);}
}
class Dog extends Animal{constructor(name) {super(name); // 如果有class,extends，则要用super(),super是被继承的class的constructorthis.name = name;}eat() {alert(this.name + 'eat);}
}

2-12 class-总结

一、问题解答
1、class 在语法上更加贴合面向对象的写法
2、class实现继承更加易读、易理解
3、更易于写java等后端语言的使用
4、本质还是语法糖，使用prototype

2-15 promise总结

一、promise
1、new promise实例，要return
2、new promise时要传入函数，函数有resolve、reject两个参数
3、成功时执行resolve()，失败时执行reject()
4、then监听结果

2-16 常用功能演示

一、总结一下es6其他常用功能
1、let、const /'kɑnst/
const定义常量，常量不能被重新赋值
2、多行字符串/模板变量
js拼接变量字符串模板

console.log(`输出：${name}`)

3、解构赋值
整体数组或对象中拿到其中一个元素或属性值

// obj
const obj = {a: 10, b: 20, c:30};
const {a, c} = obj;
console.log(a); // 10
console.log(c); // 30// arr
const arr = ['xxx', 'yyy', 'zzz'];
const [x, y, z] = arr;
console.log(x); // xxx
console.log(z); // zzz

4、块级作用域
for循环

// js
var obj = {a: 100, b: 200};
for (var item in obj) {console.log(item)};
console.log(item); // 'b'// es6
const obj = {a: 100, b: 200};
for (let item in obj) {console.log(item)};
console.log(item); // undefined

5、函数默认参数

// js
function(a, b) {if(b == null) {b = 0;}
}
// es6
function (a, b=0) {}

6、箭头函数
彻底解决了之前函数this指向全局window对象的问题

function fn() {console.log('real', this); // {a: 100}var arr = [1, 2, 3];// 普通jsarr.map(function(item) {console.log('js',this); // windowreturn item + 1;});// 箭头函数arr.map(item => {console.log('es6', this); // {a: 100}return item + 1;});
}
fn.call({a: 100})

第03章原型

3-01 开始

1、说一个选型的实际应用
2、原型如何体现它的拓展性

3-02 实际应用-Jquery使用

一、jquery
多个实例都可以共用一个方法时，说明这些方法（eg:css(), html()）都是来自于一个构造函数的原型中

var $p = $('p'); 
$p.css('color', 'red'); // css是原型方法
console.log($p.html()); // html是原型方法 // 如果有多个p元素，$p.html()默认是最后一个元素的html

<body>
<div><p>段落1</p><p>段落2</p>
</div><!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script>(function(window) {var jQuery = function(selector) {return new jQuery.fn.init(selector); // new了一个构造函数的实例};jQuery.fn = {css: function(key, value) {},html: function(value) {return '这是html';}};var init = jQuery.fn.init = function(selector) { // 构造函数var slice = Array.prototype.slice;
//      var dom = document.querySelectorAll(selector); // nodeList[p,p]:__proto__是nodeListvar dom = slice.call(document.querySelectorAll(selector)); // [p, p]:__proto__是Array // selector转换成dom的list,然后转换成数组console.log(dom);var i, len = dom ? dom.length : 0;for (i = 0; i < len; i++) {this[i] = dom[i]; // 所有的元素都变成实例的属性}this.length = len;this.selector = selector || '';};init.prototype = jQuery.fn; // 构造函数的原型赋值成jQuery.fn，jQury.fn是一个js对象window.$ = jQuery;})(window);$p = $('p'); // 初始化实例console.log($p.html());

二、百度bootcdn进入官网，能得到jquery的源码

3-09 扩展性-插件机制

一、扩展原型
将getNodeName属性放在构造函数的原型中，不是直接给构造函数的原型赋值，而是通过$.fn赋值

$.fn.getNodeName = function() {return this[0].nodeName;  // this[0]可以得到上述的第一个p标签，this就是实例$p,init这个构造函数里创建了this[i];
}

好处：
1、只有$会暴露在window全局变量（只暴露一个变量，不然容易造成全局变量的污染）
2、将插件扩展统一到$.fn.xxx这一个接口，方便使用。

第04章异步

4-01 开始

一、什么是单线程，和异步有什么关系？
1、单线程：只有一个线程，同一时间只能做一件事情。
setTimeout的时间为10的9次方，可以测试卡顿
2、原因：避免dom渲染的冲突
（1）
①浏览器需要渲染dom
②js可以修改dom结构
③js执行的时候，浏览器dom渲染会暂停
④两段js也不能同时执行（都修改dom就冲突了）
⑤webworder支持多线程，但是不能访问dom
（2）等待也属于占线程的一种
3、解决方案：异步
问题一：没按照书写方式执行，可读性差
问题二：callback中不容易模块化
4、实现方式：event-loop
二、js轮询event-loop
1、事件轮询/事件循环，js实现异步的具体解决方案
2、流程
（1）同步代码，直接执行
（2）异步先放在异步队列中
（3）待同步函数执行完毕，轮询执行异步队列的函数
ajax加载完成，即ajax什么时候success，就什么时候把ajax中的函数放入到异步队列中
①什么是异步队列，何时被放入异步队列
a.立即放入。b.延时时间到了再放入。c.ajax请求成功
②轮询的过程
三、是否用过jQuery的Deferred
1、deferred：延迟
2、jQuery1.5，可使用jQuery deferred

// 
ajax.done(function() {console.log('sucess1');
}).fail(function() {console.log('fail');}).done(function() {'success2'});
// 
ajax.then(function() {console.log('success1')}, function() {console.log('error1')}).then(function() {console.log('success1')}, function() {console.log('error1')})

①无法改变js异步和单线程的本质
②只能从写法上杜绝callback这种形式（ajax请求的success）
③它是一种语法糖形式，但是解耦了代码
④很好的体现：开发封闭原则，对扩展开放，对修改封闭
四、promise的基本使用和原理
1、jQuery Deferred

function waitHandler() {var dtd = $.Deferred();var wait = function(dtd) {var task = function() {console.log('处理);dtd.resolve();}setTimeout(function() {task();}, 100);// return dtd;return dtd.promise(); // 返回的是promise对象，而不是dtd对象。promise只有.then/.done/.fail这些方法，没有resolve(), reject()}return wait(dtd);
}
var w = waitHandler();
// w.then(function() {}, function() {}).then(function() {}, function() {});
// $.when(w).then();

（1）、dtd的api可分成2类，用意不同
①dtd.resolve dtd.reject
②dtd.then dtd.done dtd.fail
Deferred实例既能执行主动干预成功或失败的函数（eg：.resolve,.reject），又能执行被动监听结果的函数（eg:.then, .done, .fail）
2、jQuery1.5对ajax的改变举例
3、说明如何简单的封装，使用derrerred
4、说明promise和deferred的区别
5、promise.all、promise.race

// promise.all接收一个promise对象的数组
// 接收到的datas是一个数组，一次包含了多个promise// promise.race接收一个包含多个promise对象的数组
// 接收到的data即最先执行完成的promise的返回值

①race：赛跑

6、w3c标准、ddt标准、ecma标准
7、如果console.log打印出来的是native code：浏览器自己定义的，浏览器不会打代码公布给你
8、

promise.then().catch();

9、promise标准
状态变化、then函数
五、介绍一下async/await（和promise的区别，联系）
1、then只是将callback拆分了。
2、async/await是最直接的同步写法

import 'babel-polyfill';
function load
const load = async function() {const result1 = await loadImg(src1);console.log(result1);const result2 = swait loadImg(src2);console.log(result2);
}
load();

①使用await，函数必须用async标识
②await后面跟的是一个promise实例
③需要babel-polyfill
六、总结一下当前js解决异步的方案
1、jQuery Deferred
2、promise
3、async/ await

第05章虚拟dom

5-01 开始

一、virtual/ˈvɝtʃʊəl/ dom
1、vdom是vue和react的核心。
2、用js模拟dom结构，提高重绘性能。
3、浏览器最费性能的是dom操作，js操作比dom操作快多了。
二、vdom是什么？为何会存在vdom?
三、vdom的如何应用，核心api是什么？
1、snabbdom：开源vdom库
（1）①h函数：生成dom节点

h('<标签名>', {...属性...}, [...子元素...])
h('<函数名>', {...属性...}, '...')

②patch函数:进行对比，进行打补丁渲染

patch(container, vnode)
patch(vnode, newVnode)

（2）

var newVnode = h('table', {}, data.map(function(item) {var tds = [];var i;for (i in item) {if (item.hasOwnProperty(i)) {tds.push(h('td', {}, item[i] + ''));}}return h('tr', {}, tds);
}))

四、介绍一下diff算法？
1、diff test1.txt test2.txt
就能比较出两个文件的差异
2、git diff test1..html
文件内部改动：增删改
3、diff在线对比，和mac的svn客户端：cornerstone代码版本之间的对比一样
4、递归：自己调用自己，如果不能实现递归，就不能算是图灵完美语言
5、虚拟dom转换成真实dom
①没有旧节点

function createElement(vnode) {var tag = vnode.tag; // 'ul'var attrs = vnode.attrs || {};var children = vnode.children || [];if (!tag) {return null;}// 创建真实的dom元素var elem = document.createElement(tag);// 属性var attrName;for (attrName in attrs) {if (attrs.hasOwnProperty(attrName)) { // hasOwnProperty：true-是自己的属性，而不是原型property中的属性elem.setAttribute(attrNam, attrs[attrName]);}}// 子元素children.forEach(function(function(childVnode)){// 给elem添加子元素elem.appendChild(createElement(childVnode));})// 返回真实的dom元素return elem;
}

6、diff实现过程

patch(container, vnode) 和patch(vnode, newVnode);
createElement
updateChildren

7、（1）diff算法是linux的基础命令

（2）vdom中应用diff算法是为了找出需要更新的节点

第06章 mvvm和vue

6-03

一、中国vuejs官网：cn.vuejs.org

6-04

一、jquery和vue的区别
1、数据和视图的分离，解耦，开发封闭原则（对扩展开放、对修改封闭）
2、vue：以数据驱动视图，只关心数据变化，dom操作被封装

6-08

一、mvvm：model view viewModel
Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。data。
View 代表UI 组件，它负责将数据模型转化成UI 展现出来。视图，html。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。连接器，对应newVue()，view可以通过事件绑定影响到model，model可以通过数据绑定影响到view。
二、mvvm是mvc发展过来的
三、mvvm框架实现的三要素？（vue的三要素）
1、响应式：vue如何监听到data的每个属性变化？
（1）修改data属性后，vue立刻监听到。Object.defineProperty

var __name = 'may';
Object.defineProperty(obj, 'name',{get: function() {return __name;},set: function(newVal) {__name = newVal; // 修改__name = 'april',obj.name就会变成april}
})

（2）data属性代理到vm上
2、模板引擎：vue的模板如何被解析，指令如何处理？
（1）模板是什么
①本质：字符串
②有逻辑，如v-if, v-for等
③与html格式很像，但有很大区别
④模板最终必须转换成Js代码（js函数-render函数），因为
有逻辑（v-if, v-for），必须用js才能实现（图灵完美语言）
转换为html渲染页面，必须用js才能实现
（2）render函数
（3）render函数与vdom
3、渲染：vue的模板如何被渲染成Html?以及渲染过程？

6-16

一、《js语言精粹》，美国
尽量不要用with，会给开发、测试带来很大的成本

6-19

一、vue源码搜索code.render，能找到var code = generate(ast, options),就能得到render函数。

6-20 render函数-讲解4

一、
（1）vue2.0开始，开始支持预编译，
开发环境：写模板
编辑打包：
生产环境：js
（2）react组件化
jsx模板
编译：->js代码
jsx语法 - 标准
二、v-model：双向事件绑定，有get、set
三、render函数返回的是vnode

6-25

一、vue的整个实现流程
1、第一步：解析模板成render函数
template
2、第二步：响应式开始监听
object.defineProperty
data属性代理到vm上
3、第三步：首次渲染，显示页面，且绑定依赖
（1）为何要监听get,直接监听set不行吗？
①data中有很多属性，有些被用到，有些可能不被用到（data中没有人访问，就不会用get，如没有{{aaa}}指的就是aaa没有被访问）
②被用到的会走到get，不被用到的不会走到get
③未走到get中的属性，set的时候也无需关心
④避免不必要的重复渲染
4、第四步：data属性变化，触发rerender
defineProperty, get, set
（1）修改属性，被响应式的set监听到
（2）set中执行updateComponent
（3）updateComponent重新执行vm._render()
（4）生成的vnode和prevVnode,通过Patch进行对比
渲染到html

6- 28

第07章组件化和react

aSuncat：没看

第08章 hybrid

aSuncat：没看

第09章课程总结

9-01 不讲nodejs

1、nodejs
（1）stream, server端的概念
（2）fs或者存储，server端的概念
（3）以及，服务器的运维（均衡、监控、报警灯）
（4）nodejs并不是像原型、异步一样，隶属于Js的一个模块。
（5）nodejs是一个独立的技术栈，只不过用了js语法。

9-02 如何热爱编程

1、如何证明你热爱编程
（1）看书
构建知识体系的最好方式
（2）写博客
（3）做开源

9-03 总结

对整个视频的总结，可以看一下，理个大纲。

20190228：《imooc-前端javascript面试技巧》

第01章

1-03 几个面试题

1、js使用typeof能得到的哪些类型？
考点：js变量类型
2、何时使用===，何时使用==？
考点：强制类型转换
3、window.onload和DOMcontentLoaded的区别？
考点：浏览器渲染过程
4、用js创建10个<a>标签，点击的时候弹出来对应的序号？
考点：作用域
5、简述如何实现一个模块加载器，实现类似require.js的基本功能？
考点：js模块化
6、实现数组的随机排序
考点：js基础算法

第02章

2-01

一、面试题
1、js使用typeof能得到的哪些类型？
考点：js变量类型
typeof只能区分值类型

typeof undefined // undefined
typeof null // object
typeof console.log // function
typeof NaN // number

2、何时使用===，何时使用==？
考点：强制类型转换
null == undefined; // true
3、js中有哪些内置函数？
4、js变量按照存储方式区分有哪些类型，并描述其特点？
5、如何理解json？
二、js数据类型
值类型：undefined、string、number、boolean
引用类型：对象、数组、函数
1、

var a = 100;
var b = a;
a = 200;
console.log(b); // 100

var a = {age: 20};
bar b = a;
b.age = 21;
console.log(a.age); // 21

2、

console.log(100 & 0);  // 0
console.log('' || 'abc'); // 'abc'
console.log(!window.abc); // true
var a = 100;
console.log(!!a); // true;

3、

obj.a == null; // 就相当于是obj.a == null || obj.a == undefined，jquery源码就是这样写的

三、js中的内置函数
1、js中有哪些内置函数-数据封装类对象
Number、String、Boolean
Array、Object、Function
Date、RegExp、Error
2、js按存储方式区分变量类型
js变量按照存储方式区分为哪些类型，并描述其特点：值类型、引用类型

2-03

一、如果理解json
只不过是一个js对象而已，也是一种数据格式

2-04

值类型：不会因为赋值而相互干扰
false： 0 、NaN、‘’、null、undefined
js内置对象：Math、JSON

var obj = {}
if (obj.a == null) {} // 判断a这个属性是否存在

function(a, b) {if (a == null) {} // 判断a这个参数是否存在
}

2-05

一、题目
1、如何准确判断一个变量是数组类型？
instanceof Array
2、写一个原型链继承的例子？
3、描述一个new一个对象的过程
4、zepto(或其他框架)源码中如何使用原型链
二、知识点
1、构造函数
2、构造函数-扩展
使用instanceof判断一个函数是否是一个变量的构造函数
3、原型规则和示例
4、原型链
5、instanceof

2-06

一、原型规则是学习原型链的基础
二、原型规则
1、所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了“null”以外）。
2、所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象（除了“null”以外）。
3、所有的函数，都有prototype属性，属性值也是一个普通的对象。
4、所有的引用类型（数组、对象、函数）， __proto__属性值指向它的构造函数的“prototype”属性值。

var obj = {};
obj.__proto__ === Object.prototype; // true

（1）当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。

2-07

一、循环对象自身的属性

var item;
for (item in f) {// 高级浏览器已经在for in中屏蔽了来自原型的属性// 但是建议大家加上这个判断，保证程序的健壮性if (f.hasOwnProperty(item)) {console.log(item);}
}

2-09

一、instanceof用于判断引用类型属于哪个构造函数的方法

第03章 js基础知识（中）

3-01

fn(); // 能执行
function fn() {// 声明
}fn1(); // 报错，undefined
var fn1 = function () {// 表达式
}

二、aSuncat：表达式：https://www.cnblogs.com/fangsmile/p/8337021.html

3-02 作用域和闭包-执行上下文

一、题目
1、说一下对变量提升的理解
2、说明this几种不同的使用场景
3、创建10个<a>标签，点击的时候弹出来对应的序号。
4、如何理解作用域
5、实际开发中闭包的应用。
二、知识点
1、执行上下文。
2、this
3、作用域
4、作用域链
5、闭包
三、执行上下文
1、范围：一段

var a = {name: 'A',fn: function() {console.log(this.name);}
}
a.fn(); // this == a
a.fn.call({name: 'B'}); // this === {name: 'B'}
var fn1 = a.fn;
fn1(); // this === window

五、this
1、作为构造函数执行

function Foo(name) {this.name = name;
}
var f = new Foo('zhangsan');

2、作为对象属性执行

var obj = {name: 'A',printName: function() {console.log(this.name);}
}
obj.printName();

3、作为普通函数执行

function fn() {console.log(this);
}
fn();

4、call apply bind

function fn1(name, age) {alert(name);console.log(this);
}
fn1.call({x: 100}, 'zhangsan', 20);
fn1.apply({x:100}, ['zhangsan', 20])

var fn2 = function (name, age) { // 必须是函数表达式，不能是函数声明，即不能是function fn2(name, age) {}alert(name);console.log(this);
}.bind({y:200});
fn2('zhangsan', 20);

3-05

一、js没有块级作用域，有函数、全局作用域

3-07

一、闭包
闭包是函数和声明该函数的词法环境的组合。

function F1() {var a = 100;// 返回一个函数（函数作为返回值）return function() { // 这个函数的父级作用域是F1，看定义时的作用域，而不是执行时的作用域console.log(a);}
}
// f1得到一个函数
var f1 = F1();
var a = 200;
f1();

二、闭包的使用场景
1、函数作为返回值（一中的demo）
2、函数作为参数传递

function F1() {var a = 100;return function() {console.log(a); // 自由变量，父作用域寻找}
}
var f1 = F1();
function F2(fn) {var a = 200;fn();
}
F2(f1);

3-09

一、创建10个<a>标签，点击的时候弹出对应的序号

var i;
for(i = 0; i < 10; i++) {(function(i) {// 函数作用域var a = document.createElement('a');a.innerHTML = i + '<br>';a.addEventListener('click', function(e) {e.preventDefault();alert(i);});document.body.appendChild(a);})(i);
}

二、如何理解作用域
1、自由变量
2、作用域链，即自由变量的查找
3、闭包的两个场景
三、实际开发中闭包的应用

// 闭包实际应用中主要用于封装变量，收敛权限
function isFirstLoad() {var _list = []; // 有_的变量说明是私有变量，函数内部使用的return function(id) {if (_list.indexOf(id) >=0) {return false;} else {_list.push(id);return true;}}
}
// 使用
var firseLoad = isFirstLoad();
firstLoad(10); // true
firstLoad(10); // false
firstLoad(20); // true
// 你再isFirstLoad函数外面，根本不可能修改掉_list的值

第04章 js基础知识（下）

4-01

一、js三座大山：原型和原型链、作用域和闭包、异步和单线程
二、题目
1、同步和异步的区别是什么？分别举一个同步和异步的例子
（1）同步会阻塞代码执行，而异步不会
（2）alert是同步，setTimeout是异步。
2、一个关于setTimeout的笔试题
3、前端使用异步的场景有哪些？
二、知识点
1、什么是异步（对比同步）
2、前端使用异步的场景
3、异步和单线程
三、何时需要异步
1、在可能发生等待的情况
2、等待过程中不能像alert一样阻塞程序进行
3、因此，“等待的情况”都需要异步
四、前端使用异步的场景
1、定时任务：setTimeout、setInterval
2、网络请求：ajax请求、动态加载

console.log('start');
var img = document.createElement('img');
img.onload = function() {console.log('loaded');
}
img.src = 'https://ss0.baidu.com/60NW/a.jpg';
console.log('end');
// 打印出来的是start, end, loaded

3、事件绑定

4-05 日期和match

一、题目
1、获取2017-06-10格式的日期
2、获取随机数，要求是长度一致的字符串格式
（1）aSuncat:

Math.random().toFixed(2) ;  // toFixed(n):保留n位小数

（2）

var random = Math.random();
var random = random + '0000000000'; // 后面加上10个零
var random  = random.slice(0, 10);
console.log(random);

3、写一个能遍历对象和数组的通用forEach函数

function forEach(obj, fn) {var key;if (obj instanceof Array) {// 准确判断是不是数组obj.forEach(function(item, index) {fn(index, item);})} else {// 不是数组就是对象for (key in obj) {if (obj.hasOwnProperty(key) {fn(key, obj[key]);})}}
}
var arr = [1, 2, 3];
// 注意，这里参数的顺序换了，为了和对象的遍历格式一致
forEach(arr, function(index, item) {console.log(index, item);
});var obj = {x:100, y:200};
forEach(obj, function(key, value) {console.log(key, value);
})

二、日期

Date.now(); // 获取当前时间毫秒数
var dt = new Date();
dt.getTime(); // 获取毫秒数
dt.getFullYear(); // 年
dt.getMonth(); // 月（0-11）
dt.getDate(); // 日（0-31）
dt.getHours(); // 小时（0-23）
dt.getMinutes(); // 分钟（0-59）
dt.getSeconds(); // 秒（0-59）

三、Math
1、获取随机数Math.random(); // 清除缓存用的

4-06 数组和对象的API

一、数组API
1、forEach 遍历所有元素

var arr = [1, 2, 3];
arr.forEach(function(item, index) {// 	遍历数组的所有元素console.log(index, item);
});

2、every 判断所有元素是否都符合条件

var arr = [1, 2, 3];
var arr1 = arr.every(function(item, index) {if (item < 4) {return true;}
})
console.log(arr1); // true

3、some 判断是否有至少一项元素符合条件

var arr = [1, 2, 3];
var result = arr.some(function(item, index) {if (item < 2) {return true;}
})
console.log(result); // true

4、sort 排序

var arr = [1, 5, 2, 7, 3, 4];
var arr2 = arr.sort(function(a, b) {// 从小到大return a-b;// 从大到小return b-a;
})
console.log(arr2); // 1,2,3,4,5,7

5、map 对元素重新组装，生成新数组

var arr = [1, 5, 2, 7, 3, 4];
var arr2 = arr.map(function(item, index) {return '<b>' + item + '</br>';
})
console.log(arr2);

6、filter 过滤符合条件的元素

var arr = [1, 2, 3, 4];
var arr2 = arr.filter(function(item, index) {if (item>2) {return true;}
})
console.log(arr2); // [3, 4]

二、对象API
1、for in

var obj = {x:100, y:200, z:300};
var key;
for(key in obj) {if (obj.hasOwnProperty(key)) {console.log(key);}
}

第05章

5-01 从基础到js-web-api

一、表面看来，并不能用于工作中开发代码
内置函数:Object,Array,Boolean,String
内置对象:Math,Json
二、常说的js(浏览器执行的js)包含两部分
js基础知识：ECMA 262标准（类型、原型、作用域、异步）
JS-WEB-API：W3C标准
三、w3c标准没有规定任何js基础相关的东西，只管定义用于浏览器中js操作页面的api和全局变量
window, document
未定义的全局变量，如navigator.userAgent

5-02 DOM本质

一、dom(document object model)
二、题目
1、dom是哪种基本的数据结构？
树
2、dom操作的常用api有哪些？
（1）获取dom节点
（2）property
（3）attribute
3、dom节点的attribute和property有何区别？
property：一个js对象的属性的修改
attribute：对html标签属性的修改
三、知识点
1、dom本质
2、dom节点操作
3、dom结构操作
四、dom将html结构化，能被浏览器、js识别

5-03 dom节点操作

一、dom的理解
浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型而已。
二、dom节点操作
1、获取dom节点

document.getElementById('div1');
document.getElementsByTagName('div');
document.getElementsByClassName('container');
document.querySelector('p');
document.querySelectorAll('p');

2、property(js对象的property)

var p = document.getElementByTagName('p')[0];
console.log(p.nodeName); // nodeName是p的property，即nodeName是p的属性

3、attribute

p.getAttribute('data-name');
p.setAttribute('data-name', 'imooc');

4、经验：面试时不要把用得多，但是不知道原理的东西说出来。（如，既然提到Jquery,说一下jquery获取节点的原理等）。

5-05

一、dom结构操作
1、新增节点
div1.appendChild();
2、获取父节点
var parent = div1.parentElement
3、获取子节点
var child= div1.childNode
4、删除节点
div1.removeChild(child[0])

5-08 bom操作

一、bom
bower object model
二、如何检测浏览器的类型
三、拆解url的各部分
四、知识点
1、navigator

var ua = navigator.userAgent;
ua.indexOf('chrome');

2、screen

screen.width
screen.height

3、location

location.href
location.protocol // http: https
location.host // learn/191
location.pathname
location.search
location.hash

4、history

history.back();
history.forward();

第06章 JS-Web-API（下）

6-01 事件-知识点

一、题目
1、编写一个通用的事件监听函数
2、描述事件冒泡流程
3、对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
代理
二、知识点
1、通用事件绑定

function bindEvent(elem, type, selector, fn) {if (fn == null) {fn = selector;selector = null;}elem.addEventListner(type, function(e) {var target;if (selector) {target = e.target;if (target.matches(selector)) {fn.call(target, e);}} else {fn(e);}})
}
// 使用代理
var div1 = document.getElementById('div1');
bindEvent(div1, 'click', 'a', function(e) {console.log(this.innerHTML);
});
// 不使用代理
var a = document.getElementById('a1');
bindEvent(div1, 'click', function(e) {console.log(a.innerHTML);
})

（1）代理的好处
①代码简洁
②减少浏览器内存占用
2、事件冒泡
事件冒泡的应用：代理
3、代理

<div id="div1"><a href="#">a1</a><a href="#">a2</a><a href="#">a3</a><!--会随时新增更多a标签-->
</div>

三、低版本兼容
1、ie低版本使用attachEvent绑定事件，和W3C标准不一样。
2、ie低版本使用量非常少，很多网站都早已不支持
3、了解即可，无需深究

6-04

一、题目
1、手动编写一个ajax，不依赖第三方库

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api', false);
xhr.onreadystatechange = function() {// 这里的函数异步执行if (xhr.readyState === 4) {if (xhr.status === 200) {alert(xhr.responseText);	}}
}
xhr.send(null);

(1)ie低版本使用ActiveXObject,和w3c标准不一样
2、跨域的几种实现方式

二、知识点
1、XMLHttpRequest
2、状态码说明
3、跨域

6-04 ajax

一、readyState
0：（未初始化）还没有调用send()方法
1：（载入）已调用send()方法，正在发送请求
2：（载入完成）send()方法执行完成，已经接收到全部响应内容
3：（交互）正在解析响应内容
4：（完成）响应内容解析完成，可以在客户端调用了

6-05 跨域和问题解答

一、
jsonp
服务器端设置Http header
二、如果没有写端口，就会启用默认端口
http默认端口：80
https默认端口：443
三、可以跨域的三个标签
1、

<img src="xxx">
<link href="xxx">
<script src="xxx">

2、三个标签的场景
（1）用于打点统计，统计网站可能是其他域。
（2）,

window.callback = function(data) {// 这是跨域得到的信息console.log(data);
}

六、服务器端设置http header

// 第二个参数填写允许跨域的域名称，不建议直接写
response.setHeader("Access-Control-Allow-Origin", "http://a.com, http://b.com");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "PUT, POST");
// 接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true");

6-06 存储

一、题目
请描述一下cookie,sesseionStorage,localStorage的区别？
容量、是否会携带到ajax中，api易用性
二、
1、cookie
（1）本身用于客户端和服务端通信
（2）但是它有本地存储的功能，于是就被“借用”
（3）document.cookie = …获取和修改即可
（4）cookie用于存储的缺点
①存储量太小，只有4kb
②所有http请求都带着，会影响获取资源的效率
③api简单，需要封装才能用document.cookie
2、localStorage,sesseionStorage
(1)html5专门为存储而设计，最大容量5M
(2)api简单易用
（3）lcoalStorage.setItem(key, value);localStorage.getItem(key);
（4）ios safari隐藏模式下
①localStorage.getItem会报错，建议统一使用try-catch封装

第07章开发环境

7-01 开发环境介绍

一、git(代码版本管理，多人协作开发)
二、js模块化
三、打包工具
四、上线回滚的流程

7-02

一、ID
webstorm
sublime
vscode：微软
atom：github

7-03

一、git和linux是一个作者
二、网络git服务器，如coding.net github.com
三、常用git命令

1、git add .
2、git checkout xxx
3、git commit -m "xxx"  // 代码提交到本地，-m：注释
4、git push origin master // 代码提交到线上
4.1、git push origin dev // dev是新的branch
5、git pull origin master // 获取线上的代码
6、git branch // 查看分支
7、git checkout -b xxx / git checkout xxx // 新建一个分支/切换到某个分支
8、git merge xxx

7-04 模块化

一、模块化
1、amd
（1）require.js

<script src="/require.min.js" data-main="./main.js"></script>
<!--main.js是入口-->

（2）全局define函数

define(['./a-util.js'], function(aUtil) {return {printDate: function(date) {console.log(aUtil.aGetFromatDate(date));}}
})

（3）全局require函数

// main.js
require(['./a.js'], function(a) {var date = new Date();a.printDate(date);
})

（4）依赖js会自动、异步加载
2、commonJS
二、全局变量
1、全局变量很容易造成污染
2、js引用的顺序，和引用的条件（a.js应用了a-util.js，但是不知道还需要依赖util.js）。

7-08

一、CommonJs
1、nodejs模块化，现在被大量用于前端，原因：
（1）前端开发依赖的插件和库，都可以从npm中获取。
（2）构建工具的高度自动化，使用npm的成本非常低。
2、commonjs不是异步加载js，而是同步一次性加载出来。
3、服务器端不存在同步、异步的问题。
二、amd、cmd
1、amd推崇依赖前置。
amd在定义模块的时候要先声明其依赖的模块。
2、cmd推崇就近依赖。
cmd只要依赖的模块在附近就行了。

7-10

一、webpack.config.js中
context: path.resolve(__dirname, ‘./src’); // 找到该目录

7-13 构建工具-压缩

一、webpack.config.js中

module.exports = {context: ,entry: {},output: {},plugins: [new webpack.optimize.UglifyJsPlugin(); // 文件压缩]
}

7-14 上线回滚-上线回滚流程

一、上线流程要点
1、将测试完成的代码提交到git版本库的master分支。
2、将当前服务器的代码全部打包并记录版本号，备份。
3、将master分支的代码提交到线上服务器，生成新版本号。
二、回滚流程要点
1、将当前服务器的代码打包并记录版本号，备份。
2、将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号。
三、
1、ls：文件名字
ll：文件列表
pwd：文件目录
cd … ：返回上级目录
rm -rf a :删除文件a
vi a.js:创建a文件
cp a.js a1.js ：将a.js拷贝成a1.js，放在当前目录
mv a1.js src/a1.js 将a1.js移到src下
cat a.js // 打印a.js内容
head a.js // 看头部部分
tail a.js // 看文件的尾部部分
head -n 1 a.js // 看头部第一行
tail -n 2 a.js // 看倒数第一二行
grep ‘2’ a.js // 搜出带2的一行

第08章运行环境

8-01

一、题目
1、从输入url到html的详细过程
2、window.onload和DOMContentLoaded的区别

// 同window.onload
window.addEventListener('load', function() {// 页面全部资源加载完才会执行，包括图片、视频等。
})
document.addEventListener('DOMContentLoaded', function() {// dom渲染完即可执行，此时图片、视频可能还没有加载完
})

二、知识点
1、加载资源的形式
2、加载一个资源的过程
3、浏览器渲染页面的过程
三、加载资源的形式
1、输入url（或跳转页面）加载html
http://coding.m.imooc.com
2、加载html中的静态资源
<script src="/static/js/jquery.js"></scrip>

四、加载一个资源的过程
1、浏览器根据dns服务器得到域名的Ip地址
2、向这个ip的机器发送http/https请求
3、服务器收到、处理并返回http/https请求
4、浏览器得到并返回内容
五、浏览器渲染页面的过程
1、根据html结构生成dom Tree
2、根据css生成cssom（om：object model）
3、将dom和cssom整合行程renderTree
4、浏览器根据renderTree开始渲染和展示
5、遇到<script>，会执行并阻塞渲染

8-03

一、为什么要把js放在body最下面

8-05 性能优化-优化策略

一、原则
1、多使用内存、缓存或者其他方法。
2、减少cpu就散，减少网络。
二、从哪里入手
1、加载页面和静态资源。
2、页面渲染。
三、加载资源优化
1、静态资源的压缩合并
2、静态资源缓存
（1）通过链接名称控制缓存，只有内容改变的时候，链接名称才会改变。
3、使用cdn让资源加载更快
（1）bootcdn
4、使用ssr后端渲染，数据直接输出到html中（ssr：server site render）
四、渲染优化
1、css放前面，js放后面。
2、懒加载（图片懒加载，下拉加载更多）

<img id="img1" src="preview.jpg" data-realsrc="abc.jpg">
<script type="text/javascript">
var img1 = document.getElementById('img1');
img1.src = img1.getAttribute('data-realsrc');
</script>

3、减少dom查询，对dom查询做缓存。

// 未缓存dom查询
var i;
for (i = 0; i < document.getElementsByTagName('p').length; i++) {\// todo
}
// 缓存了dom查询
var pList = document.getElementByTagName('p');
var i;
for (i = 0; i < pList.length; i++) {// todo
}

4、减少dom操作，多个操作尽量合并在一起执行。

var frag = document.createDocumentFragment(); // 片段，循环插入dom，改成先插入到片段，再append到文档流

5、事件节流

var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup', function() {if(timeoutId) {clearTimeout(timeoutId);}timeoutId = setTimeout(function() {// 触发change事件}， 100)
})

6、尽早执行操作（如DOMContentLoaded）

8-07

一、xss
1、前端替换关键字，如替换<为< > 为>
2、后台替换。

8-09

一、简历
1、简洁明了，重点突出项目经理和解决方案。
有什么问题，用什么解决
技术栈
二、博客，个人博客放在简历，并且定期维护更新博客。
三、个人的开源项目放在简历中，并维护开源项目。
四、简历不要造假，保持能力和经历上的真实性。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

官宣！前端热爱，技术无界，第十五届 D2 前端技术论坛，我们云端相聚！
第十五届 D2 前端技术论坛，如约而至。D2 前端技术论坛 (Designer & Developer Frontend Technology Forum, 简称 D2），是由阿里经济体前端委员会主办的面向全球前端领域的技术论坛，立志于建设一个促进业内交流、引领前端领域发…...
2024/4/21 7:04:33
搞笑双眼皮说说
...
2024/4/21 7:04:33
【AngularJS: Up Running】第05章_AngularJS服务揭秘
1 AngularJS服务概念： AngularJS中的服务指的是一些函数或者对象，它们可以在整个应用中持有某些行为和状态。 AngularJS的服务: 工厂类、服务和提供器服务的功能： 不断的重复的行为、共享状态、缓存、工厂类等 2 页面迁移时的销毁与重建 …...
2024/4/20 9:31:52
代码审计之request.getParameter和request.getAttribute
1，前言最近审计的java项目基本上都会用到request.getParameter和request.getAttribute，报的问题基本上就一个，就是跨站。2，介绍字面理解request.getParameter是获取请求参数，request.getAttribute是获取请求属性。先说request.getParameter，它可以获取get和post提交的参数…...
2024/4/28 11:57:12
青岛上海割双眼皮尽责美莱
...
2024/5/1 5:11:12
【Google 开发者大会】Google 面馆营业啦！揭秘拉面背后的机器学习技术
代码不止，活力不止！谷歌面馆“营业”中！ 想体验一把拉面大师的快感？ 现在前往 2020 Google 开发者大会官网马上创建自己的“代码拉面”！ 来谷歌面馆体验虚拟拉面劳逸结合身心更健康连续六天的谷歌开发者大会不仅…...
2024/5/1 5:45:22
都说双眼皮人丑
...
2024/4/21 7:04:27
博客系统知多少：揭秘那些不为人知的学问（二）
点击上方关注“汪宇杰博客”上篇《博客系统知多少：揭秘那些不为人知的学问（一）》介绍了博客的历史、我的博客故事及博客的受众来源。本篇精彩继续，介绍博客基本功能设计要点。1.“博客”的前世今生2.我的博客故事3.谁是博客的受众…...
2024/4/21 7:04:27
[建精读]阿里前端专家，揭秘职位描述下的潜台词
我是谁？为什么写这篇文章？我是淘宝技术部的一名普通的前端技术专家，花名磐冲。每年都想给团队内招几个同学，但是努力了几年，一个都没有招进来。是我看简历太少了吗？不是，只算内部简历系统&#…...
2024/4/21 7:04:26
博客系统知多少：揭秘那些不为人知的学问（四）
点击上方关注“汪宇杰博客” ^_^上篇《博客系统知多少：揭秘那些不为人知的学问（三）》介绍了博客协议或标准。本篇终章介绍设计博客系统有哪些知识点。1.“博客”的前世今生2.我的博客故事3.谁是博客的受众？4. 博客基本功能设计要点…...
2024/4/20 14:17:43
第十五届 D2 前端技术论坛，我们云端相聚！
第十五届 D2 前端技术论坛，如约而至。D2 前端技术论坛 (Designer & Developer Frontend Technology Forum, 简称 D2），是由阿里经济体前端委员会主办的面向全球前端领域的技术论坛，立志于建设一个促进业内交流、引领前端领域发…...
2024/4/21 7:04:24
Google 面馆营业啦！揭秘拉面背后的机器学习技术
代码不止，活力不止！谷歌面馆正式“营业”想体验一把拉面大师的快感？现在前往 2020 Google 开发者大会官网马上创建自己的“代码拉面”！来谷歌面馆体验虚拟拉面劳逸结合身心更健康连续六天的谷歌开发者大会不仅带来了满满的技术干货…...
2024/4/20 18:56:20
ng8框架的摸索
使用angular-cli脚手架生成ng8项目对各种基本需求的实现1.国际化2.src中的基本结构搭建3.路由配置4.index文件的优雅实践5.less的使用6.http交互（跨域解决方案）7.自定义的webpack配置项生成ng8项目对于angular-cli生成项目的实践非本文重点&#xff0c…...
2024/4/20 18:56:19
昆明双眼皮不错艺星
...
2024/4/20 18:56:18
人工双眼皮图片
...
2024/4/24 9:45:07
广州哪里做双眼皮美莱
...
2024/4/21 7:04:22
长沙双眼皮寻诊美莱
...
2024/4/30 16:57:28
割双眼皮眼妆
...
2024/4/21 7:04:21
割双眼皮恢复期
...
2024/4/21 7:04:20
刚割完双眼皮如何画眼妆
...
2024/4/21 7:04:18

【笔记-面试】《imooc -前端跳槽面试技巧》、《imooc- 揭秘一线互联网企业 前端javaScript高级面试》、《imooc-前端javascript面试技巧》