css
1，盒模型 2，如何实现一个最大的正方形 3，一行水平居中，多行居左 4，水平垂直居中 5，两栏布局，左边固定，右边自适应，左右不重叠 6，如何实现左右等高布局 7，画三角形 8，link @import导入css 9，BFC理解
js
1，判断 js 类型的方式 2，ES5 和 ES6 分别几种方式声明变量 3，闭包的概念？优缺点？ 4，浅拷贝和深拷贝 5，数组去重的方法 6，DOM 事件有哪些阶段？谈谈对事件代理的理解 7，js 执行机制、事件循环 8，介绍下 promise.all 9，async 和 await, 10，ES6 的 class 和构造函数的区别 11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式, 12，介绍一下rAF(requestAnimationFrame) 13，javascript 的垃圾回收机制讲一下, 14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？
标记的src属性完成对跨域页面的调用。此方案存在的缺陷是，script的src属性完成该调用时采取的方式时get方式，如果请求时传递
的字符串过大时，可能会无法正常运行。不过此方案非常适合聚合类门户使用。
3、iframe方式。查看过醒来在javaeye上的一篇关于跨域访问的帖子，他提到自己已经用iframe的方式解决了跨域访问问题。数据提
交跟获取，采用iframe这种方式的确可以了，但由于父窗口与子窗口之间不能交互（跨域访问的情况下，这种交互被拒绝），因此无
法完成对父窗口效果的影响。
4、用户本地转储方式：IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，即两个window之
间可以在客户端通过windows剪贴板的方式进行数据传输，只需要在接受数据的一方设置Interval进行轮询，获得结果后清除Interval即可。
FF的平台独立性决定了它不支持剪贴板这种方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF无法通过内存来完成暗渡陈仓。
而由于文件操作FF也没有提供支持（无法通过Cookie跨域完成数据传递），致使这种技巧性的方式只能在IE中使用。
5、结合了前面几种方式，在访问A网站时，先请求B网站完成数据处理，再根据返回的标识来获得所需的结果。这种方法的缺点也很明显，
B网站的负载增大了。优点，对session也实现了保持，同时A网站与B网站页面间的交互能力增强了。最重要的一点，这种方案满足了我的全部需要。
总结一下，以上方案中可选择的情况下，我最推荐on-Demand方式，在不需要提交大量数据的情况下，这种方式能够解决您的大部分问题。
14.写一个获取非行间样式的函数?
写法一：
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name]; //false是一个无用的参数
}
}
getStyle 函数有 2 个参数：
第一个参数 obj 为要获取的对象，
第二个参数 name 为要获取的属性，并且做了兼容处理， currentStyle 针对 IE 浏览器，getComputedStyle 针对火狐浏览器。
写法二：
function getStyle(obj,attr,value){
if(!value){
if(obj.currentStyle){
return obj.currentStyle(attr)
}else{
obj.getComputedStyle(attr,false)
}
}else{
obj.style[attr]=value
}
}
15.事件委托是什么?
事件委托(event delegation)：利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
解释：使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。
事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。
16.闭包是什么，有什么特性，对页面有什么影响?
闭包就是能够读取其他函数内部变量的函数。
影响：
由于闭包会使函数中的变量都被保存到内存中，对内存的消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露
17.如何阻止事件冒泡和默认事件?
if(event && event.stopPropagation){ //非IE
event.stopPropagation();
}else{ //IE
window.event.cancelBubble = true;
}
18. 添加、移除、移动、复制、创建和查找节点的方法?
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
getElementsByClassName() //通过元素的Class属性的值
19.解释jsonp的原理，以及为什么不是真正的ajax?
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
20.javascript的本地对象，内置对象和宿主对象?
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
21.document load 和document ready的区别?
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
22.”==”和“===”的不同?
返回值：相等true，不相等false
==是先转换数据类型再进行比较，只要值相等，就相等；
===是不转换数据类型进行等比较，必须是值相等，类型相等，才相等。
23.javascript的同源策略?
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
24.编写一个数组去重的方法?
function clearRepeatArray(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
break;
}
}
}
return arr;
}
26.排序算法?
function paiXu(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=0;j<arr.length-1-i;j++){
if(arr[j]>arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
27：希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) ?
var domList = document.getElementsByTagName('input')
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == 'checkbox') {
checkBoxList.push(domList[len]);
}
}
28：什么是Ajax和JSON，它们的优缺点?
AJAX（Asynchronous JavaScript And XML）：
即异步JavaScript和XML，它不是一种新的编程语言即异步JavaScript和XML，它不是一种新的编程语言,
而是一种用于创造更好更快以及交互性更强的Web应用程序技术（用于在web页面中实现异步数据交互）。
优点：
可以使得每一次请求更加迅捷，对于每一次请求返回的不是整个页面，只仅仅是所需要的返回数据。
也就是可以使页面不重载全部内容的情况下加载。避免用户不断刷新或者跳转页面，提高用户体验 。
缺点：
对搜索引擎不友好，（要实现ajax下的前后退功能成本较大，可能造成请求数据的增加跨域问题限制）
JSON（Java Script Object Notation）：
是一种轻量级的数据交换格式，ECMA的一个子集。可在不同平台之间进行数据交换，是数据的载体。
是一种轻量级的数据交换格式，ECMA的一个子集。可在不同平台之间进行数据交换，是数据的载体。
优点：
轻量级的数据交换格式, 易于人的的阅读和编写，占用宽带小； 便于机器（JavaScript）解析，
（可以通过简单的eval()进行json数据的读取）和生成 ,支持复合数据类型（数组，对象，字符串，数字） 支持多种语言;
缺点:没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性。
JSON格式目前在Web Service中推广还属于初级阶段
29：有这样一个URL：item.taobao.com /item.htm?a=1&b=2&c=&d=xxx&e，
请写一段JS程序提取URL中的各个GET参数(参数名和 参数个数不确定)，将其按key-value形式返回到一个json结构中，
如{a:’1′, b:’2′ , c:”, d:’xxx’, e:undefined}?*/
function test(){
var url="item.taobao.com /item.htm?a=1&b=2&c=&d=xxx&e";
//找到问号的下标，截取下标加1之后的字符
var index=url.lastIndexOf("?");
var str=url.substring(index+1);
//1、split("&")变成数组
var arr = str.split("&");
//2、遍历数组
for(var i=0;i<arr.length;i++){
if(arr[i].indexOf("=")>-1){//如果元素有等号；把等号替换成:" 再在最后拼接 "
//a=1 --》 a:"1"
arr[i]=arr[i].replace("=",":\"")+"\"";
}else{
//如果元素没有等号，直接在后面拼接 :undefined;
//e --》 e:undefined;
arr[i]=arr[i]+":undefined";
}
}
//3、把数组的每个元素用join拼接成字符串 resultStr；
var resultStr = arr.join(",");
//4、在resultStr的两端分别拼接上 左花括号和右花括号
resultStr = "{"+resultStr+"}";
//5、把json的字符串形式变成对象；
var keyValueJson = eval("("+resultStr+")");
console.log(keyValueJson.a);
console.log(keyValueJson.b);
console.log(keyValueJson.c);
console.log(keyValueJson.d);
console.log(keyValueJson.e);
}
30：正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？*/
当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\\表示一个\）。使用正则表达字面量的效率更高。
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
var regMail = /^\w+@\w+(\.(net|com|cn))+$/;
31：.Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
案例：
那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；
假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）
var result=[];
function fn(n){ //典型的斐波那契数列
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
if(result[n]){
return result[n];
}else{
//argument.callee()表示fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
}
}
}
32： 下面这个ul，如何点击每一列的时候alert其index?（闭包）？
- 这是第一条
- 这是第二条
- 这是第三条
var lis;
window.onload = function(){
lis = document.getElementById("test").children;
for(var i=0;i<lis.length;i++){
lis[i].onclick = demo;
}
}
function demo(){
for(var i=0;i<lis.length;i++){
lis[i].ord = i;
function liIndex(){
alert(this.ord);
}
lis[i].onclick = liIndex;
}
}
33： 给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：
addSpace(“hello world”) // -> ‘h e l l o w o r l d’*/
function addSpace(str){
var newStr = "";
for(var i=0;i<str.length;i++){
newStr += str.charAt(i);
if(str.charAt(i)!=" "){
newStr += " ";
}
}
return newStr.substring(0,newStr.length-1);
}
function test(){
var s = addSpace("hello world");
alert(s);
}
34：函数声明与函数表达式的区别？
// 函数声明
function funDeclaration(type){
return type==="Declaration";
}
// 函数表达式
var funExpression = function(type){
return type==="Expression";
}
案例：
funDeclaration("Declaration"); //=> true
function funDeclaration(type){
return type==="Declaration";
}
funExpression("Expression"); //=>false
var funExpression = function(type){
return type==="Expression";
}
结论：
用函数声明创建的函数funDeclaration可以在funDeclaration定义之前就进行调用；
而用函数表达式创建的funExpression函数不能在funExpression被赋值之前进行调用。
为什么会这样呢？！这就要理解Javascript Function两种类型的区别：
用函数声明创建的函数可以在函数解析后调用（解析时进行等逻辑处理）；
而用函数表达式创建的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用。
35：在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：
无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。
典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都回NodeList对象都属于伪数组。
可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
在 JavaScript 中， 函数中的隐藏变量 arguments 和用 getElementsByTagName 获得的元素集合（NodeList）都不是真正的数组，
不能使用 push 等方法，在有这种需要的时候只能先转换为真正的数组。
对于 arguments，可以使用 Array.prototype.slice.call(arguments); 来达到转换的目的，
但对于 NodeList 则不行了，其在 IE8 及以下将会报错，只能说其 JS 引擎有所限制。
因此，如果需要把 NodeList 转换为真正的数组，则需要做下兼容处理。
function makeArray(c) {
try{
return Array.prototype.slice.call(c);
}catch(e){
var ret = [];
var len = c.length;
for(var i=0;i<len;i++) {
ret[i] = c[i];
}
return ret;
}
}
36：想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）?
/*
1.给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
2.mousedown事件触发后，开始拖拽
3.mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
4.mouseup时，拖拽结束
5.需要注意浏览器边界的情况
*/
37：var numberArray = [3,6,2,4,1,5]; （考察基础API）?
-
实现对该数组的倒排，输出[5,1,4,2,6,3]
-
实现对该数组的降序排列，输出[6,5,4,3,2,1]*/
var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3 reverse() 方法用于颠倒数组中元素的顺序。
numberArray.sort(function(a,b){ //6,5,4,3,2,1
return b-a;
});
38：.将字符串”{id}</td><td>{name}”中的{id}替换成10，{name}替换成Tony （使用正则表达式）?*/
"{id}{id}{id}_{name}</td></tr>".replace(/{\\id}/g, '10').replace(/{\$name}/g, 'Tony');
39：foo = foo||bar ，这行代码是什么意思？为什么要这样写？*/
if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：
作为"&&"和"||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
40：为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义?*/
function escapeHtml(str) {
return str.replace(/[<>"&]/g, function(match) {
switch (match) {
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case "\"":
return """;
}
});
}
41：写一个function，清除字符串前后的空格。（兼容所有浏览器）?
使用自带接口trim()，考虑兼容性：
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
}
}
// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"
42：Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
43：谈一谈你对javascript的理解，javascript能做什么?
理解：
1. javascript是主要用在web中的一种动态的解析型语言。
2. 可以改变网页里的数据，根据用户点击等操作告诉服务器可以动态的改变网页的大小。
3. JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,是一种轻量级的编程语言。
同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作,
可以将动态的文本放入 HTML 页面, 可以对事件作出响应, 可以读写 HTML 元素, 可被用来验证数据, 可被用来检测访问者的浏览器, 可被用来创建 cookies
语法：
1. 要记住JavaScript是一门面向对象的语言，JavaScript 中所有变量都是对象，除了两个例外 null 和 undefined。注意数字也是对象
2. 要记住JavaScript中函数是一等公民。比如在Java这样的基于类的编程语言中，每个方法不能独立存在，必须定义在某个类中，而Javascript中是可以单独定义函数的。
3. 要记住JavaScript不是基于类的面向对象语言，它是基于原型的。现在的主流的面向对象的编程语言都是基于类来设计的，
所以很多人难以理解一门面向对象语言里为什么会没有类。但实际上基于类还是基于原型（Prototype）都只是面向对象编程语言的不同的实现风格。
44：在javascript中如何检测客户端的浏览器和操作系统类型?
Navigator对象包含了Web浏览器的基本信息(如名称，版本，操作系统等)
通过window.navigator方式可以引用该对象，并利用它的属性读取客户端基本信息
Navigator的5个主要属性：
appName:Web浏览器的名称
appVersion:浏览器的版本号和其他版本信息
userAgent:浏览器在它的USER-AGENT HTTP标题中发送的字符串。该属性包含appName,appVersion属性的所有信息
appCodeName:浏览器的代码名
platform:客户浏览器所在的操作系统
案例：
45：Cookie在客户机上是如何存储的?
理解：
Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。当你在浏览网站的时候，
Web服务器会先送一小小资料放在你的计算机上，Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。
当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，
有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。
46：Prompt box是什么？它的返回值有什么用？
提示框 （prompt()）：
1. prompt() 方法用于显示可提示用户进行输入的对话框。如果用户单击提示框的取消按钮，则返回 null。
如果用户单击确认按钮，则返回输入字段当前显示的文本。
2. 在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。
在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
47：如何获取javascript所能表示的最大值和最小值？
alert(Math.max.apply(null, a));//最大值
alert(Math.min.apply(null, a));//最小值
48：Null和Undefined有和区别与联系?
/*
概念：
null ：
这是一个对象，但是为空。因为是对象，所以 typeof null 返回 'object' 。
null 是 JavaScript 保留关键字。
null 参与数值运算时其值会自动转换为 0 ，因此，下列表达式计算后会得到正确的数值：
案例：
表达式：123 + null结果值：123
表达式：123 * null结果值：0
undefined ：
undefined是全局对象（window）的一个特殊属性，其值是未定义的。但 typeof undefined 返回 'undefined' 。
虽然undefined是有特殊含义的，但它确实是一个属性，而且是全局对象（window）的属性。
JavaScript的最初版本是这样区分的：null是一个表示"无"的对象，转为数值时为0；
undefined是一个表示"无"的原始值，转为数值时为NaN。
目前：null和undefined基本是同义的，只有一些细微的差别。
具体区别：
null表示"没有对象"，即该处不应该有值。
典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
事例：
Object.getPrototypeOf(Object.prototype) // null
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
