重点复习：37-60天的面试题+额外拔高题

写在前面： 本文章的答案可能不是很完整，因为毕竟是面试/笔试回答，如果单领一个知识都能凑一篇文章，所以回答仅供参考，大家一起学习~~

BOM和DOM的区别

首先BOM > DOM，前者是后者的集合，BOM是浏览器对象，宿主是浏览器存在的对象，浏览器提供了很多自己的api供js调用，而dom是文档结构对象，提供了文档相关的API，dom和bom在node中没有这个概念，浏览器下才有

如何让字体变得更细更清晰

选用字体更清晰的font-family / ，图片，或者使用谷歌属性抗锯齿font-smoothing，但是这个兼容性不好

说说你对HTML元素的显示优先级的理解

frameset元素层级最高；
有窗口的比没窗口的高； video，audio等
表单元素比非表单元素高；input
z-index能提升同等级元素的高度，不能跨等级；

说下line-height5种赋值方式有何区别？

• 默认行高
• 设置数字，是父元素的font-size倍数
• 固定行间距，固定的值
• % 父元素的font-size百分比
• 继承inherit

造成内存泄漏的操作有哪些？

递归，闭包，定时器没clear等

html和html5有什么区别呢？

标准的区别： HTML是基于SGML的，HTML5不是，SGML是标记语言的集合，xml和html都是基于它的标准来的，所以html要写DTD规范，是因为SGML的要求需要告诉浏览器以哪种标准来渲染；
语义化的区别，在机器和人类阅读来讲，HTML5的新增语义化标签会更友好
SEO的区别：SEO支持更好
功能区别：CANVAS和音频媒体的支持，使得H5不仅仅可以做网页，可以做游戏甚至是可穿戴设备
全面拥抱移动端 nice

用CSS绘制一个三角形

原理： 利用了border切口处是三角形的这个特性，宽高为0，将二边隐藏透明色，一边扩大border的宽度即可

说说你对this的理解

这边简单提一下，因为this这个概念还是要说一个比较大的篇幅的
this指的是当前运行时的上下文，this是会发生改变的，比如apply，call,bind
非严格模式下，全局this是window
函数this是谁调用了它，谁就是this

Standards模式和Quirks模式有什么区别？

浏览器的执行模式，一个是标准模式一个是怪异模式
标准模式是w3c规定的标准模式
怪异模式是为了兼容各个浏览器以前不标准的时候提出的解决方案
标准模式下的宽度，是内容宽度
怪异模式下的是border+padding即宽度
可以使用border-box: border-box来使用怪异模式。content-box是标准模式。

浏览器是怎样判断元素是否和某个CSS选择器匹配？

如果我没记错的话，有一个集合的概念，浏览器解析文档的时候，会把最后一个索引的元素集合到一个集合中，这个索引指的是

.class .red div {}

会把最后一个索引（div）的所有元素放在一个集合中，然后选择器从右到左进行查找，根据集合中的元素从下往上去查找，如果通过匹配父类不成功的元素会从这个集合中消失，直到整个集合留下最后一个成功的，就进行渲染，当然不同的浏览器还会有其他的优化，这一块也不是特别了解。

如何用div写出类似textArea的效果？

主要利用

contentedittable="true"这个属性进行div可编辑，可以利用以下css进行调整：

resize: both;width: 300px;
height: 200px;
padding: 5px;
border: solid 1px #ccc;
resize: both;
overflow:auto;

使用flex实现三栏布局

太过于简单面试题，讲一个思路就可以了，首先最中间肯定是写最前面的，因为优先渲染；
利用flex布局，左右两边flex: 0 0 auto; 中间： flex: 1 1 auto; 利用order排序即可

请你解释一个为什么10.toFixed(10)会报错？

浏览器在解析js中出现了扰乱，小数点在js中也有调用方法的作用，那么10是整数，js以为10后面跟的小数点是小数，没想到是直接调用了方法，让引擎执行代码中出现了冲突；

如果是0.1.toFixed不会报错；
解决办法：

10..toFixed(10);
(10).toFixed(10);

讲一下前端性能有哪些方面可以优化？

这个非常多，从很多方面来简单说一下；

雪碧图，websocket（不要使用轮询和长轮询）,图片服务器，data属性，CDN，代码分割，减少dom操作次数，避免重排，懒加载，预加载

webpack方向：

treeshaking，preload,prefetch，异步加载模块（非常重要）；

PWA： 离线存储，service-work

HTML与XHTML有什么区别？

XHTML中必须正确嵌套，必须小写，必须闭合标签

写出主流浏览器内核私有属性的css前缀

• -webkit- 谷歌和sa
• -0- 欧朋
• -ms- ie
• -moz- 火狐

