前端基础百篇----面试重点 (注:我只是总结一下,大部分答案来源第三方,另一下过于基础的不列) 持续更新ing

注: 原本不想写答案的,毕竟大部分是复制的,想一想仍是写吧.另外会分享部分我收藏的网站.

一 : 从浏览器地址栏输⼊url到显示⻚⾯的步骤

www.jianshu.com/p/b7207077f…

能够看看这位大佬的文章.

主要了解 TCP三次握手 四次挥手,DNS查询 浏览器渲染机制.

二 : HTTP状态码及其含义

1XX ：信息状态码
复制代码

100 Continue 继续，⼀般在发送 post 请求时，已发送了 http header 以后服务端 将返回此信息，表示确认，以后发送具体参数信息

2XX ：成功状态码

200 OK 正常返回信息

201 Created 请求成功而且服务器建立了新的资源

202 Accepted 服务器已接受请求，但还没有处理

3XX ：重定向

301 Moved Permanently 请求的⽹⻚已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且老是使⽤ GET 请求新的 URI 。

304 Not Modified ⾃从上次请求后，请求的⽹⻚未修改过。

4XX ：客户端错误

400 Bad Request 服务器⽆法理解请求的格式，客户端不该当尝试再次使⽤相同的内 容发起请求。

401 Unauthorized 请求未受权。

403 Forbidden 禁⽌访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误

500 Internal Server Error 最常⻅的服务器端错误。

503 Service Unavailable 服务器端暂时⽆法处理请求（多是过载或维护）。

三 语义化的理解

⽤正确的标签作正确的事情！

HTML 语义化就是让⻚⾯的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式 CSS

状况下也以⼀种⽂档格式显示，而且是容易阅读的。 搜索引擎的爬⾍依赖于标记来肯定上下⽂和各个关键字的权重，利于 SEO 。

使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解

四 请描述⼀下 cookies ， sessionStorage 和 localStorage 的区别？

cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端（Client Side）上的数据（一般 通过加密）

cookie数据始终在同源的http请求中携带（即便不须要），记会在浏览器和服务器间来回 传递

sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存 存储⼤⼩：

cookie 数据⼤⼩不能超过4k

sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得 多，能够达到5M或更⼤

有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据

sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除

cookie 设置的 cookie 过时时间以前⼀直有效，即便窗⼝或浏览器关闭

能够说下cookie的缺点 :

不安全,大小4k可能被禁用和删除

能够说下indexDB .

五 div+css的布局较table布局有什么优势？

改版的时候更⽅便 只要改 css ⽂件。 ⻚⾯加载速度更快、结构化清晰、⻚⾯显示简洁。 表现与结构相分离。 易于优化（ seo ）搜索引擎更友好，排名更容易靠前。

六 你能描述⼀下渐进加强和优雅降级之间的不一样吗

渐进加强：针对低版本浏览器进⾏构建⻚⾯，保证最基本的功能，而后再针对⾼级浏览器

进⾏效果、交互等改进和追加功能达到更好的⽤户体验。

优雅降级：⼀开始就构建完整的功能，而后再针对低版本浏览器进⾏兼容。

七 css sprite是什么,有什么优缺点

概念：将多个⼩图⽚拼接到⼀个图⽚中。经过 background-position 和元素尺⼨调节需 要显示的背景图案。

优势：减小 HTTP 请求数，极⼤地提⾼⻚⾯加载速度 增长图⽚信息重复度，提⾼压缩⽐，减小图⽚⼤⼩

更换⻛格⽅便，只需在⼀张或⼏张图⽚上修改颜⾊或样式便可实现 缺点：图⽚合并麻烦 维护麻烦，修改⼀个图⽚可能须要重新布局整个图⽚，样式

八 display: none; 与 visibility: hidden; 的区别 / vue v-if v-show 相似

我用本身的语言答一下吧

两个都3不可见 主要区别 display: none; dom被移除了 , visiblity 你能够理解为隐身了.另外能够继承.而后你能够扯上回流和重绘又能够巴拉巴拉吹水了.

九 link 与 @import 的区别

1. link 是 HTML ⽅式， @import 是CSS⽅式
2. link 最⼤限度⽀持并⾏下载， @import 过多嵌套致使串⾏下载，出现 FOUC (⽂档样式 短暂失效)
3. 3. link 能够经过 rel="alternate stylesheet" 指定候选样式
4. 4. 浏览器对 link ⽀持早于 @import ，可使⽤ @import 对⽼浏览器隐藏样式
5. 5. @import 必须在样式规则以前，能够在css⽂件中引⽤其余⽂件
6. 6. 整体来讲： link 优于 @import
7. 2和3必定要说到.另外利用@import对老浏览器的不支持能够把一些样式写在@import 实现渐进加强.另外若是我没记错,mport引用的CSS会等到页面所有被下载完再加载.

