100道最常见的校招前端⾯试题（更新中）
1. Http协议中Post和Get⽅法的区别？
Get请求⽐Post执⾏更有效率，是因为浏览器在发送Post请求时，会先将请求头发送给服务器确认，服
务器返回100 continue响应后，浏览器才开始发送数据。
2. 如何利⽤CSS实现三⾓形？
将⼀个div的宽度和⾼度，都设置为0，设置div四个边框的宽度，并利⽤transparent属性隐藏三个边框，只留下⼀个边框，就可得到⼀个三⾓形？如果是直⾓三⾓形，则隐藏2个相邻的边框，剩下2个相邻的边框就拼成了⼀个直⾓三⾓形。
3. 常见的跨域技术有哪些？
通过img标签的src属性
通过JSONP动态插⼊script标签，执⾏回调函数
通过跨域资源共享（CORS）发送AJAX请求，普通跨域请求只需在服务端设置Access-Control-Allow-Origin即可。⽽带有cookie的跨域请求，还需在服务端设置Access-Control-Allow-Credentials，且前端设置xhr对象的withCredentials属性为true。
通过配置代理服务器，如nginx反向代理proxy_pass字段，nodejs中间件，webpackserver的proxy属性等。
通过websocket进⾏跨域
通过HTML5API PostMessage实现多页⾯，多窗⼝以及iframe之间的的通信
4. 如何利⽤CSS2实现元素⽔平垂直居中？
利⽤绝对定位 + margin: auto实现，设置top left bottom right为0
利⽤绝对定位，设置top left为50%，并设置transform： translate（-50%，-50%）实现
⾏内元素，使⽤text-align: center，并将line-height值设置为⽗元素⾼度
利⽤flex进⾏布局，设置align-items: center;justify-content: center；实现居中
将元素设置为table-cell，使⽤vertical-align: middle 以及text-align: center实现居中
html个人网页完整代码顺序5. rem和em的区别？
rem是根据html根元素的字体⼤⼩进⾏换算的，⽽em是根据⽗元素的字体⼤⼩进⾏换算的
6. 闭包是什么？有什么⽤？
闭包是指有权访问另⼀函数作⽤域中变量的函数，创建闭包的常⽤⽅式就是在⼀个函数内部定义另⼀个函数。
易语言多线程稳定写法闭包可以创建私有变量和⽅法，为setTimeout等⽅法传递参数等
闭包的缺点是，其让变量⼀直保存在内存中，容易造成内存泄露
7. 图像懒加载的原理是什么？
页⾯加载时，将图⽚加载的链接，保存在img标签的⾃定义属性中，src属性为空，并监听窗⼝的scroll事件。当img标签出现在视⼝中时，利⽤js将图⽚加载编写填写⾄src属性中，实现动态加载图⽚。
8. git pull 和 git fetch⽅法的区别？
git fetch origin master:tmp是从远程仓库获取最新数据到本地，但其不会主动合并，需要你调⽤git merge命令才会与当前分⽀合并，在此之前你可以调⽤git diff查看其与当前分⽀的差异，选择是否合并
⽽git pull是获取数据后，直接将其合并到当前分⽀
9. Https的主要特点？
https = http + 完整性保护（报⽂摘要） + 认证 + 加密
HTTPS只是HTTP通信接⼝部分⽤SSL或TLS等协议代替⽽已。当通信时，HTTP先与SSL通信，再由SSL和TCP进⾏通信。
https使⽤混合加密机制，⾸先使⽤⾮对称加密换取对称加密密钥，再使⽤对称加密传输数据信息
https使⽤数字证书认证机构（CA）和其相关机构颁发的公开密钥证书，可以使客户端验证服务器公开密钥的真实性。
https在发送数据时，会附加MAC报⽂摘要，从⽽防⽌报⽂在传输过程中遭遇篡改
10. position属性有哪些？
static: 默认值，位于⽂档流之中，正常布局
relative：位于⽂档流之中，可以使⽤top和left等属性，使其相对于原位置进⾏偏移
absolute：绝对定位，元素脱离⽂档流，相对于其包含块定位（第⼀个⾮static值的⽗元素）
fixed：与absolute类似，不过其包含块为页⾯。
inherit：从⽗元素那继承position属性
initial：默认样式
unset：未设置，若该样式可继承，则相当于inherit，若不可继承，则相当于initial
11. xss和csrf是什么？各有什么防御⼿段？
使用抽象类的好处xss为跨站脚本攻击，攻击者向web⽹页中恶意植⼊代码，⽤户访问该页⾯时，就会受到攻击。防御⼿段：对输⼊(和URL参数)进⾏过滤并对输出进⾏编码，例如单双引号、反斜线、⼤于和⼩于号。如果script、img、link以及background等标签或属性为动态内容，要确保这些url是安全的。在服务端对cookie设置http only，防⽌攻击者窃取cookie值。使⽤内容安全策略（CSP）。
csrf为跨站请求伪造，指攻击者通过设置好的陷阱，强制对已完成认证的⽤户进⾏⾮预期的个⼈信息或设定信息等某些状态更新。防御⼿段：验证HTTP Refer（缺点：⽼版的浏览器可可以篡改Refer），toke验证（在http请求中加⼊随机产⽣的toke，服务端进⾏合法性验证，缺点对每个请求都加⼊token⽐较⿇烦，且token可能会被refer属性暴露），⾃定义HTTP属性头（通过
XMLHttpRequest这个类，给http请求加上属性头，缺点为只限于ajax）。通过cookie的sameSite字段。
12. 说⼀下vue实例的⽣命周期？
new Vue() > 初始化事件和⽣命周期 > beforeCreate > 数据绑定 > created > 如果有el属性，则编译模板 > beforeMount > 添加$el属性，并替换掉挂载的DOM元素 > mounted > 数据更新 > beforeUpdate > 重新编译模板并渲染DOM > updated > 调⽤$destoryed > beforeDestory > 销毁vue实例 > destroyed
13. react中props和state有什么区别？
react是单向数据流，props是⼀个⽗组件传递给⼦组件的数据流接⼝，可以⼀直的被传递到⼦孙组件中，在组件内部的props是只读的。⽽state是组件内部私有的状态，通过修改state会触发组件的重新渲染。
14. 如何解决float属性引起的⽗元素塌陷问题？
给⽗元素设置overflow: hidden属性
给⽗元素添加⼀个⾼度
通过伪类，给这个伪类添加clear: both 和 display: block
15. 实现⼀个防抖函数和节流函数？
函数节流: 频繁触发，但只在特定的时间内才执⾏⼀次代码
函数防抖: 频繁触发，但只在特定的时间内没有触发执⾏条件才执⾏⼀次代码
//防抖函数
function debounce(fn, time){
return function(){
金融html5模板
var context =this;
clearTimeout(timeId);
timeId =setTimeout(function(){
fn.apply(context, arguements);
}, time);
};
}
//节流函数
function throttle(fn,time){
var last =0;
return function(){
var context =this;
var now = w();
if(now - last >= time){
fn.apply(this, arguments);
last = now;
}
};
}
16. Js中常见的对象继承⽅式？
//原型链继承
SubType.prototype =new SuperType();
//构造函数继承
function SubType(){
SuperType.call(this);
}
原型链继承的缺点在于，当⽗类存在引⽤型属性时，该属性会被所有实例共享，因此修改某个实例的
该属性，会影响到其他实例。⽽构造函数的缺点在于，每次调⽤构造函数，对象⽅法都会被创建⼀次，⽆法达到函数复⽤。因此在实际⼯作中，是结合两者进⾏使⽤，原型链继承⽅法，⽽构造函数继承属性。
17. new操作符做了哪些事情？
const a =new Foo();
//以下为new 操作符⼲的事情
var o =new Object();//新建⼀个空对象
o.__proto__ = Foo.prototype;//将该空对象的原型指向构造函数的原型对象
Foo.call(o);//在空对象上调⽤构造函数
a = o;//赋值给变量
18. 说⼀说Js事件循环？
www.jianshu/p/12b9f73c5a4f
wwwblogs/cangqinglang/p/8967268.html
wwwblogs/jasonxuli/p/6074231.html
19. promise的原理是什么？
blog.csdn/zjw_python/article/details/108059154
20. CommonJS，AMD，CMD以及ES6 import的区别是什么？
CommonJS是运⾏时加载，ES6是编译时输出接⼝
CommonJS是输出的⼀个值的复制，⽽ES6输出的是值的引⽤
AMD 异步模块定义，通过define函数声明依赖模块（数组）和回调函数，特点是依赖前置，其加载模块完成后就会执⾏该模块，所有模块都加载执⾏完后会进⼊回调函数，执⾏主逻辑，这样的效果就是依赖模块的执⾏顺序和书写顺序不⼀定⼀致，看⽹络速度，哪个先下载下来，哪个先执⾏，但是主逻辑⼀定在所有依赖加载完成后才执⾏。
CMD 同样为异步加载，区别在于其为就近依赖，需要使⽤把模块变为字符串解析⼀遍才知道依赖了那
些模块，其加载完某个依赖模块后并不执⾏，只是下载⽽已，在所有依赖模块加载完成后进⼊主逻辑，遇到require语句的时候才执⾏对应的模块，这样模块的执⾏顺序和书写顺序是完全⼀致的。
21. 说⼀下TCP的3次握⼿连接和4次挥⼿断开连接，为什么⼀个是3次，⼀个是4次？
三次握⼿：客户端向服务端发送⼀个SYN报⽂，服务端收到报⽂确认后，发送⼀个SYN-ACK报⽂，客户端收到服务器的报⽂后，返回⼀个ACK报⽂，连接建⽴。
四次挥⼿：客户端向服务端发送⼀个FIN报⽂，服务端收到报⽂后，⽴即发送⼀个ACK报⽂，随即通知本地服务启动清理⼯作，当清理完成时，发送⼀个FIN报⽂给客户端，客户端收到后返回⼀个ACK报⽂，连接关闭。
blog.csdn/zjw_python/article/details/79207185
由于服务端接受到客户端关闭连接请求时，可能⼀些数据还没有发送完成，因此不能⽴刻关闭连接，因此多了⼀次挥⼿。
22. DNS的解析过程是什么？什么是DNS劫持攻击？
⾸先检查浏览器缓存中以及操作系统缓存中有没有对应的已解析过的结果（hosts⽂件），若没有则请
求本地域名服务器（LDNS）来解析这个域名，若未成功解析，则跳转到根域名服务器，根域名服务器给予⼀个主域名服务器地址，然后本地域名服务器再去请求主域名服务器地址，接着主域名服务器会返回⽹站注册域名的服务器Name server的地址，本地服务器⼜去访问Name server，最终到ip地址并返回给本地域名服务器，然后缓存该ip地址，解析结束。
DNS劫持：⼜被称为域名劫持，DNS重定向（DNS direaction），是⼀种DNS攻击⽅式。即是DNS查询没有得到正确的解析，以致引导user访问到恶意的⽹站，从⽽窃取⽤户隐私，或者进⾏某些恶意的操作（修改本地hosts⽂件，缓存、侵⼊到路由管理员账号中，修改路由器的默认配置、感染dns服务器的缓存）。juejin.im/post/6844903863623876622
擦车布23. CSS各选择器的优先级？
!important > ⾏内样式>ID选择器 > 类选择器/属性/伪类 > 标签 > 通配符 > 继承 > 浏览器默认属性
24. 说⼀下浏览器从发起请求到呈现页⾯的整个过程？
DNS解析ip地址 > TCP三次握⼿连接 > 发送HTTP请求 > 服务器处理，返回HTTP响应 > 浏览器解析响应 > 构建DOM树、CSSrule 树，合并⽣成render树，计算布局并绘制
25. ⾼阶函数是什么？有什么⽤？
⼀个函数就可以接收另⼀个函数作为参数，这种函数就称之为⾼阶函数。
⾼阶函数⼴泛应⽤于js中，例如map、sort、setTimeout等
26. 说⼀下meta标签有什么⽤？
元素可提供有关页⾯的元信息（meta-information），⽐如针对搜索引擎、更新频度、cookie的描述和关键词。元数据总是以名称/值对的形式表⽰，名称有两种类型：name和http-equiv。其中当名称为http-equiv，会将值关联到HTTP头部。常见的类型如下
<meta http-equiv="Refresh"content="5;url=blog.yangchen123h"/>  5秒跳转
<meta name="viewport"content="width=device-width, initial-scale=1.0">页⾯适配
<meta http-equiv="charset"content="iso-8859-1">声明字符集
<meta http-equiv="expires"content="31 Dec 2008">声明过期时间
27. HTML⽂档有哪⼏种⽂档类型？为什么要进⾏类型声明？
严格型（strict）、过渡型（transitional）和框架型（Frameset）
严格型不包括框架集、⼀些废弃的元素标签，过渡型包含废弃的元素标签，但不允许框架集。⽽框架型等同于过渡型，且允许框架。
作⽤：只有进⾏正确的类型声明，浏览器才能正确的解析html⽂档。
28. bootstrap栅格系统的原理是什么？
媒体查询 + 百分⽐宽度
@media (min-width: 768px){/*当宽度⼤于768px时触发*/
.container{
width: 750px;
}
}
@media (min-width: 992px){/*当宽度⼤于992px时触发*/
.container{
width: 970px;
}
}
继承了抽象类必须实现所有方法吗
@media (min-width: 1200px){/*当宽度⼤于1200px时触发*/
.container{
width: 1170px;
}
}
29.
30.
1. vh和vw单位是什么？
vw：视窗宽度的百分⽐（1vw 代表视窗的宽度为 1%）
vh：视窗⾼度的百分⽐
vmin：当前 vw 和 vh 中较⼩的⼀个值
vmax：当前 vw 和 vh 中较⼤的⼀个值
32.
3. CSS可继承的属性
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi 所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse
34.
5. js对象的深拷贝？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。