关于前端安全

讲真不太了解，大概知道一点点的概念；

• XSS跨站脚本攻击：

一般是sql文件或者js文件，对用户输入的东西不要信任，服务端返回的也不要信任，全部需要转义，要带上请求头和cookie等

• csrf跨站请求伪造

这种防御系数很高，防御资料很少，一定程度来讲比XSS防范程度要高，把持久化的验证方式转换为瞬时验证方式，比如给form表单添加隐藏的信息等等

语义化标签有哪些？

header footer menu section article aside main nav等等

找到字符串中最长的单词，并返回它的长度

function test1(str){
    str = str.split(" ");
    return str.reduce((start, end) => {
        return start.length > end.length ? start : end;
    })
}

cookie和session的区别

cookie主要是客户端产生，体积很小只有4k，服务端也可以设置，可以设置时间等
session是服务端生成的，通常给客户端返回sessionid，前端存储在cookie中进行鉴权等操作；

说说你对eval的理解

一个小型的语言解释器，括号内填写js代码字符串，但是不宜与维护，而且不安全，非常不建议使用；
但是某些场景下，比如webpack中的soucemap就使用到了eval

你知道网页三剑客指的是什么吗？你有用过Dreamwear吗？

dw（不是那个手表，是dreamwear），firework，flash

title与h1、b与strong、i与em的区别分别是什么？

title是网页标题是在head中，h1是网页中的大标题加粗，类似于word中的h1，有很高的seo权重
b和strong都是加粗，但是strong会有警告的作用
i和em是html网页物理标记，告诉浏览器以什么格式渲染

写出你知道的CSS水平和垂直居中的方法

flex就不写了
定位和margin，百分之50减去自身高度宽度的一半
transform同理
不考虑兼容性可以使用calc函数

说说你对模块化理解

前端工程化的到来，尤其是node的兴起，模块化已经离不开我们，在日常的开发中，模块化有利于我们的代码维护，代码修正，代码复用等等，AMD,ES,COMMON，几个常用的模块方式已经非常流行，组件化的开发也得到了数以万计的项目的证实，确实是符合现代化工程（本人胡说一通）

只要答准amd，common，es等，这些历史，如何使用，项目中是如何分配的，讲区别就可以了；

html5都有哪些新的特性？移除了哪些元素？

新增了表单的type类型，对画布的支持，对存储的支持data-，对媒体的支持
移除了center，frame，frameset标签

怎么才能让图文不可复制？

-webit-user-select: none;

为什么会有跨域，解决办法是什么？

浏览器的同源策略，也是为了web应用的安全，不受信任的服务之间的信息传递
同源概念： 不同协议，不同端口，不同域名
主要解决方案有好几个
jsonp 只能get请求
cors 需要后端配合
proxy： 代理转发
禁止浏览器跨域安全策略

如何兼容websocket ？

websokect是一种协议，它是新特性，不兼容低版本的浏览器
有轮询，即在一定时间进行请求，服务端有新请求则返回，缺点：请求次数会非常多，并发压力
有长轮询，即服务端返回结果，再发起下一次请求，缺点： 对服务器的有并行压力
SSE也是可以，eventsouce对象，仅仅是知道，没用过

如何让英文单词的首字母大写？

text-transform: uppercase;

说说你对IIFE的理解

立即执行函数，为了形成闭包，其中的变量不会和全局变量进行污染
立即执行函数的几个必要条件：

1. 必须是函数表达式 2. 声明之后必须()立即调用它
   一般我们见到的是这样的：

   (function(){}()) 或者 (function(){})()
   他们是等价的，同理它们也是一样的：
   !function(){}() 或者 ?funtcion(){}()
   前面的特殊符号只为了把函数声明转换为表达式

写重置css有什么用？

重置业务相关的css，利于还原设计图，进行多个浏览器的不同样式校对

window对象和document对象有什么区别？

这个很像第一题，它们是一个题

如何让元素固定在页面底部？有哪些比较好的实践？

position fixed boottom: 0;
还有粘性定位，不过兼容太差，不建议使用

说说video标签中预加载视频用到的属性是什么？

prderload="preload"

手写一个品字布局的方案

第一行居中
第二行简单来讲可以用flex，space-around
也可以用其他方式，非常简单

深拷贝实现

递归实现

function deepclone(obj){
let _obj = {};
for(let key in obj){
    if(obj[key] && typeof obj[key] === 'object'){
        _obj[key] = deepclone(obj[key]);
    }else{
        _obj[key] = obj[key]
    }
}
return _obj;
}

xml与html有什么区别？

XML和html都属于SGML标准中
XML要求必须闭合标签，而且主要是存储数据的，多个空格不会读成一个空格
html反之

