JSONP怎么将值设置到HTML中,前端面试的总结 - 粒子数反转的个人空间 - OSCHINA - 中文开源技术交流社区...

1、event loop是什么？

主线程和任务队列

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

https://segmentfault.com/a/1190000013861128

2、HTTP协议与状态码，HTTP2.0等，状态码301、302等

https://www.cnblogs.com/ranyonsue/p/5984001.html

3、原生实现promise

//原生js实现promise

function PromiseM() {

this.status = "pending"

this.mag = ""

let process = arguments[0]

let that = this

process(function(){

that.status = "resolve"

that.msg = arguments[0]

},function(){

that.status = "reject"

that.msg = arguments[0]

})

return this

}

PromiseM.prototype.then = function() {

let resolve = arguments[0]

let reject = arguments[1]

if(this.status == "resolve") {

resolve(this.msg)

}

if(this.status == "reject" && arguments[1]) {

reject(this.msg)

}

}

http://www.cnblogs.com/xuyuntao/articles/6391728.html

5、浏览器缓存相关、强缓存与协商缓存、浏览器 http 200(from cache)和304的区别

https://segmentfault.com/a/1190000012897512

6、解决跨域的方法，jsonp的缺点是什么？

jsonp、window.postMessage等

7、跨域资源共享 CORS

http://www.ruanyifeng.com/blog/2016/04/cors.html

8、typeof返回哪些数据类型

https://blog.csdn.net/yellowmushroom/article/details/80249493

9、Vue.nextTick()

10、css盒子模型

https://blog.csdn.net/zlingyun/article/details/81835665

11、原生实现bind函数

//原生实现bind函数

function bind () {

var self = this;

var context = arguments[0];

var arg = [].slice.call(arguments)

return function() {

let newArg = arg.contact(...arguments)

this.call(context,newArg)

}

}

12、手写一个object的深克隆

var obj = {a:1,b:{c:2,d:{e:"2",d:"32"}}}

function deepCopy (obj) {

let newObj = {}

for(let key in obj) {

if(obj[key] && typeof obj[key] == "object") {

newObj[key] = deepCopy(obj[key])

} else {

newObj[key] = obj[key]

}

}

return newObj

}

13、算法-将以下数据结构按顺序输出

var arr = [

[1,2,3,4,5],

[16,17,18,19,6],

[15,24,25,20,7],

[14,23,22,21,8],

[13,12,11,10,9]

]

14、算法-javascript将扁平的数据转为树形结构

https://www.cnblogs.com/eyelly/p/translate_treedata_func.html

var aTree = [

{"id": "1", "name": "动物", "pid": "0"},

{"id": "2", "name": "鸟类", "pid": "5"},

{"id": "3", "name": "无脊椎动物", "pid": "1"},

{"id": "4", "name": "哺乳动物", "pid": "5"},

{"id": "5", "name": "脊椎动物", "pid": "1"},

{"id": "6", "name": "喜鹊", "pid": "2"},

{"id": "7", "name": "蚯蚓", "pid": "3"}

];

function translateDataToTree(data) {

let parent = data[0]

function getTree (parent) {

let chrildren = []

data.forEach((value, key)=> {

if(value.pid == parent.id) {

getTree(value)

chrildren.push(value)

}

})

if(chrildren.length > 0) {

parent.chrildren = chrildren

}

}

getTree(parent)

return parent

}

15、函数节流与函数防抖

//函数节流

let canRun = true

function throttle(ms) {

if(!canRun) {

return

}

canRun = false;

setTimeout(()=> {

canRun = true

}, ms)

}

//函数防抖

let canRun

function debounce (func, ms) {

clearTimeout(canRun)

canRun = setTimeout(()=> {

func()

}, ms)

}

16、图片懒加载

https://segmentfault.com/a/1190000010744417

http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html

图片懒加载实现(js部分)：

var imgSrc = "https://ss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch1000/png/pct1.png"

var io = new IntersectionObserver(function(entries){

entries.forEach(function(value){

if(value.intersectionRatio > 0) {

var target = value.target

//var src = target.dataset.src

target.src = imgSrc + "?time=" + (+new Date()); //加时间戳让图片不缓存

io.unobserve(target)

console.log(111)

}

})

})

var imgs = Array.from(document.querySelectorAll("#isImg"))

console.log(imgs)

imgs.forEach(function(item){

io.observe(item)

})

17、怎么去掉首尾的空格(多种方法)

18、事件触发机制以及为什么将事件绑定在冒泡阶段？

19、vue-router的配置

20、为什么说virtual DOM渲染更快

21、HTTP的各种状态码

22、什么是类数组对象

23、如何让浏览器不缓存文件

1)URL后加时间戳参数

// 假设当前这个图片的dom对象为img

img.src += '?t='+(+new Date());

2)html Meta修改

3) js更新缓存

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

window.applicationCache.update();

}

http://www.divcss5.com/css3-style/c33196.shtml

25、CSS的基本语法

26、如何封装公用组件

27、了解symbol数据类型

28、css3、html5

29、两种盒模型

30、文本溢出显示为...

width:100px;

height:100px;

white-space:nowrap;

text-overflow: ellipsis;

overflow:hidden;

31、伪元素的content

https://blog.csdn.net/zx562602419/article/details/81020342

32、BFC原理及其应用

https://blog.csdn.net/wky_csdn/article/details/73554720

32、浮动元素容器的clearing问题

http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

33、类的私有变量和私有属性

34、正则表达式

35、解释mvvm模型

36、数组去重算法

37、原型链

38、原生继承

39、bridge的实现原理

http://www.cnblogs.com/dailc/p/8097598.html

40、node有哪些全局对象

41、node中的stream模块是什么？怎么用的？

42、遍历数组有哪些方法，各自的用法是什么

43、for...in和for...of的用法和区别，为什么for...in不用来遍历数组

44、怎么用css做一个三角形

width: 0px;

height: 0px;

border-width:0 30px 30px 30px;

border-style:solid;

border-color:transparent transparent red transparent;/*透明 透明 灰*/

45、Vue的组件是一次性加载的吗？怎么实现懒加载？

路由懒加载？

异步组件

46、Vue style里的scope实现样式作用范围的原理是什么？

47、vue兄弟组件间如何传递数据？

48、vue-router如何配置使得路由懒加载？

49、vue-router有哪些钩子函数？

50、Vue中哪些操作data中值得变化视图没有更新？为什么？怎么解决？

https://www.jb51.net/article/147797.htm

Vue.set(example1.items, indexOfItem, newValue)

51、es6中的set、map用法

52、HTML的执行顺序

https://www.cnblogs.com/sunrunzhi/p/5407725.html

53、localstroge、sessionstroge、cookie的区别

54、从输入 URL 到页面加载完成的过程