一 : 从浏览器地址栏输⼊url到显示⻚⾯的步骤
可以看看这位大佬的文章.
主要了解 TCP三次握手 四次挥手,DNS查询 浏览器渲染机制.
二 : HTTP状态码及其含义
<pre class="hljs" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">1XX ：信息状态码
复制代码</pre>
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 的区别
- link 是 HTML ⽅式， @import 是CSS⽅式
- link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现 FOUC (⽂档样式 短暂失效)
- link 可以通过 rel="alternate stylesheet" 指定候选样式
- 浏览器对 link ⽀持早于 @import ，可以使⽤ @import 对⽼浏览器隐藏样式
- @import 必须在样式规则之前，可以在css⽂件中引⽤其他⽂件
- 总体来说： link 优于 @import
- 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如何实现继承？
二十 new操作符具体⼲了什么呢?
1.创建一个空对象
- 绑定原型关系
- 执行函数并绑定this
- 隐式返回一个对象,如果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 这玩意建议自己写个代码感受一下,没有代码完全不知道在说什么..
二十三 ⽤过哪些设计模式？
二十四 说说你对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-Modified�Since ，表示资源上次的修改时间，服务端拿到这两个字段进⾏对⽐
还需要更多资料的朋友可以加一下Q群：1093606290