你知道的等高布局有多少种？写出来

top和bottom是0
padding-bottom: 9999999999px; margin-top:-99999999999999px;使用浮动再 清除浮动，即等高
flex默认就是盛满父盒子

写出几种创建对象的方式，并说说他们的区别是什么？

字面量
let obj = {};
new一个构造
let obj = new Object();
Object创建
let obj = Object.create(); // 这个可以设置原型

页面中怎么嵌入Flash？有哪些方法？写出来

object标签，embed标签

说说你对媒体查询的理解

根据业务的不同，进行宽度高度等其他因素的调整，要用到媒体查询，目前最流行的就是css3的媒体查询，
在一定程度上可以满足所有的设备，实现一套代码多端运行的效果

写一个使2个整数交换的方法

let [a,b] = [b,a];

HTML5如何使用音频和视频？

video标签和audio标签

你是怎样抽离样式模块的？

样式模块分为几种，公用样式，业务样式，重置样式，通过css分离，将业务组件中的代码和其他组件的样式
进行分离互不干扰；可以高效利用css预编译工具中的函数等封装一些高频出现的样式

请说说你对事件冒泡机制的理解？

事件分为几个阶段，第一个是捕获阶段-》第二个是目标阶段-》第三个是冒泡阶段
冒泡是从内而外进行传递的，当点击子元素的事件，那么相应的父级元素的事件也会触发
冒泡可以使用event.stop*,一个方法，我忘记了。。。
但是一些业务场景来讲，比如列表，我们没必要去给每一列去绑定事件，可以在父级上定义事件，通过事件对象的排查，确定是第几个元素点击了click，那么这将是优化长列表的一种常见的手段

说说你对WEB标准和W3C的理解与认识？

web标准是web最正规的标准，以前的代码时js,css,html混在一起，为了模块化，web标准规范了这一点；
w3c是web标准之上进行调整强化的一套标准，比如标签名小写，正确嵌套，语义化等等

你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？

全屏滚动的原理其实和轮播图很类似，只不过搭配了一些css，比如高度和宽度沾满了整个屏幕，overflow: hidden; 然后监听js的滑动事件，进行dom的切换

你对事件循环有了解吗？说说看！

事件循环对象之前专门写了一个文章说了，说到事件循环，不得不提到几个关联的知识点，就是任务队列，事件循环，宏观任务和微观任务，单线程等等

这边做一个简单的复习

js是一个单线程的脚本语言，但是不代表它只有一个线程，它处理同步任务的线程只有一个，叫做主线程，所有的微观任务都将产生一个回调函数，全部放在了任务队列中，当主线程任务结束的时候，会从任务队列中去查询有没有异步任务返回，如果有返回就会把异步任务转换为同步任务，放在主线程处理，那么去一遍遍的查询任务队列中是否有可用异步任务的这个动作称之为事件循环

说说你对target="_blank"的理解？有啥安全性问题？如何防范？

安全性问题就是，目标页面可以通过document.referer查询到源路径，解决办法就是在a中加noreferer；

假如设计稿使用了非标准的字体，你该如何去实现它？

协商/换图片/引入字体（字蛛）

Ajax与Flash的优缺点分别是什么？

ajax是异步请求，更新页面的方案，flash现在在与时代脱轨，但是仍有不少直播网站使用flash

列举CSS优化、提高性能的方法

• 尽量少使用通配符和元素选择器
• 少使用嵌套
• 压缩css
• 减少页面重排
• 使用link，而不是import

请写出一个函数求出N的阶乘（即N!）

function test1(n){
    if(n > 1){
        return n * test1(n-1);
    }
    return n;
}

Form表单是怎么上传文件的？你了解它的原理吗？

在html表单中，使用input file上传图片，比如设置methods是post且enctype是multipart/form-data
浏览器才知道是使用了二进制发送表单数据
原理略

字符串相连有哪些方式？哪种最好？为什么？

es6的模板字符串，传统加号拼接兼容性更好些

From表单提交时为什么会刷新页面？怎么预防刷新？

在原来的web开发中，通常是form表单提交之后，后端返回一个新的页面，这种方式也被web程序员所接受，所以浏览器也是默认了这个规范，避免刷新只能监听submit，然后使用ajax请求发送

要是position跟display、overflow、float这些特性相互叠加后会怎么样？

display: none;之后所有内容不可见
定位之后，浮动无效

什么是事件委托？它有什么好处？能简单的写一个例子吗？

上面提到过冒泡，列表点击事件那个例子，就是事件委托，通过冒泡，父元素监听是谁委托
我把上面的复制一遍：