十 清除浮动的⼏种⽅式，各⾃的优缺点

⽗级 div 定义 height

结尾处加空 div 标签 clear:both

⽗级 div 定义伪类 :after 和 zoom

⽗级 div 定义 overflow:hidden

⽗级 div 也浮动，须要定义宽度 结尾处加 br 标签 clear:both

十一 display有哪些值？说明他们的做⽤

block 转换成块状元素。

inline 转换成⾏内元素。

none 设置元素不可⻅。

inline-block 象⾏内元素⼀样显示，但其内容象块类型元素⼀样显示。

list-item 象块类型元素⼀样显示，并添加样式列表标记

table 此元素会做为块级表格来显示

inherit 规定应该从⽗元素继承 display 属性的值

十二 PNG\GIF\JPG的区别及如何选

GIF

8 位像素， 256 ⾊

⽆损压缩 ⽀持简单动画 ⽀持 boolean 透明 适合简单动画

JPEG

颜⾊限于 256

有损压缩 可控制压缩质量 不⽀持透明 适合照⽚

PNG

有 PNG8 和 truecolor PNG

PNG8 相似 GIF 颜⾊上限为 256 ，⽂件⼩，⽀持 alpha 透明度，⽆动画 适合图标、背景、按钮

通常做为性能优化的一个点说...

十三 动画

主要说下animation和transition的区别,另外你能说出window.requestAnimationFrame那么你很棒,既然说出了这个,你又能够说他能够解决一下渲染10万个dom元素不卡顿能够用他

十四 垂直水平居中子元素

啪啦啪啦你应该说出至少四种

弹性啊,表格啊,绝对定位两种啊

文字能够text aline center ,line-height 啊

十五 重绘和回流（重排）是什么，如何避免？

DOM的变化影响到了元素的⼏何属性（宽⾼）,浏览器从新计算元素的⼏何属性，其余元素 的⼏何 属性和位置也会受到影响，浏览器须要从新构造渲染树，这个过程称为重排，浏览器将受 到影响的部分 从新绘制到屏幕上的过程称为重绘。 引发重排的缘由有

添加或者删除可⻅的DOM元素， 元素位置、尺⼨、内容改变， 浏览器⻚⾯初始化

浏览器窗⼝尺⼨改变，重排⼀定重绘，重绘不⼀定重排，

减小重绘和重排的⽅法：

不在布局信息改变时作 DOM 查询

使⽤ cssText 或者 className ⼀次性改变属性

对于屡次重排的元素，如动画，使⽤绝对定位脱离⽂档流，让他的改变不影响到其余元素

十六 闭包

用个人话来讲就是函数中的函数,孩子拿着父亲的变量出来溜达溜达

好处避免全局污染,可以实现封装和缓存

坏处,消耗内存,可能会形成内存泄露

十七 JavaScript原型，原型链 ?

每一个函数都有一个Protype属性,这个属性是一个对象,叫作原型对象.原型对象上又有一个construction属性,construction属性又指向原型对象的调用者.

当访问一个对象时,访问自身的__proto__,若是没找到,则访问父级的__proto__,直到OBject.prototype.__proto__为null为止..

十八 请解释什么是事件代理

主要谈到事件冒泡.还有e.target,节约内存,减小事件注册.

十九 Javascript如何实现继承？

能够去看 juejin.im/post/5dac5d…

二十 new操做符具体⼲了什么呢?

1.建立一个空对象

2. 绑定原型关系
3. 执行函数并绑定this
4. 隐式返回一个对象,若是return的不是一个对象则返回建立的对象,若是return 对象则返回的是return的对象

二十一 如何解决跨域问题

经过jsonp跨域

document.domain + iframe跨域

nodejs中间件代理跨域

vue proxy

还有不少 详情百度

二十二 异步加载JS的⽅式有哪些？

了解async 和defer的区别

二十二 常⻅web安全及防御原理

