2017년, 2018년 JS 면접 질문 기록 공유
- 不言앞으로
- 2018-04-26 14:47:334684검색
이번 기사에서 가져온 것은 2017년과 2018년 JS 면접 질문 기록 공유입니다. 관심 있는 친구들은 한 번 살펴보세요
관련 기사 추천:2020년 js 면접 질문 모음에서 가장 완성도 높은 (최신)
2017 인터뷰 공유 (js 인터뷰 질문 기록)
1. 가장 간단한 질문
'11' * 2 'a8' * 3 var a = 2, b = 3; var c = a+++b; // c = 5
2. var 및 함수에 대한 질문도 있습니다. 변수와 함수의 순서대로
var num = 10; var obj = { num:8, inner: { num: 6, print: function () { console.log(this.num);
}
}
}
num = 888;
obj.inner.print(); // 6
var fn = obj.inner.print;
fn(); //888
(obj.inner.print)(); //6
(obj.inner.print = obj.inner.print)(); //888 这个点没有太理解，虽然答对了
이 단계에서 브라우저는 var, 함수, 함수 매개변수를 파싱하기 위한 준비 과정만 수행합니다. 그리고 이 "사전 구문 분석" 프로세스에는 사전 구문 분석 시퀀스, 즉 함수 -> function -> var; 또한, 이름이 동일할 경우 해당 기능은 예약되어 있으며 나중 기능이 이전 기능을 덮어씁니다. 사전 구문 분석된 결과 형식 매개변수에 값이 있으면 해당 값으로 구문 분석되고, 그렇지 않은 경우 함수 본문 전체로 구문 분석되며 변수는 매개 변수가 없습니다. 이 질문에 대해서는 먼저 논의하지 않겠습니다. 따라서 이 질문이 "사전 구문 분석"되면 함수 선언 가중치가 먼저 증가합니다
4. 알고리즘 문제에는 [1,4,6,9,11,15와 같은 정렬된 배열이 있습니다. , 18], 새 숫자를 제공하고 이를 배열에 삽입한 후 함수를 작성하세요
5. 함수 조절이란 무엇이며 장점은 무엇입니까(이 개념을 이전에 이해한 적이 없어서 혼란스럽습니다)
함수 조절의 목적
말 그대로 이해하면 함수 조절은 함수를 조절하는 데 사용됩니다. 성능은 어느 정도 최적화되었습니다. 예를 들어 DOM 작업에는 DOM이 아닌 상호 작용보다 더 많은 메모리와 CPU 시간이 필요합니다. 너무 많은 DOM 관련 작업을 연속해서 수행하려고 하면 브라우저가 중단되고 때로는 충돌이 발생할 수도 있습니다. 이는 특히 IE에서 onresize 이벤트 핸들러를 사용할 때 발생할 가능성이 높습니다. 브라우저 크기가 조정되면 이벤트가 계속해서 트리거됩니다. onresize 이벤트 핸들러 내에서 DOM 작업을 수행하려고 하면 변경 빈도가 높아져 브라우저가 중단될 수 있습니다. 또 다른 예로, 일반적인 검색 기능의 경우 일반적으로 keyup 이벤트를 바인딩하고 키보드를 누를 때마다 검색합니다. 그러나 우리의 목적은 주로 어떤 콘텐츠를 입력할 때마다 검색하는 것입니다. 이러한 문제를 해결하기 위해 타이머를 사용하여 기능을 조절할 수 있습니다.
기능 조절의 원리
일부 코드는 중단 없이 계속해서 반복적으로 실행될 수 없습니다. 함수가 처음 호출되면 지정된 간격 후에 코드를 실행하도록 타이머가 생성됩니다. 함수가 두 번째 호출되면 이전 타이머를 지우고 다른 타이머를 설정합니다. 이전 타이머가 이미 실행된 경우 이 작업은 의미가 없습니다. 단, 이전 타이머가 아직 실행되지 않은 경우 실제로는 새로운 타이머로 교체됩니다. 목적은 실행 요청이 일정 시간 동안 중지된 후에만 기능을 실행하는 것입니다.
http://www.cnblogs.com/LuckyW...
6. 두 개의 매개변수(parentNode, childNode)를 전달하는 메소드를 작성하고 childNode가 parentNode의 하위 노드인 경우 반환하도록 요구합니다. true, 그렇지 않으면 false로 반환
7. DOM 이벤트 흐름의 원리는 무엇이며 어떤 단계로 나누어지나요?
이벤트 캡처가 대상 단계에 있고 이벤트가 버블링됩니다
8. DOM 이벤트 위임의 원리는 무엇이며, 장점과 단점은 무엇입니까?
이벤트 위임의 원리: 이벤트 버블링 메커니즘
장점
1. 예를 들어, ul에서 li의 모든 클릭 이벤트를 프록시하는 것은 매우 좋습니다.
2. 새로운 하위 개체가 추가되면 이벤트를 바인딩할 필요가 없다는 것을 알 수 있습니다. 이는 특히 동적 콘텐츠에 적합합니다.
단점
이벤트 프록시의 일반적인 적용은 위 요구 사항을 모두 이벤트 Agent로 사용하는 경우 이벤트 판단 오류가 발생할 수 있습니다. 즉, 트리거되어서는 안되는 이벤트가 이벤트에 바인딩됩니다.
9. HTTP 캐시 메커니즘 및 200 상태의 캐시에서 구현하는 방법(가장 많이 접촉한 것이 캐시에서 304임을 나타냄)(최적화에 사용됨, 접촉 없음, 이해 필요)
의미
정의: 브라우저 캐시( 브라우저 캐싱)은 탐색 속도를 높이는 것입니다. 브라우저는 최근에 요청한 문서를 사용자의 디스크에 저장합니다. 방문자가 이 페이지를 다시 요청하면 브라우저는 로컬 디스크에서 문서를 표시하여 페이지 탐색 속도를 높일 수 있습니다.
기능
캐시 기능:
1. 대기 시간을 줄이고 웹 사이트를 더 빠르게 만들고 사용자 경험을 향상시킵니다.
2. 네트워크 정체를 방지하고, 요청량을 줄이고, 출력 대역폭을 줄입니다.
实现手段
Cache-Control中的max-age是实现内容cache的主要手段，共有3种常用策略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。
对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。
10. 一个原型链继承的问题
// 有一个构造函数A，写一个函数B，继承A
function A (num) { this.titileName = num;
}
A.prototype = { fn1: function () {}, fn2: function () {}
}
这个问题的关注点是B继承的A的静态属性，同时B的原型链中不存在A实例的titleName属性
11. 什么是虚拟dom
React为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起
如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。
而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升
12. js基础数据类型和引用类型分别是什么？这个前提条件下写一个getType，返回相应的类型
1.基本数据类型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用数据类型（对象）：Object （Array，Date，RegExp，Function）
ES6基本数据类型多了个symbol 据说这道题刷了百分之二十的人 感谢Abbyshen提出
function gettype(nm){ return Object.prototype.toString.call(nm);
}13. dom选择器优先级是什么，以及权重值计算（一道老问题了）
1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000
14. vue双向数据绑定的原理是什么
首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性（此时应注意description中get和set不能与描述属性共存）
数组的实现与对象不同。
同时运用观察者模式实现wather，用户数据和view视图的更新
15. react和vue比较来说有什么区别
1 component层面，web component和virtual dom
2 数据绑定（vue双向，react的单向）等好多
3 计算属性 vue 有，提供方便；而 react 不行
4 vue 可以 watch 一个数据项；而 react 不行
5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易；react 没有
6 生命周期函数名太长 directive
16. git使用过程中，如果你在开发着业务，突然另一个分支有一个bug要改，你怎么办
git stash //将本次修改存到暂存区（紧急切换分支时）git stash pop //将所有暂存区的内容取出来
17. postcss的使用
18. 网页布局有哪几种，有什么区别
静态、自适应、流式、响应式四种网页布局
静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。
18. 执行下面代码
var a = {};var b = {key: 'b'};var c = {key: 'c'};var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;console.log(a[b]); // 345console.log(a[c]); // 345console.log(a[d]); // 333
19.
var R = (function() { var u = {a:1,b:2}; var r = { fn: function(k) { return u[k];
}
} return r;
}());
R.fn('a'); // 1
上述代码中如何获取匿名函数中的u
20. 不适用循环语句（包括map、forEach方法）实现一个100长度的数组，索引值和值相同的数组[0,1,2,3,4,5........99]
var arr = new Array(100);//方法1[...arr.keys()];//方法二Array.from(arr.keys());//方法三Array.from({length: 100});// 方法四 借助stringvar arr1 = new Array(101);var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) { var start = '' + Math.ceil(index/2); if(index e6af0fb823c143a40a71e960e513f6b6= 100) { return arr;
}
arr.push(val); return reduce(arr, val+1);
}var res = reduce([], 0)
21. 下面语句执行结果输出
var a = function (val, index) { console.log(index); return { fn: function (name) { return a(name, val);
}
}
}var b = a(0); // underfinedb.fn(1); // 0b.fn(2); // 0b.fn(3); // 0
22. 科普
1) dom节点的根节点是不是body
回答： 不是，dom节点的根节点是html(包含head和body，head中分为meta、title等。body又分为一组)
2）dom元素都会有offsetParent吗
回答： offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。
3) [1,3,5]转译成字符串是什么
回答： '1,3,5'
调用toString方法，生成该字符串
4）li标签的祖级元素可以为li，父级元素也可以为例
回答： 错误
23. jsonp原理，jquery是怎么实现的，这样实现有什么好处和坏处
原理
在同源策略下;在某个服务器下的页面是无法获取到该服务器以外的数据的;Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签来调用服务器提供的 js脚本
当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递, 所以jsonp的 type类型只能是get ！
$.ajax({
url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
type: 'GET', // jsonp模式只有GET 是合法的
data: { 'action': 'aaron'
},
dataType: 'jsonp', // 数据类型
jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=>
然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。在jquery 源码中， jsonp的实现方式是动态添加3f1c4e4b6b16bbbd69b2ee476dc4f83a标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 3f1c4e4b6b16bbbd69b2ee476dc4f83a代码插入时函数执行，执行完毕后就 3f1c4e4b6b16bbbd69b2ee476dc4f83a会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。
24. http协议属于七层协议中的哪一层，下一层是什么
七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
tcp属于传输层；http属于应用层。
表现层
25. js垃圾回收机制知道哪些，v8引擎使用的哪一种
js的两种回收机制
1 标记清除（mark and sweep）
2 引用计数（reference counting）
javascript 및 V8 엔진
가비지 수집 메커니즘의 장점과 단점
이점: 프로그램의 메모리 관리 코드를 크게 단순화하고 프로그래머의 부담을 줄이며 장기간 작업으로 인한 메모리 누수 문제를 줄입니다.
단점: 자동 재활용은 프로그래머가 메모리를 제어할 수 없음을 의미합니다. ECMAScript에서는 가비지 수집을 강제로 수행할 수 없으며 메모리 관리를 방해할 수도 없습니다.
V8 자동 가비지 수집 알고리즘
https://segmentfault.com/a/11...
26. 스코프는 언제 생성되나요?
페이지 로딩 --> 창 전역 객체 생성 및 전역 범위 생성 --> 그런 다음 실행 컨텍스트를 생성하고 변수를 사전 분석하고 전역 변수 객체를 생성합니다.
$scope
27. 원리는 무엇입니까
의미
Websocket은 HTTP와 같은 비영구적 프로토콜에 비해 영구적인 프로토콜입니다.
원리
긴 라운드 로빈 긴 연결과 유사하며 지속적으로 정보를 받습니다.
28. http缓存知道哪些
http://blog.csdn.net/yzf91321...
29. 讲一下事件循环机制
执行上下文(Execution context)
函数调用栈(call stack)
队列数据结构(queue)
Promise
https://zhuanlan.zhihu.com/p/...
30. 理解web安全吗？都有哪几种，介绍以及如何预防
1.XSS，也就是跨站脚本注入
攻击方法：1. 手动攻击: 编写注入脚本，比如”/><script>alert(document.cookie());</script><!--等， 手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域 2. 自动攻击 利用工具扫描目标网站所有的网页并自动测试写好的注入脚本，比如：Burpsuite等 防御方法： 1. 将cookie等敏感信息设置为httponly，禁止Javascript通过document.cookie获得 2. 对所有的输入做严格的校验尤其是在服务器端，过滤掉任何不合法的输入，比如手机号必须是数字，通常可以采用正则表达式 3. 净化和过滤掉不必要的html标签，比如：<iframe>, alt,<script> 等 4. 净化和过滤掉不必要的Javascript的事件标签，比如：onclick, onfocus等 5. 转义单引号，双引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符 6. 设置浏览器的安全设置来防范典型的XSS注入
2.SQL注入
攻击方法： 编写恶意字符串，比如‘ or 1=1--等， 手动测试目标网站上所有涉及数据库操作的地方 防御方法：1. 禁止目标网站利用动态拼接字符串的方式访问数据库2. 减少不必要的数据库抛出的错误信息3. 对数据库的操作赋予严格的权限控制4. 净化和过滤掉不必要的SQL保留字，比如：where, or, exec 等5. 转义单引号，上引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符
3.CSRF，也就是跨站请求伪造
就是攻击者冒用用户的名义，向目标站点发送请求 防范方法：1. 在客户端进行cookie的hashing，并在服务端进行hash认证2. 提交请求是需要填写验证码3. 使用One-Time Tokens为不同的表单创建不同的伪随机值
40. sessionStorage和localstorage能跨域拿到吗？比如我在www.baidu.com设置的值能在m.baidu.com能拿到吗？为什么
localStorage会跟cookie一样受到跨域的限制，会被document.domain影响
41. 수동으로 삭제할 수 없는 경우 localstorage는 언제 만료되나요?
삭제하지 않으면clear()를 사용하여 영구적으로 저장됩니다.
sessionStorage는 현재 세션에서만 유효하며 페이지나 브라우저를 닫으면 삭제됩니다.
42. 쿠키는 어떤 도메인을 설정할 수 있나요? .com을 설정할 수 있습니까?
domin
43을 설정하여 설정할 수 있습니다. 로그인 상태를 세션 저장소나 로컬 저장소 또는 쿠키 중 어느 곳에 저장할 수 있다고 생각하시나요? ? 왜 거기에 저장되어 있나요
44.flux -> redux -> mobx 변화의 본질은 무엇인가요
저장 구조는 관찰 가능한 객체 지향 vs 객체 지향
https://zhuanlan.zhihu.com/p/을 처리합니다. ..
45. 온디맨드 라우팅에 해당 청크 파일을 로드하는 방법은 무엇입니까? 즉, 브라우저는 이 청크를 로드할 시기를 어떻게 알 수 있으며, webpack은 여러 해시된 청크 파일을 어떻게 식별합니까? 50. get과 post의 차이점은 무엇입니까? 본문을 통해 패스 데이터를 가져올 수 있나요? 데이터를 본문에 넣으려면 HTTP 프로토콜에 의해 제한되는 POST를 통해 가져와야 합니다.
51. 下拉刷新你怎么实现
52. 预加载options请求为什么会出现，能避免这个请求吗？
2018年面试题总结
收集一下网上的2018年的面试题 ; 希望能对你有所帮助~~
1.使用css实现一个持续的动画效果
animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}animation-name 规定需要绑定到选择器的 keyframe 名称。animation-duration 规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function 规定动画的速度曲线。animation-delay 规定在动画开始之前的延迟。animation-iteration-count 规定动画应该播放的次数。animation-direction 规定是否应该轮流反向播放动画。2.使用js实现一个持续的动画效果
最开始的思路是用定时器实现，最后没有想的太完整，面试官给出的答案是用requestAnimationFrame
· 定时器思路var e = document.getElementById('e')var falg = true;var left = 0;
setInterval(() => {
left == 0 ? falg = true : left == 100 ? falg = false : ''
falg ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`}, 1000 / 60)
· requestAnimationFrame
兼容性处理window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60);
};
})();var e = document.getElementById("e")var flag = true;var left = 0;function render() {
left == 0 ? flag = true : left == 100 ? flag = false : '';
flag ? e.style.left = ` ${left++}px` :
e.style.left = ` ${left--}px`;
}
(function animloop() {
render();
requestAnimFrame(animloop);
})();不足之处请指正（毕竟是现学的）顺便查了一下优势：
浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果
解决毫秒的不精确性
避免过度渲染（渲染频率太高、tab 不可见暂停等等）
注：requestAnimFrame 和 定时器一样也头一个类似的清除方法 cancelAnimationFrame
3.右边宽度固定，左边自适应
第一种：<style>body{ display: flex;
}.left{ background-color: rebeccapurple; height: 200px; flex: 1;
}.right{ background-color: red; height: 200px; width: 100px;
}</style><body>
<p class="left"></p>
<p class="right"></p></body>第二种<style>
p { height: 200px;
} .left { float: right; width: 200px; background-color: rebeccapurple;
} .right { margin-right: 200px; background-color: red;
}</style><body>
<p class="left"></p>
<p class="right"></p></body>4.水平垂直居中
第一种#container{ position:relative;
}#center{ width:100px; height:100px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
}
第二种#container{ position:relative;
}#center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px;
}
第三种#container{ position:relative;
}#center{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0;
}
第四种 flex#container{ display:flex; justify-content:center; align-items: center;
}5.四种定位的区别
`static` 是默认值 `relative` 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中 `absolute` 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指`position`不是`static`的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以`body`元素为偏移参照基准, 完全脱离了标准文档流。 `fixed` 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。
6.封装一个函数，参数是定时器的时间，.then执行回调函数。
function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time));
}7.一行代码实现数组去重？
[...new Set([1,2,3,1,'a',1,'a'])]
8.使用addEventListener点击li弹出内容，并且动态添加li之后有效
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>var ulNode = document.getElementById("ul");
ulNode.addEventListener('click', function (e) { if (e.target && e.target.nodeName.toUpperCase() == "LI") {
alert(e.target.innerHTML);
}
}, false);9.怎么判断两个对象相等
JSON.stringify(obj)==JSON.stringify(obj);//true
10.Vue router 除了 router-link 怎么实现跳转?
router.go(1)router.push('/')
11.Vue router 跳转和 location.href 有什么区别？
router 是 hash 改变location.href 是页面跳转，刷新页面
12. 재배치 및 다시 그리기
렌더링 트리의 일부(또는 전체 렌더링 트리)를 다시 분석하고 노드 크기를 다시 계산해야 합니다. 이것을 재배열이라고 합니다. 리플로우 초기화 페이지 레이아웃이 하나 이상 있다는 점에 유의하세요.
노드의 기하학적 속성 변경이나 요소의 배경색 변경과 같은 스타일 변경으로 인해 화면의 일부 콘텐츠를 업데이트해야 합니다. 이러한 업데이트를 다시 그리기라고 합니다.
13. 어떤 상황에서 리플로우 및 다시 그리기가 발생하나요?
DOM 노드 추가, 삭제, 업데이트
표시를 통해 DOM 노드 숨기기: 없음 - 리플로우 및 다시 그리기 트리거
가시성을 통해 DOM 노드 숨기기: 숨겨진 - 다시 그리기만 트리거 기하학적인 변화는 없습니다.
페이지에서 DOM 노드를 이동하거나 애니메이션화합니다.
스타일 시트를 추가하고 스타일 속성을 조정합니다.
창 크기 조정, 글꼴 크기 변경, 스크롤과 같은 사용자 동작.
14.js bind 实现机制？手写一个 bind 方法？
function bind(fn, context){ return function (){ return fn.apply(context, arguments);
}
}// 柯理化函数思想 感谢pursuitTom的提出Function.prototype.bind = function (context) { var args = Array.prototype.slice.call(arguments, 1); var _this = this; return function () { var thisArgs = [].slice.call(arguments); return _this.apply(context, args.concat(thisArgs))
};
}// ES6写法 感谢waterc的提出Function.prototype.bind = function(context, ...res) {
let self = this
return function(...arg) { return self.apply(context, [...res,...arg])
}
}15.多个函数
var a = (function(){return '1';}, function(){return 1;})();console.log(typeof a); //number16.__proto__、prototype、Object.getPrototypeOf()
__proto__是指内部原型，和Object.getPrototypeOf()结果等价function f(){}f.__proto__ === Object.getPrototypeOf(f); //truef.prototype === Object.getPrototypeOf(f); //false17.浏览记录前后跳转（尚未试验）
<a href="javascript:history.go(-1)">backward</a><a href="javascript:history.go(1)">forward</a>
下面再有的题就不写序号了；正好到17；是自己喜欢的数字；哈哈
setTimeout 和 setInterval 细谈
常问的点，前者是在一定时间过后将函数添加至执行队列，执行时间=延迟时间+之前函数代码执行时间+执行函数时间。
后者是不管前一次是否执行完毕，每隔一定时间重复执行，用于精准执行互相没有影响的重复操作。
如果需要控制前后执行顺序，最好使用setTimeout模拟setInterval
var time = 400, times = 0, max = 10;
function func(){
times++; if(times < max){ //code here
setTimeout(func, time);
} else {
console.log("finished");
}
}
setTimeout(func, time);判断多图片加载完毕
注：用jQueryObject.ready()只能判断dom结构加载完毕
好像描述的不是很清楚，这里写一下代码。
方法1：
var counter = 0;var queryInterval = 30; //msvar pics = document.getElementsByClassName("pics");function singleQuery(i){ if(pics[i].complete){
counter++; console.log(i + " is loaded");
} else {
setTimeout(singleQuery, queryInterval, i);
}
}function allQuery(callback){ if(counter < pics.length){ console.log("current number of loaded pics: " + counter);
setTimeout(allQuery, queryInterval, callback);
} else { console.log("All pics are loaded.");
callback();
}
}for(var i = 0; i < pics.length; i++){
setTimeout(singleQuery, queryInterval, i);
}
setTimeout(allQuery, queryInterval, callback);主要也是采用setTimeout模拟轮询，判断方式是img标签dom的complete属性（布尔值），缺点是定时器太多。
方法2：
var counter = 0, queryInterval = 50;var pics = document.getElementsByClassName("pics");for(var i = 0; i < pics.length; i++){
pics[i].onload = function(){
counter++; console.log(this.id + " is loaded");
}
}function queryPictures(callback){ if(counter < pics.length){ console.log("current number of loaded pics: " + counter);
setTimeout(queryPictures, queryInterval, callback);
} else { console.log("All pics are loaded");
callback();
}
}
setTimeout(queryPictures, queryInterval, callback);利用onload绑定图片加载成功后的回调，通过计数器判断是否加载完毕。
CSS margin重叠问题
块元素在垂直方向上的margin是很奇怪的，会有重叠现象。
如果display都是block，有三种情况：
外间距均为正数，竖直方向上会选择最大的外边距作为间隔
一正一负，间距 = 正 - |负|
两个负，间距 = 0 - 绝对值最大的那个
设置display: inline-block的盒子不会有margin重叠，position: absolute的也不会出现。
CSS选择器优先级 && CSS选择器效率
ID > 类 > 标签 > 相邻 > 子选择器 > 后代选择器 > * > 属性 > 伪类
object.propertyIsEnumerable(xxx)
判断对象中是否有xxx属性，并且能通过for in枚举，如Array对象的length是不可枚举的
判断数组
function isArray(arr){ return Object.prototype.toString.call(arr) === '[Object Array]';
}git fetch && git pull
git pull自动完成了fetch最新远程版本，并且和本地进行merge
git fetch获得远程分支，要继续手动merge合并
WebSocket
HTML5带来的新协议，通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll（即不中断连接一直等待数据），或者是ajax轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于long poll的阻塞，以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以建立持久连接
跨域相关
只要协议、域名、端口有不同，则视为不同的域。（域名和域名对应的IP也是跨域）
1.CORS: Cross-Origin Resource Sharing
基于服务器支持的跨域，服务器设置Access-Control-Allow-Origin响应头，浏览器可允许跨域
2.设置domain
能从子域设到主域，如a.b.c.com—>b.c.com—>c.com
具体情况：在页面中用iframe打开了另一个页面（前提：两个页面主域是相同的）
利用frameElement.contentWindow.document.domain设置frame子页面的主域，document.domain设置主页面的主域，之后就能互相获取dom中的数据。
缺点是只能用于不同子域间的交互。
3.例如拥有src属性的img标签，每次改变src属性，都会发起http请求。
var img = new Image();
img.onload = function(){ //code here};
img.onerror = function(){ //code here};
img.src="http://server.com/data?query=3";缺点是只能使用GET请求，不能获取数据，一般用于提交统计信息什么的。
script、link、iframe只有在添加到DOM中才会发起请求
4.HTML5 postMessage
支持IE8+和主流浏览器，写法也简单..
//source: http://test.org:4000//get the window object of target originvar win = window.open("http://target.com");//or this, when a frame is usedvar win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");//target: http://target.com/tinyfunction handleMessage(event){ if(event.orgin!="http://test.org:4000") return; var data = event.data; //code here
//event.source is window.opener
event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false);5.window.name
即使在页面打开多层iframe后，每个iframe中window.name 属性值都是相同的，以此用作数据传输的工具。
但由于跨域的限制，是无法获取另一个frame中的window.name数据，所以要使用一个同域的代理(proxy.html)：
6. jsonp
目前主流跨域方法
调用其他域的脚本获取数据，前提是另一个域能知道回调函数名，这个可以通过请求发送给目标域。
直接写jQuery封的jsonp
$.getJSON("http://target.com/data?callback=callbackFunctionName", function(data){});$.getJSON会把获取的responseText转为json，如果url中有callback参数，数据会以script标签形式获取。
针对上方问题存在没有解答的 ; 或则解答不正确详细的 ; 欢迎留言 ; 我会及时更正 ; 也欢迎留下你认为经典的面试题 ; 我都会补充进来 ; 共同进步
相关学习推荐：javascript视频教程
위 내용은 2017년, 2018년 JS 면접 질문 기록 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!