Web前端大厂面试题集笔记

（1）JSON和XML的不同？针对Ajax应用，JSON的优势是什么？

• JSON 不需要结束标签
• JSON 更加简短
• JSON 读写速度更快
• JSON 可以使用数组

• JSON 比 XML 数据加载更快，解析更简单：

（2）clientWidth和offsetWidth的实际宽度是如何计算的？

• clientWidth = width+左右padding

• offsetWidth = width + 左右padding + 左右boder

（3）在HTML中嵌入PHP代码，有几种方法？

• 默认语法:<?php ... ?>
• 短标记:<? ... ?>
• 脚本:<script language="php">

（4）你都知道哪些提高DOM操作效率的方法？

• 处理列表子元素的点击事件时，使用事件代理
• 插入大量DOM元素时，使用innerHTML替代逐个构建元素
• 使用DocumentFragment替代多次appendChild操作

（5）DOM中HTMLDivElement的正确继承关系是什么？

（6）当 margin-top、padding-top 的值是百分比时，分别是如何计算的？

• 相对最近父级块级元素的 width，相对最近父级块级元素的 width

（7）p元素和a元素能嵌套哪些元素？

• p元素不能包含任何块级元素(包括自身)
• a元素可以包含任何其他元素(除了自身)

（8）DOM树的根节点是什么？

• document

（9）什么是SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
• (SVG是HTML下的一个分支)

（10）关于 link 和 @import 区别是什么？

• link 可以使用 JavaScript 控制 DOM 改变样式，@import 不支持
• link 引用 CSS 时，页面加载同时加载样式，@import 需要页面完全载入以后加载
• link属于HTML范畴,@import属于CSS范畴

（11）canvas的drawImage能使用跨域图片吗？如果不能有什么解决方案？

• 不能，会报错

• 方案一：如果图片不大不多可以使用base64
• 方案二：实例的image对象的设置img.crossOrigin = ’ ';并且在服务器端设置Access-Control-Allow-Origin:*(或运行的域名)

（12）window.onerror 方法默认情况下能获取跨域脚本的报错详情吗？如不能有什么解决方案？

• 不能

• 首先：把相关js文件上加上Access-Control-Allow-Origin:**的response header
• 其次：引用相关的js文件时加上crossorigin属性

（13）请你谈谈display:none、visibility:hidden、opacity:0三者的区别或作用效果？

• display:none——元素完全不陈列出来，不占据空间，重排且重绘页面，不可触发绑定事件
• visibility：hidden——元素不可见但存在，保留空间，只重绘，不可触发绑定事件
• opacity:0——元素不可见但存在，保留空间，只重绘，可触发绑定事件

（14）说一下扩展运算符和解构赋值运算符的区别。

• 扩展运算符：将数组，字符串，对象从语法层面上展开，达到语法简化的目的
• 解构赋值运算符：将数组，字符串，对象从语法层面展开后，将对应数组赋给指定变量，达到语法简化的目的

（15）为什么number,boolean,string等基本数据类型也可以用API？

• AUTO-BOXING:自动装箱。当操作基本数据类型的API时，系统会自动根据基本数据类型创造包装类型（封装类型）的对象，并将基本数据类型的值作为包装类型的初始值

（16）谈谈你对浅拷贝和深拷贝的认识。

• 浅拷贝对引用数据类型的属性只做引用地址拷贝（值拷贝），不会拷贝引用的空间
• 深拷贝对引用数据类型的属性实现引用空间的拷贝，与源对象的属性空间相互独立

（17）call与apply区别是什么？

• 相同：都可以改变this的指向
• 不同：call实参独立的形式传入，apply实参以数组元素的形式传入

（18）null与undefined区别是什么？

• null:无“对象”，原型链顶端为null
• undefined:无“值”
  变量申明未赋值（包含函数形参）
  函数未指定返回值强行接受函数的返回值
  对象中属性未申明

（19）说说分页实现流程和后端分页流程？

（20）mvc是是什么？

（21）说说http和https的区别？

（22）如何限制文件上传类型？

（23）文件上传流程是什么？

1. 获取到你选中的文件
2. 创建一个表单对象，文件用表单的方式提交 或者自己操作二进制流
3. 将文件存放在表单对象里面
4. 发送异步请求，将整个表单上传服务器，自己取出对应的数据
5. 检查上传是否成功，执行后面业务

（24）如何保证页面流畅？

（25）防抖和节流的区别，分别作用什么场景？

（26）身份认证流程？

（27）ajax 配置有哪些？

（28）数组常用的api有哪些？

（29）页面的性能优化有哪些?

（30）下拉菜单如何切换？

（31）字符串有哪些常用的api?

（32）ES6常用的特性有哪些?

（33）webpack一般配置哪些内容?

（34）解读一下webpack里面常用的配置含义

（35）proxy是什么， 为什么要配置proxy？

（36）同步和异步区别是什么？

（37）事件循环的理解？

（38）地址参数传递如何实现？

（39）原型和原型链区别是什么？

（40）聊聊什么是作用域？

（41）上传头像后如果取消修改上传的图片，上传的图片如何处理？

上传到后端的图片都会存储在临时文件中，返回到前端进行渲染展示，只有当确认修改时，临时文件的图片才会移动到图片文件目录，后端会定时清理临时文件的内容

（42）什么是debug模式？

（43）如何实现对象深拷贝?

（44）let和const的区别？

（45）普通函数和箭头函数的区别？

（46）登陆状态下，如何保证用户无需登陆？

（47）taken如何设置白名单？

（48）谈谈什么是声明提升现象？

（49）谈谈函数提升和变量？

（50）set和map有什么区别？

（51）数组如何去重，你了解几种方法？

（52）mogoose常用函数有哪些？

（53）nodejs中如何处理文件？

（54）扩展运算符作用是什么？

（54）什么是解构赋值？

（55）await和async特点？

（56）promise常用的api是什么？

（57）滑动模块实现思路是什么？

（58）promise是什么?

（59）常见的http状态吗有哪些？

（60）重绘和回流概念？

（61）token是存放在哪个位置？

（62）没有登陆的如何保证无法进入主页？

（63）get和ρost有什么区别？

（64）如何实现多表关联？