sql 注⼊原理 就是经过把 SQL 命令插⼊到 Web 表单递交或输⼊域名或⻚⾯请求的查询字符串，最终 达到欺骗服务器执⾏恶意的SQL命令 总的来讲有如下⼏点 永远不要信任⽤户的输⼊，要对⽤户的输⼊进⾏校验，能够经过正则表达式，或限制⻓ 度，对单引号和双 "-" 进⾏转换等 永远不要使⽤动态拼装SQL，可使⽤参数化的 SQL 或者直接使⽤存储过程进⾏数据查 询存取 永远不要使⽤管理员权限的数据库链接，为每一个应⽤使⽤单独的权限有限的数据库链接 不要把机密信息明⽂存放，请加密或者 hash 掉密码和敏感的信息 XSS原理及防范 Xss(cross-site scripting) 攻击指的是攻击者往 Web ⻚⾯⾥插⼊恶意 html 标签或 者 javascript 代码。⽐如：攻击者在论坛中放⼀个看似安全的连接，骗取⽤户点击后， 窃取 cookie 中的⽤户私密信息；或者攻击者在论坛中加⼀个恶意表单，当⽤户提交表单 的时候，却把信息传送到攻击者的服务器中，⽽不是⽤户本来觉得的信任站点 XSS防范⽅法 ⾸先代码⾥对⽤户输⼊的地⽅和变量都须要仔细检查⻓度和对 ”<”,”>”,”;”,”’” 等字符 作过滤；其次任何内容写到⻚⾯以前都必须加以encode，避免不⼩⼼把 html tag 弄出 来。这⼀个层⾯作好，⾄少能够堵住超过⼀半的XSS 攻击 XSS与CSRF有什么区别吗？ XSS 是获取信息，不须要提早知道其余⽤户⻚⾯的代码和数据包。 CSRF 是代替⽤户完成 指定的动做，须要知道其余⽤户⻚⾯的代码和数据包。要完成⼀次 CSRF 攻击，受害者必 须依次完成两个步骤 登陆受信任⽹站 A ，并在本地⽣成 Cookie 在不登出 A 的状况下，访问危险⽹站 B CSRF的防护

服务端的 CSRF ⽅式⽅法不少样，但总的思想都是⼀致的，就是在客户端⻚⾯增长伪随机 数 经过验证码的⽅法

emmmm 这玩意建议本身写个代码感觉一下,没有代码彻底不知道在说什么..

二十三 ⽤过哪些设计模式？

www.cnblogs.com/imwtr/p/945…

二十四 说说你对promise的了解

没什么好说的,本身写一下promise源码 .就算写不出来,讲的时候也能够重源码哪里扯点犊子.通常不是大公司也不会叫你写.

有机会的话专门写一篇文章写一下。

二十五 谈⼀谈箭头函数与普通函数的区别？

函数体内的 this 对象，就是定义时所在的对象，⽽不是使⽤时所在的对象 不能够看成构造函数，也就是说，不可使⽤ new 命令，不然会抛出⼀个错误

不可使⽤ arguments 对象，该对象在函数体内不存在。

若是要⽤，能够⽤ Rest 参数 代替不可使⽤ yield 命令，

所以箭头函数不能⽤做 Generator 函数

匿名函数,没有this,使用父级this,不能够改变this

二十六 谈⼀谈函数中this的指向

emmm 就正常来.就好了

其实我想说的是,你能够说一下es6的双冒号语法改变this .

二十七 数组去重

本身百度四种以上吧

二十八 防抖和节流

不会的百度一下代码 .性能优化的时候也能够扯一下,就10几行代码

二十九 说说 event loop

这个详情本身百度吧 ,必定要掌握啊

总结一下就是执行一个宏任务执行全部微任务 再执行一个宏任务,再执行全部微任务.

三十 说⼀下浏览器的缓存机制

浏览器缓存机制有两种，⼀种为强缓存，⼀种为协商缓存 对于强缓存，浏览器在第⼀次请求的时候，会直接下载资源，而后缓存在本地，第⼆次请 求的时候，直接使⽤缓存。

对于协商缓存，第⼀次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识 和最后缓存时间，服务端进⾏校验，若是失效则使⽤缓存 协商缓存相关设置

Exprires ：服务端的响应头，第⼀次请求的时候，告诉客户端，该资源何时会过 期。 Exprires 的缺陷是必须保证服务端时间和客户端时间严格同步。

Cache-control：max-age ：表示该资源多少时间后过时，解决了客户端和服务端时间必 须同步的问题， If-None-Match/ETag ：缓存标识，对⽐缓存时使⽤它来标识⼀个缓存，第⼀次请求的时 候，服务端会返回该标识给客户端，客户端在第⼆次请求的时候会带上该标识与服务端进 ⾏对⽐并返回 If-None-Match 标识是否表示匹配。

Last-modified/If-Modified-Since ：第⼀次请求的时候服务端返回 Last-modified

代表请求的资源上次的修改时间，第⼆次请求的时候客户端带上请求头 If-ModifiedSince ，表示资源上次的修改时间，服务端拿到这两个字段进⾏对⽐