事件分为几个阶段，第一个是捕获阶段-》第二个是目标阶段-》第三个是冒泡阶段
冒泡是从内而外进行传递的，当点击子元素的事件，那么相应的父级元素的事件也会触发
冒泡可以使用event.stop*,一个方法，我忘记了。。。
但是一些业务场景来讲，比如列表，我们没必要去给每一列去绑定事件，可以在父级上定义事件，通过事件对>象的排查，确定是第几个元素点击了click，那么这将是优化长列表的一种常见的手段

web workers有用过吗？能帮我们解决哪些问题？

上一个问题讲过了，js是单线程的脚本语言，来处理同步任务，但是一些IO读取等同步任务可能会同步任务执行缓慢，为了利用多核cpu，webwoker允许我们把任务放在里面，不影响主线程的任务进行；

解决：复杂的io读取，或者大量计算，有利于运用多核CPU，来更高效的执行任务

如何使用自定义字体，有啥注意事项

@font-face有兼容问题，而且字体过大在app端可能运行失败，需要使用字蛛

document的onload和onready的区别

js中没有提供ready方法，但是jquery提供了，ready的意思是文档已经加载完毕，但是加载完毕并不代表资源全部加载完毕，ready后可以对dom进行操作；但是load指的是所有的资源（图片媒体等）全部加载完毕

HTML5的地理定位

navigator.getloction，不好用，定位不准确

css3的:nth-child和:nth-of-type的区别是什么？

查找父元素的第几个子元素，后者是根据类型来查找
()里面可以写数字即第几个，也可以写表达式等

写一个函数找出给定数组中的最大差值

这个很多

function test1(arr){
    return arr.sort(); // 排序，然后第一个减去最后一个
}
Math.max(...arr); // 求最大数
Math.min(...arr); // 最小数
然后相减即可

HTML5中新添加的表单属性有哪些？

placeholder，type类型中也添加了很多新属性，比如date，url，email

什么是视差滚动？如何实现视差滚动的效果？

视觉差滚动是今年来非常流行的web表现方式，通常是滑动页面，然后对应的元素进行偏移，这种效果我们称之为视觉滚动，通常会有很多库来实现它

写出4个使用this的典型例子

*.call(this);
funtion test1(){
    this.a = funtion(){
        return this.b
    }
    this.b = "test"
}
let a = 1;
console.log(this.a)
funtion test1(){
    a = funtion(){
        return this.b
    }
    b = "test"
}

渐进式渲染是什么？

web应用做兼容，先把最基础的兼容好，再做增强

margin和padding的使用场景有哪些？

margin：外部盒子与其他元素的距离
padding：内部盒子与内容的距离

JSONP的原理，解决了什么问题

解决了浏览器同源策略问题
缺点: 只支持get请求
原理：创建script标签，回调函数挂载到全局，给脚本设置url，并设置回调，脚本加载的回调会自动给全局变量，监听onload，加载之后移除script标签

function jsonp(url,parmas.callback){
  var script = document.createElement("script");
    script.url = url + parseObjParmas({...parmas, callback: "jsonp"});
    document.appendChild(script);
    window.jsonp = callback;
    srcipt.onload = () => {
    document.removeChild(script);
    }
}

你了解download属性吗？

h5新增下载功能，兼容不好，必须和href搭配，用于描述下载说明

inline、block、inline-block这三个属性值有什么区别？

规定了盒子的排列方式
inline: inline-inline;
block: block-block
inline-block

盒子分为内盒子和外盒子，而这些属性就控制着页面布局方式和内容布局方式

写一个方法，使得sum(x)(y)和sum(x,y)返回的结果相同

函数柯里化

console.log(sum(x)(y));
function sum(){
    let arg= arguments;
    return funtion(){
        let arr = [];
        arr.push(...arg, ...arguments);
        return arr.reduce((total, current) => {
            total += current;
        },0)
    }
}

HTML5相对于HTML4有哪些优势？

1. 语义化
2. 声明简洁
3. 媒体画布
4. 更好的被机器解码
5. 全面拥抱移动端

box-sizing常用的属性有哪些？分别有什么作用？

border-box content-box
用于浏览器切换标准模式和怪异模式的
标准模式的盒子宽度是内容宽度不算padding和border，怪异模式是算在里面的，显然后者符合人类思维
所以一般会写border-box

请说下你对__proto__和prototype的理解

隐式原型和显式原型
每一个函数都有一个prototype指向函数原型，原型中的construtor指向构造函数
每一个对象都有一个_proto_指向构造这个对象的原型对象

隐式对象不可打印（谷歌和火狐可以）

有用过WebGL吗？说说你对它的理解

一种js的api，用来绘制2d,3d的图形

用过哪些css框架？

antdesign bootstrap layui