以下题目都是在面试过程中整理的 答案不是标准。如有雷同纯属耦合，可与博主及时联系
1、基本数据类型和引用数据类型
基本数据类型：number、string、boolean、null、undefined
引用数据类型：对象数据类型(对象、数组、正则) 函数数据类型
区别：基本数据类型操作的是值，引用数据类型操作的是内存地址
2、display: none 和visibility: hidden区别
1、Display:none隐藏会不会占空间 visibility:hidden隐藏后还会占空间
2、display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了；
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
3、浏览器支持的最小字体是多少？怎样实现更小字体
12px；
使用：-webkit-transform:scale()来实现
.ft8 {
font-size: 8px;
font-family: Arial;
}
.ft8 em {
//如果是行内元素需要加这个，因为缩放是缩放的宽高，而行内元素没有宽高
display: inline-block;
width: 10px;
height: 10px;
-webkit-transform: scale(0.7,0.7); 这个缩放大小是 8px/12px得来的
}
4、 Cmd 和amd
5、 git推送的顺序
6、模拟网速慢 来测试网站性能
谷歌--network里--slow3G
7、什么是DNS
Domain name system 域名系统
万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。
8、服务器渲染、浏览器渲染
浏览器渲染
单页应用用的基本都是浏览器渲染。优点很明确，后端只提供数据，前端做视图和交互逻辑，分工明确。服务器只提供接口，路由以及渲染都丢给前端，服务器计算压力变轻了。但是弱点就是用户等待时间变长了，尤其在请求数多而且有一定先后顺序的时候。
服务器渲染
服务器接到用户请求之后，计算出用户需要的数据，然后将数据更新成视图（也就是一串dom字符）发给客户端，客户端直接将这串字符塞进页面即可。这样做的好处是响应很快，用户体验会比较好，另外对于搜索引擎来说也是友好的，有SEO优化。
9、箭头函数和普通函数的区别
箭头函数的this永远指向其上下文的this，call(), bind(), apply()改变不了其this指向
10、flex布局里常用的属性
容器上的属性：
Flex-direction 主轴方向 横着|竖着
Flex-wrap 默认情况下项目都排在一条线上，这个属性定义一条线排不下如果换行
Flex-flow 是以上两个属性的简写
Justify-content 定义了项目在主轴上的对齐方式
align-items 项目在交叉轴上是如何对齐的
align-content 定义了多根轴线的对其方式，如果项目只有一根线，改属性不起作用
项目上的属性：
Order 定义项目的排列顺序。数值越小，排列越靠前
Flex-grow 定义项目的放大比例，默认为0，即使存在剩余空间也不放大
Flex-shrink 定义项目的缩小比例，默认为1 如果空间不足，改项目缩小
Flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
Flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
11、grid布局里常用的属性
父容器上的属性：
.Wrapper{
Display:grid 设置成grid布局
Grid-template-columns:200px 50px 100px; 子元素有3列 以及每个子元素列宽
Grid-template-rows:100px 30px 子元素有2行 以及每一行的高度
}
子容器
.item{
Grid-column-start:1 从第一个网格线开始
Grid-column-end:3 第三个网格线结束
/*Grid-column:1/3也可以简写*/
}
12、promise
解决es5多层函数的回调：
参考网址 ：http://www.cnblogs.com/whybxy/p/7645578.html
Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
13、promise和setTimeout的区别
---两个调用的都是异步任务，都通过任务队列进行管理
---任务队列分为宏任务队列和微任务队列
---宏任务队列： setTimeout,setInterval；微任务队列：promise
14、mvvm和mvc模式的区别
1)、mvvm的核心是数据围绕着产生修改、修改，出现了业务逻辑；围绕着数据的显示，出现了不同界面
2)、mvvm做到了view和model的完全分离，
3)、可以实现双向数据绑定
15、webpack常用配置
webpack.config.js里
1>、入口entery entry有三种写法 字符串、数组、对象
2>、出口output的配置
output: {
path: __dirname + '/build',
filename: '[name]-[id].js',
publicPath: '/asstes/'
}
Path：指定输出文件路径
Filename：输出文件名称
PublicPath：资源访问路径
3>、module 配置loader css、style、html、less的loader配置
modules: {
loaders: [
{
test: /\.js$/, //匹配希望处理文件的路径
exclude: /node_modules/, // 匹配不希望处理文件的路径
loaders: 'xxx-loader?a=x&b=y' //此处xxx-loader 可以简写成xxx , ？后以query方式传递给loader参数
},
...
]
}
5>、plugins 插件的配置
6>、devServer 配置开发功能
16、如何开启设备的硬件加速
何为硬件加速：就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。
如何开启硬件加速：
CSS animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。
现在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。
17、怎样判断页面是否加载完成？
用document.onreadystatechange的方法来监听状态改变，
18、列举引起回流和重绘的因素：
1>、添加或者删除可见的DOM元素；
2>、元素位置改变；
3>、元素尺寸改变——边距、填充、边框、宽度和高度
4>、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5>、页面渲染初始化；
6>、浏览器窗口尺寸改变——resize事件发生时；
19、call、bind、apply的区别
都是改变this 指向的，call和apply都是function这个类原型上的方法，函数作为实例都可以调用function这个类原型上的方法
apply：和call基本上一致，唯一区别在于apply是以数组的形式传参
bind：语法和call一模一样，区别在于 call改变this关键字后会立即执行；而bind不立即执行
哪个性能更好些呢？
call的性能更好一些，尤其是在传递给函数的参数超过3个的时候 ，所以开发的时候可以使用call多一点
eg:
let arr=[10,20,30],
obj={};
function fn（x,y,z）{}
fn.call(obj,..arr) //es6的展开运算符也可以实现把数据中的每一项依次传递给函数
fn.apply(obj,arr)
20、for in 和for of的区别，对象是否可以使用for of 进行遍历
1>、推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
2>、for...in循环出的是key，for...of循环出的是value
3>、注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足（for in可以遍历出自定义的属性和方法，for of不会循环出来）
3>、for...of不能循环普通的对象，需要通过和Object.keys()搭配使用先获取对象的所有key的数组然后遍历：
21、什么是前后端分离
前端负责客户端的用户交互界面、逻辑、显示数据；后端负责数据的处理和存储，提供数据。后端不再套页面，前后端代码不再融合到一起，分工明细，降低维护成本，前端自己可以调试页面
22、防抖函数和节流函数的区别
函数的节流：指定时间内容js方法只跑一次。应用场景：监听页面元素滚动事件。
函数的防抖：频繁出发的情况下，只有足够的空闲时间才执行一次代码。应用场景：手机
号码验证、邮箱验证
函数节流
函数防抖
参考：https://www.cnblogs.com/walls/p/6399837.html
23、js预处理机制
在当前作用域中 js代码执行之前，浏览器会对所有带var 进行声明，对function进行声明+定义
预解释是一种毫无节操的机制
1>、不管条件是否成立都要把带var的进行提前声明
2>、只对=左边的进行预解释，等号右边的是值，不参与预解释:匿名函数之函数表达式
3>、自只执行函数不进行预解释
4>、return下面的代码虽然不执行了也要进行预解释
5>、如果名字已经声明过了不需要从新声明，但需要重新定义
24 、移动端的点透现象。（tap、click区别）
Tap和click比较：
1>、Tep和click都会触发点击事件，但在web手机端 click会有300ms的延迟问题，所以用tap代替click
2>、zepto框架里的tap规避了click 300ms的延迟问题，但会出现穿透问题
3>、解决问题：还是用click事件 使用fastclick解决300ms延迟问题；
或者 为元素绑定touchend事件，并在内容加上e.preventDefault();
25、写一个手机正则验证
reg=/^1[34578]\d{9}$/
26、null和undefined区别
Null: 代表空值，代表一个空对象指针，用typeof运算得到 “object”，你可以认为它是一个特殊的对象值
Undefined：声明一个变量未初始化时，得到的就是undefined
27、ie盒子模型和标准w3c盒子模型
都包括margin border padding content
区别：ie盒子模型的宽度= width+padding+border
ie5及更早版本使用的是ie盒子模型，ie6及以上版本在标准兼容模式下使用的是w3c盒子模型
28、css3的@font-face 如何获得自定义字体
29、:nth-child和 :nth-of-type区别
:nth-child()选择某个元素的一个或多个特定子元素(不限制标签，只要是子元素都算在内)
:nth-of-type() （用法同nth-child，只是它限制了标签必须是li）选择指定的元素
30、数组的深度拷贝
1>、Slice方法：（只适用于不包含引用对象的一维数组的深度拷贝）
2>、concat方法（只适用于不包含引用对象的一维数组的深度拷贝）
4>、js遍历数组的方法：也只是实现了钱拷贝
5>、适用json方法 （此方法存在兼容问题） 并且如果对象里边存在函数的话 也会拷贝失败（如果obj里有函数，undefined，则序列化的结果会把函数或 defined丢失）
31、手机页面头部需要怎么设置
设置meta的 viewport 宽度为设备宽度，初始缩放比例，最大缩放比例，最小缩放比例为1，禁止用户手动缩放
32、用webpack怎样构建项目
1>、新建文件夹
2>、在文件夹里创建package.json配置文件：npm init
3>、安装webpack依赖
先全局安装webpack：npm install webpack -g
再安装项目依赖：npm install webpack -save-dev
4> 、创建 入口文件 index.js
5>、创建index.html
6>、创建 webpack.config.js
7>、执行webpack 打包输出命令 执行完后会多出一个dist文件夹里边有一个bundle.js
8>、测试结果 index.html 里引入bundle.js,最后用在浏览器里打开index.html
33、获取浏览器版本号：判断是否为ie浏览器
Var agent=navigator.userAgent
判断是否为ie if(agent.indexOf(‘msie’)){} msie（Microsoft Internet Explorer）
34、webstrom里的批量替换快捷键
ctrl+shift+r:批量替换
35、math 里的方法
向下取整 Math.floor() 向上取整 Math.ceil()
取绝对值 Math.abs() Math.round() 四舍五入
求最大值 Math.max(12,26,56)
求最小值 Math.min(12,26,56)
获取0-1之间的随机数 Math.random()
36、Number()、parseInt()、parseFloat()
Number():强制将其他数据类型转成number类型，要求如果是字符串，字符串一定都需要时数字才能转换 Number（‘12’）=>12 Number(‘12px’) =>NaN
非强制转换：
parseInt():从左到右一个一个查找，把是数字的转换成有效的数字，中途遇到一个非有效数字就不在查找了 parseInt(‘12px’)=>12 parseInt(‘12.5px’)=>12
parseFloat():同上可以多识别一个小数点：parseFloat(‘12.5px’)=>12.5
37、将文档声明为h5文档需要在文档头添加：<!DOCTYPE html>
38、form标签特有的属性
Action：提交表单时向何处发送表单数据
Method：get、post
Enctype：发送表单数据之前如何对其进行编码
40、position 的absolute与fixed共同点和不同点
共同点：
1>、改变行内元素的呈现方式，display被置block
2>、让元素脱离普通流，不占据空间
3>、默认会覆盖到非定位元素上
不同点：
1>、absolute的根元素是可以设置的，而fixed的根元素 固定为浏览器窗口
2>、当滚动页面的时候fixed元素与浏览器窗口之间的距离是不变的
42、用HTML、css和js魔力实现下拉框，使得下拉框在各个浏览器的样式和行为完全一致。说出你的设计方案，并且重点说明功能设计实现时要考虑的因素。
43、自定义一个浏览器兼容的事件绑定方法需要注意哪些问题？
使用DOM2给浏览器绑定事件 用addEventListener box.addEventListener(‘click’,fn1,false)
但ie6-8不兼容只能用attachEvent box.attachEvent(‘onclick’,fn1)
AttachEvent存在的兼容性问题：
1>、顺序问题：执行的时候顺序是乱的，标准浏览器是按照绑定顺序执行
2>、重复问题：ie6-8可以给同一个元素的同一个行为绑定多个相同的方法
3>、this问题：ie6-8中当方法执行的时候，方法中的this不是当前元素box，而是window
45、js里的循环有哪几种
参考网址：https://blog.csdn.net/qq_41899174/article/details/82797089
1--for循环：
1>、常规for循环：
设置初始值var i=0；设置循环执行的条件i<5；执行循环体中的内容；每一轮循环完成后都执行i++累加操作
2>、for in循环 遍历对象，自定义属性名值也遍历出来了，循环出来的是key值
3>、for of循环 循环数组，不会遍历出自定义属性，循环出来的是值
2--While循环
3--Do while循环
4--map()、forEach()、filter()、some()、every() 遍历数组
46、html和html5，css和css3的区别？
Html和html5区别：
1>、文档类型声明不同：html5是<!DOCTYPE html>
2>、html5新增了结构语义化的标签 header footer artical main nav aside
3>、html5新增了绘图功能 canvas svg
4>、新增了input元素的类型和属性
Css和css3的区别
Css3比css多了一些样式设置例如：border-radius transition animation transform box-show，css3对于低版本的浏览器不兼容
47、undefined和null的区别
Undefined是声明了一个变量未初始化，得到的是undefined
Null 代表“空值”，代表一个空对象指针，使用typeof得到”object”，所有你可以认为它是一个特殊的对象值
48、document.write和innerHTML的区别
Document.write是直接将内容写入页面的内容流，会导致页面被重写
InnerHTML将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML很多情况下优于Document.write
49、ajax过程
1>、创建一个ajax对象 var xhr=new XMLHttpRequest
2>、设置回调函数 xhr.onreadystatechange=callback;
3>、使用open方法与服务器建立连接 xhr.open(“get”,”/data.tex”,false)
4>、向服务器发送请求 xhr.send()
5>、在回调函数中针对不同的响应状态进行处理
If(xhr.readyState===4&& /^2\d{2}$/.test(xhr.status)){
Var val=xhr.responseText
Document.getElementById(“info”).innHTML=val
}
50、进程和线程的区别
进程是资源分配的最小单位，线程是程序执行的最小单位
进程有自己的独立地址空间
同一进程下线程共享全局变量等数据
多个线程程序只要有一个线程死掉整个进程也就死掉了，但不会影响其他进程
51、get、post区别和各自的特点
区别：
1>、“大小问题”：get请求传递给服务器的内容存在大小限制，post理论上是没有限制的，因为get通过url传参给服务器，每个浏览器对于url的长度是存在限制的
2>、“缓存问题”：get请求会出现缓存，post是没有缓存的，在项目中用get请求一般是不会让其出现缓存“清除缓存”在url末尾追加一个随机数
3>、“安全问题”：get不安全，而post相对安全一些
4>、“传参上”：get使用url传参，post在请求主体中传参
5>、“后退页面”：get请求后退页面时不产生影响，post会重新提交请求
6>、“参数是否可见”：get参数url可见，post url参数不可见
特点：get一般用于从服务器获取数据
Post一般用于向服务器推送数据
52 、解释下浮动和它的工作原理？清除浮动的技巧
浮动元素脱离文档流，不占据空间
1>、使用空标签清除浮动
2>、使用overflow
3>、使用after伪类对象清除浮动
53、js延迟加载的方式有哪些？
1>、defer属性 <script src=”file.js” defer></script>
浏览器会并行下载file.js和其他有defer属性的script，并不会阻塞页面的后续处理，所有的defer脚本保证是按顺序依次执行的
2>、async属性 <script src=”file.js” async></script>
async属性是html5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload事件之前完成
Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。
6>、让js最后加载
54、git命令
git init （初始化本地git环境）
git clone xxx （克隆一份代码到本地仓库）
git status（查看工作区、暂存区的状态）
git add 文件名 （将工作区新建/修改的内容添加到暂存区）
git commit -m “commit message” 文件名（将暂存区的内容提交到本地库）
git push 把本地库的修改提交到远程库
git checkout master/branch //切换到某个分支
git checkout -b test //新建test分支
git checkout -d test //删除test分支
git merge master //假设当前在test分支上面，把master分支上的修改同步到test分支上
git log //查看当前分支上面的日志信息
55、【功能】有一个问卷调查，一个问题可能要一个单独的验证，比如第一个题：单选、第二个题是选择。用原型上的类或者es6的class
56、Query 在元素末尾追加内容
可以用innerHTML但会对原来造成一定影响，用append方法 把内容追加到元素末尾
57、==比较
58、node的优点和缺点
优点：
采用事件驱动 异步编程；
非阻塞模式的io处理使node.js在相对较低的资源消耗下的高性能域出众的负载能力；
Node.js轻量高效，是数据密集型实时应用系统的完美解决方案；
缺点：
单线程，单进程，只支持单核cpu，不能充分的利用多核cpu服务
对程序员要求高一旦进程崩溃，整个web服务就崩溃了；
不适合做复杂性能很高的计算；
59、element-ui 和html的区别
60、canvas和svg的区别
Canvas 是用于在网页上绘制图形，
Svg是可伸缩矢量图形，用于定义网络的基于矢量的图形，图像在放大或者改变尺寸的情况下图形质量不会有损失
62、用canvas画一条线
63、清楚浮动
方法一：使用伪类after（推荐）
.clearfix
display:inline-block
&:after
display:block
content:'.'
clear:both
height: 0
line-height: 0
visibility:hidden
方法二：在结尾处空div标签
.clear{clear:both}
<div class=”clear”></div>
方法三：给父级div加 overflow:hidden ,必须定义width或zoom:1 ，同时不能加height
.div1{width:98%;overflow:hidden}
方法四：给父级div加 overflow:auto,必须定义width或zoom:1 ，同时不能加height
.div1{width:98%;overflow:auto}
64、移动端布局用vm
65、300ms延迟的由来
66、网站安全问题
参考地址：https://blog.csdn.net/qq_38160012/article/details/80574746
1>、尽量使用post ，限制get的使用
2>、过滤用户输入的内容不能带html标签
3>、token验证
4>、验证码：强制用户必须与应用进行交互，才能完成最终请求
67、实现响应式布局
1>、添加 meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
2>、先做出一版不是响应式 的pc版；width不设置或者用百分比
3>、图片设置 img{max-width:100%;height:auto}
4>、在css里添加断点 （由又大到小）排在最下边的权限最高
@media screen and (max-width: 960px) {}
/*ipad*/
@media screen and (max-width: 768px) {}
/*iphone 6 plus*/
@media screen and (max-width: 414px) {}
/*iphone 6*/
@media screen and (max-width: 375px) {}
/*iphone 4*/
@media screen and (max-width: 320px) {}
68、decodeURI的用法
1>、decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
2>、decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
区别：encodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；而encodeURIComponent()则会对它发现的任何非标准字符进行编码
69、用jquery获取选中input的val值
如果input的name是相同的可以用： $("input[name='man']:checked").val()
如果name是不同的：$("input:checked").val()
70、简述js和jquery中on()、click()和onclick()绑定点击事件的方法和区别
Js中事件绑定 ：
odiv.onclick=function(){}
odiv.addEventListener(“click”,function(){},false)事件监听
Jquery中事件绑定：
on(),bind(),delegate(),live() 就这四种方式
click()方法 当单机时触发click事件 eg:$("p").click(function(){})
72、Typeof
参考地址：https://blog.csdn.net/yellowmushroom/article/details/80249493
基本数据类型返回的是自己对应的类型
复杂数据类型，如果是对象，则返回的是object,如果的function类型,则返回的是function
73、setTimeout
for(var i=0;i<5;i++){
setTimeout(function(){
console.log(i)
},1000)
}
解决办法一：
for(var i=0;i<5;i++){
(function(i){
setTimeout(function(){
console.log(i)
},1000)
})(i)
}
解决办法二：
for(let i=0;i<5;i++){
setTimeout(function(){
console.log(i)
},1000)
}
74、什么是“平稳退化”和“渐进增强”理念？
“平稳退化”是在浏览器没有JavaScript功能，或没有开启JavaScript功能情况下，我们解决这种问题的 方式；“渐进增强”是在浏览器开启JavaScript功能后，如果浏览器版本不支持某些JavaScript能力，我们解决这种问题的方式。
75、在ios上打开列表页，滚动的时候会出现卡顿
解决方式：
over-flow: auto; /* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
如果还是不行，在滚动区域元素添加以下方法：
1.添加上overflow-y: scroll；
2.添加z-index；
76、多行文字垂直居中
.container{display:table}
.text{display:table-cell;vertical-align:middle}
网友评论