html和css选择题_判断题题目

干货来袭！前端300基础面试题+答案、分类学习整理 　　HTML 篇 　　图片中 title 和 alt 区别？ 　　通常当⿏标滑动到素上的时候显示alt 是 的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会重点分析。 　　Html5 有哪些新特性、移除了哪些素 　　新增素： 绘画canvas 用于媒介回放的video 和 audio 素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失 sessionStorage 的数据在浏览器关闭后自动删除 语义化更好的内容素，比如 article 、footer、header、nav、section 表单控件 ，calendar 、 date 、 time 、 email 、 url 、 search 新的技术 webworker 、 websocket 、 Geolocation移除的素： 纯表现的素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u 对可⽤性产⽣负⾯影响的素： frame 、 frameset 、 noframes⽀持 HTML5 新标签： IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产⽣的标签 可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签 浏览器⽀持新标签后，还需要添加标签默认的样式 　　浏览器是怎么对 Html5 的离线储存资源进⾏管理和加载的呢 　　如何使⽤：⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性；在 cache.manifest ⽂件的编写离线存储的资源在离线状态时，操作 window.applicationCache 进⾏需求实现 　　在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如 果是第⼀次访问 app ，那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏ 离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的资 源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没 有发⽣改变，就不做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏ 离线存储。 　　iframe有哪些缺点？ 　　iframe 会阻塞主⻚⾯的 Onload 事件搜索引擎的检索程序⽆法解读这种⻚⾯，不利于 SEOiframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ，最好是通过javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题 　　HTML W3C的标准 　　标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离 　　Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义? 　　<!DOCTYPE> 声明位于⽂档中的最前⾯，处于 html 标签之前。告知浏览器的解析器， ⽤什么⽂档类型 规范来解析这个⽂档严格模式的排版和 JS 运作模式是 以该浏览器⽀持的最⾼标准运⾏在混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现 　　HTML全局属性(global attribute)有哪些 　　class :为素设置类标识data-* : 为素增加⾃定义属性draggable : 设置素是否可拖拽id : 素 id ，⽂档内唯⼀lang : 素内容的的语⾔style : ⾏内 css 样式title : 素相关的建议信息 　　viewport的content属性作用 　　附带问题：怎样处理 移动端 1px 被 渲染成 2px 问题? 　　局部处理mate 标签中的 viewport 属性 ， initial-scale 设置为 1rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可； 　　全局处理mate 标签中的 viewport 属性 ， initial-scale 设置为 0.5rem 按照设计稿标准⾛即可 　　meta 相关 　　了解更多参考：https://blog.csdn.net/kongjiea/article/details/17092413 　　div+css的布局较table布局有什么优点 　　改版的时候更⽅便 只要改 css ⽂件。⻚⾯加载速度更快、结构化清晰、⻚⾯显示简洁。表现与结构相分离。易于优化（ seo ）搜索引擎更友好，排名更容易靠前。 　　src与href的区别 　　src ⽤于替换当前素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等素当浏览器解析到该素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等素也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底部⽽不是头部href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加link href=https://zhuanlan.zhihu.com/p/”common.css” rel=”stylesheet” 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css ，⽽不是使⽤ @import ⽅式 　　CSS 篇 　　link 与 @import 的区别 　　link 是 HTML ⽅式， @import 是CSS⽅式link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现 FOUC (⽂档样式短暂失效)link 可以通过 rel=”alternate stylesheet” 指定候选样式浏览器对 link ⽀持早于 @import ，可以使⽤ @import 对⽼浏览器隐藏样式@import 必须在样式规则之前，可以在css⽂件中引⽤其他⽂件总体来说： link 优于 @import ，link优先级也更高 　　BFC 有什么用 　　创建规则： 根素 浮动素（ float 不取值为 none ） 绝对定位素（ position 取值为 absolute 或 fixed ） display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之⼀的素 overflow 不取值为 visible 的素作用 可以包含浮动素 不被浮动素覆盖 阻⽌⽗⼦素的 margin 折叠 　　清除浮动的⼏种⽅式 　　⽗级 div 定义 height结尾处加空 div 标签 clear:both⽗级 div 定义伪类 :after 和 zoom⽗级 div 定义 overflow:hidden⽗级 div 也浮动，需要定义宽度结尾处加 br 标签 clear:both 　　Css3 新增伪类 – 伪素 　　p:first-of-type 选择属于其⽗素的⾸个 <p> 素的每个 <p> 素。p:last-of-type 选择属于其⽗素的最后 <p> 素的每个 <p> 素。p:only-of-type 选择属于其⽗素唯⼀的 <p> 素的每个 <p> 素。p:only-child 选择属于其⽗素的唯⼀⼦素的每个 <p> 素。p:nth-child(2) 选择属于其⽗素的第⼆个⼦素的每个 <p> 素。:enabled 已启⽤的表单素。:disabled 已禁⽤的表单素。:checked 单选框或复选框被选中。::before 在素之前添加内容。::after 在素之后添加内容,也可以⽤来做清除浮动。::first-line 添加一个特殊的样式到文本的首字母。::first-letter 添加一行特殊样式到首行。 　　相信大家也看出来他们的不同，伪类语法一个：，它是为了弥补css常规类选择器的不足伪素语法两个：，它是凭空创建的一个虚拟容器生成的素 　　IE盒子模型 、W3C盒子模型 　　W3C盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )； box-sizing: content-box width = content width;IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去; box-sizing: border-box width = border + padding + content width 　　display:inline-block 什么时候不会显示间隙？ 　　移除空格使⽤ margin 负值使⽤ font-size:0letter-spacingword-spacing 　　⾏内素float:left后是否变为块级素？ 　　⾏内素设置成浮动之后变得更加像是 inline-block （⾏内块级素，设置 成这个属性的素会同时拥有⾏内和块级的特性，最明显的不同是它的默认宽 度不是 100% ），这时候给⾏内素设置 padding-top 和 padding-bottom 或者 width 、 height 都是有效果的 　　如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？ 　　多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为 1/60*1000ms ＝ 16.7ms 　　CSS不同选择器的权重(CSS层叠的规则) 　　！important 规则最重要，⼤于其它规则⾏内样式规则，加 1000对于选择器中给定的各个 ID 属性值，加 100对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10对于选择其中给定的各个素标签选择器，加1如果权值⼀样，则按照样式规则的先后顺序来应⽤，顺序靠后的覆盖靠前的规则 　　stylus/sass/less区别 　　均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性Sass 和 LESS 语法较为严谨， LESS 要求⼀定要使⽤⼤括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系Sass ⽆全局变量的概念， LESS 和 Stylus 有类似于其它语⾔的作⽤域概念Sass 是基于 Ruby 语⾔的，⽽ LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进⾏编译； 　　这也是为什么安装Sass的时候有时候会报错，需要安装python脚本 　　优点：就不用我多说了，谁用谁知道，真香。 　　rgba()和opacity的透明效果有什么不同？ 　　rgba() 和 opacity 都能实现透明效果，但最⼤的不同是 opacity 作⽤于素，以及素内的所有内容的透明度，⽽ rgba() 只作⽤于素的颜⾊或其背景⾊。（设置 rgba 透明的素的⼦素不会继承透明效果！） 　　⽔平居中的⽅法 　　素为⾏内素，设置⽗素 text-align:center如果素宽度固定，可以设置左右 margin 为 auto ;如果素为绝对定位，设置⽗素 position 为 relative ，素设left:0;right:0;margin:auto;使⽤ flex-box 布局，指定 justify-content 属性为centerdisplay 设置为 tabel-ceil 　　垂直居中的⽅法 　　将显示⽅式设置为表格， display:table-cell ,同时设置 vertial-align：middle使⽤ flex 布局，设置为 align-item：center绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto绝对定位中固定⾼度时设置 top:50%，margin-top 值为⾼度⼀半的负值⽂本垂直居中设置 line-height 为 height 值 　　浏览器 篇 　　浏览器内核的理解 　　主要分两个部分：渲染引擎、js引擎渲染引擎：负责取得网页的内容（html css img …），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同，所以渲染的效果也不一样js引擎：解析和执行javascript 来实现网页的动态效果最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只值渲染引擎IE : trident 内核Firefox ： gecko 内核Safari : webkit 内核Opera :以前是 presto 内核， Opera 现已改⽤Google – Chrome 的 Blink 内核Chrome:Blink (基于 webkit ，Google与Opera Software共同开发) 　　HTTP 请求+作用？ 　　Get 方法：发送一个请求来服务器资源POST 方法：向服务器提交数据PUT 方法：与POST方法很像，也是提交数据，但PUT制定了资源在服务器上的位置，常用在修改数据HEAD 方法：只请求页面的首部信息DELETE 方法：删除服务器上的资源OPTIONS 方法：用于当前URL支持的请求方式TRACE 方法：用于激活一个远程的应用层请求消息回路CONNECT 方法：把请求链接转换到透明的TCP/IP的通道 　　HTTP状态吗 　　1XX ：信息状态吗 100 continue 继续，⼀般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息2XX ：成功状态吗 200 ok 正常返回信息 201 created 请求成功并且服务器创建了新资源 202 accepted 服务器已经接收请求，但尚未处理3XX ：重定向 301 move per 请求的网页已经永久重定向 302 found 临时重定向 303 see other 临时重定向，且总是使用get请求新的url 304 not modified 自从上次请求后，请求的网页未修改过4XX ：客户端错误 400 bad request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求 401 unauthorized 请求未授权 403 forbidden 禁止访问 404 not found 找不到如何与url匹配的资源5XX ：服务器错误 500 internal server error 最常见的服务器端的错误 503 service unacailable 服务器端暂时无法处理请求（可能是过载或维护） 　　从浏览器地址栏输入URL后发生了什么？ 　　基础版本 　　1.的浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；2.服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；3.浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构（如 HTML 的 DOM ）；4.载⼊解析到的资源⽂件，渲染⻚⾯，完成。 　　详细版 　　1.从浏览器接收 url 到开启⽹络请求线程（这⼀部分可以展开浏览器的机制以及进程与线程之间的关系）2.开启⽹络线程到发出⼀个完整的 HTTP 请求（这⼀部分涉及到dns查询， TCP/IP 请求，五层因特⽹协议栈等知识）3.从服务器接收到请求到对应后台接收到请求（这⼀部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）4.后台和前台的 HTTP 交互（这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知识，可以提下静态资源的 cookie 优化，以及编码解码，如 gzip 压缩等）5.单独拎出来的缓存问题， HTTP 的缓存（这部分包括http缓存头部， ETag ， catchcontrol 等）6.浏览器接收到 HTTP 数据包后的解析流程（解析 html -词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成 render 树，然后 layout 、 painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等）7.CSS 的可视化格式模型（素的渲染规则，如包含块，控制框， BFC ， IFC 等概念）8.JS 引擎解析过程（ JS 的解释阶段，预处理阶段，执⾏阶段⽣成执⾏上下⽂， VO ，作⽤域链、回收机制等等）9.其它（可以拓展不同的知识模块，如跨域，web安全， hybrid 模式等等内容） 　　详细升级版 　　1.在浏览器地址栏输⼊URL2.浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤 2.1 如果资源未缓存，发起新请求 2.2 如果已缓存，检验是否⾜够新鲜，⾜够新鲜直接提供给客户端，否则与服务器进⾏验证。 2.3 检验新鲜通常有两个HTTP头进⾏控制 Expires 和 Cache-Control ： 2.3.1 HTTP1.0提供Expires，值为⼀个绝对时间表示缓存新鲜⽇期 2.3.2 HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最⼤新鲜时间3.浏览器解析URL协议，主机，端⼝，path4.浏览器组装⼀个HTTP（GET）请求报⽂5.浏览器主机ip地址，过程如下： 5.1 浏览器缓存 5.2 本机缓存 5.3 hosts文件 5.4 路由器缓存 5.5 ISP DNS缓存 5.6 DNS递归查询（可能存在负载均衡导致每次IP不一致）6.打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下： 6.1 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口 6.2 服务器发回SYN=1，ACK=x+1,Seq=Y的相应包 6.3 客户端发送ACK=Y+1，Seq=z7.TCP链接建立后发送HTTP请求8.服务器接收请求后解析，将请求转发到服务器程序，如虚拟主机使用HTTP Host头部判断请求的服务程序9.服务器检测HTTP请求头是否包含缓存验证信息，如果验证缓存新鲜，返回304等对应状态10.出合理程序读取完整请求并准备HTTP相应，可能需要查询数据库等操作11.服务器将相应报文通过TCP链接发送回浏览器12.浏览器接收HTTP相应，然后根据情况选择关闭TCP链接或者保留重用，关闭TCP链接的四次握手如下： 12.1 主动方发送Fin=1,ACK=z,Seq=x报文 12.2 被动方发送ACK=X+1,Seq=Y报文 12.3 被动方发送Fin=1,ACK=X,Seq=Y报文 12.4 主动方发送ACK=Y,Seq=x 报文13.浏览器检查相应状态码14.如果资源可缓存，进行缓存15.对相应进行解码16.根据资源类型决定如何处理17.解析HTML文档，构建DOM树，下载资源，构建CSSOM树，执行js脚本，这些操作每月严格的先后顺序18.构建DOM树： 18.1 Tokenizing：根据HTML规范将字符流解析为标记 18.2 Lexing：词法分析将标记转换为对象并定义属性和规则 18.3 DOM construction：根据HTML标记关系将对象组成DOM树19.解析过程中遇到图⽚、样式表、js⽂件，启动下载20.构建CSSOM树： 20.1 Tokenizing：字符流转换为标记流 20.2 Node：根据标记创建节点 20.3 CSSOM：节点创建CSSOM树根据DOM树和CSSOM树构建渲染树 21.1 从DOM树的根节点遍历所有可⻅节点，不可⻅节点包括：1） script , meta 这样本身不可⻅的标签。2)被css隐藏的节点，如 display: none 21.2 对每⼀个可⻅节点，找到恰当的CSSOM规则并应⽤ 21.3 发布可视节点的内容和计算样式22.js解析如下 22.1 浏览器创建Document对象并解析HTML，将解析到的素和⽂本节点添加到⽂档中，此时document.readystate为loading 22.2 HTML解析器遇到没有async和defer的script时，将他们添加到⽂档中，然后执⾏⾏内或外部脚本。这些脚本会同步执⾏，并且在脚本下载和执⾏时解析器会暂停。这样就可以⽤document.write()把⽂本插⼊到输⼊流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的⽂档内容 22.3 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析⽂档。脚本会在它下载完成后尽快执⾏，但是解析器不会停下来等它下载。异步脚本禁⽌使⽤document.write()，它们可以访问⾃⼰script和之前的⽂档素 22.4 当⽂档完成解析，document.readState变成interactive 22.5 所有defer脚本会按照在⽂档出现的顺序执⾏，延迟脚本能访问完整⽂档树，禁⽌使⽤document.write() 22.6 浏览器在Document对象上触发DOMContentLoaded事件 22.7 此时⽂档完全解析完成，浏览器可能还在等待如图⽚等内容加载，等这些内容完成载⼊并且所有异步脚本完成载⼊和执⾏，document.readState变为complete，window触发load事件23.显示⻚⾯（HTML解析过程中会逐步显示⻚⾯） 　　cookies ， sessionStorage 和 localStorage 的区别 　　cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端上的数据（通常经过加密）cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递（优化点）sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存存储⼤⼩： cookie 数据⼤⼩不能超过4k sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤有期时间： 　　localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据 　　sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除 　　cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭 　　浏览器缓存 　　浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，缓存的流程如下先根据这个资源的⼀些 http header 判断它是否命中强缓存，如果命中，则直接从本地缓存资源，不会发请求到服务器；当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另⼀些 request header验证这个资源是否命中协商缓存，称为 http 再验证，如果命中，服务器将请求返回，但不返回资源，⽽是告诉客户端直接从缓存中，客户端收到返回后就会从缓存中资源；强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源； 区别是，强缓存不对发送请求到服务器，但协商缓存会。当协商缓存也没命中时，服务器就会将资源发送回客户端。当 ctrl+f5 强制刷新⽹⻚时，直接从服务器加载，跳过强缓存和协商缓存；当 f5 刷新⽹⻚时，跳过强缓存，但是会检查协商缓存； 　　强缓存-协商缓存：这篇文章介绍挺细的：https://juejin.cn/post/6844903763665240072#heading-5 　　JS 篇 　　说⼏条写JavaScript的基本规范 　　不要在同⼀⾏声明多个变量请使⽤ ===/!== 来⽐较 true/false 或者数值使⽤对象字⾯量替代 new Array 这种形式不要使⽤全局函数Switch 语句必须带有 default 分⽀If 语句必须使⽤⼤括号for-in 循环中的变量 应该使⽤ let 关键字明确限定作⽤域，从⽽避免作⽤域污 　　绕不过去的闭包 　　闭包就是能够读取其他函数内部变量的函数闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤链域闭包的特性： 函数内再嵌套函数 内部函数可以引⽤外层的参数和变量 参数和变量不会被垃圾回收机制回收优点：能够实现封装和缓存等缺点：消耗内存、使用不当会内存溢出，解决⽅法：在退出函数之前，将不使⽤的局部变量全部删除 　　说说你对作⽤域链的理解 　　作⽤域链的作⽤是保证执⾏环境⾥有权访问的变量和函数是有序的，作⽤域链的变量只能 　　向上访问，变量访问到 window 对象即被终⽌，作⽤域链向下访问变量是不被允许的简单的说，作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可⻅性和 　　⽣命周期 　　JavaScript原型，原型链 ? 有什么特点？ 　　每个对象都会在其内部初始化⼀个属性，就是 prototype (原型)，当我们访问⼀个对象的属性时,如果这个对象内部不存在这个属性，那么他就会去 prototype ⾥找这个属性，这个prototype ⼜会有⾃⼰的 prototype ，于是就这样⼀直找下去，也就是我们平时所说的原型链的概念关系： instance.constructor.prototype = instance._proto_特点：JavaScript 对象是通过引⽤来传递的，我们创建的每个新对象实体中并没有⼀份属于⾃⼰的原型副本。当我们修改原型时，与之相关的对象也会继承这⼀改变当我们需要⼀个属性的时， Javascript 引擎会先看当前对象中是否有这个属性， 如果没有的,就会查找他的 Prototype 对象是否有这个属性，如此递推下去，⼀直检索到 Object 内 　　建对象 　　请解释什么是事件委托/事件代理 　　事件代理（ Event Delegation ），⼜称之为事件委托。是 JavaScript 中常⽤绑定事件的常⽤技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给⽗素，让⽗素担当事件监听的职务。事件代理的原理是DOM素的事件冒泡。使⽤事件代理的好处是可以提⾼性能可以⼤量节省内存占⽤，减少事件注册，⽐如在 table 上代理所有 td 的 click 事件就⾮常棒可以实现当新增⼦对象时⽆需再次对其绑定 　　Javascript如何实现继承？ 　　构造继承原型继承实例继承拷贝继承原型 prototype 机制或 apply 和 call ⽅法去实现较简单，建议使⽤构造函数与原型混合⽅式 　　谈谈This对象的理解 　　this 总是指向函数的直接调⽤者（⽽⾮间接调⽤者）如果有 new 关键字， this 指向 new 出来的那个对象在事件中， this 指向触发这个事件的对象，特殊的是， IE 中的 attachEvent 中的this 总是指向全局对象 Window 　　事件模型 　　W3C 中定义事件的发⽣经历三个阶段：捕获阶段（ capturing ）、⽬标阶段 （ targetin ）、冒泡阶段（ bubbling ）冒泡型事件：当你使⽤事件冒泡时，⼦级素先触发，⽗级素后触发捕获型事件：当你使⽤事件捕获时，⽗级素先触发，⼦级素后触发DOM 事件流：同时⽀持两种事件模型：捕获型事件和冒泡型事件阻⽌冒泡：在 W3c 中，使⽤ stopPropagation() ⽅法；在IE下设置 cancelBubble =true阻⽌捕获：阻⽌事件的默认⾏为，例如 click – a 后的跳转。在 W3c 中，使⽤preventDefault() ⽅法，在 IE 下设置 window.event.returnValue = false 　　new操作符具体⼲了什么呢? 　　创建⼀个空对象，并且 this 变量引⽤该对象，同时还继承了该函数的原型属性和⽅法被加⼊到 this 引⽤的对象中新创建的对象由 this 所引⽤，并且最后隐式的返回 this 　　Ajax原理 　　Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascript来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服务器获得请求数据Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是ajax的核⼼机制 　　如何解决跨域问题? 　　⾸先了解下浏览器的同源策略 同源策略 /SOP（Same origin policy） 是⼀种约定，由Netscape公司1995年引⼊浏览器，它是浏览器最核⼼也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS 、 CSFR 等攻击。所谓同源是指”协议+域名+端⼝”三者相同，即便两个不同的域名指向同⼀个ip地址，也⾮同源通过jsonp跨域 　　document.domain + iframe跨域 　　nginx代理跨域nodejs中间件代理跨域后端在头部信息⾥⾯设置安全域名 　　说说你对AMD和Commonjs的理解 　　CommonJS 是服务器端模块的规范， Node.js 采⽤了这个规范。 CommonJS 规范加载模 　　块是同步的，也就是说，只有加载完成，才能执⾏后⾯的操作。 AMD 规范则是⾮同步加载 模块，允许指定回调函数AMD 推荐的⻛格通过返回⼀个对象做为模块对象， CommonJS 的⻛格通过对 　　module.exports 或 exports 的属性赋值来达到暴露模块对象的⽬的 　　js的7种基本数据类型 　　Undefined 、 Null 、Boolean 、Number 、String 、Biginit 、Symbol 　　介绍js有哪些内置对象 　　Object 是 JavaScript 中所有对象的⽗对象数据封装类对象： Object 、 Array 、 Boolean 、 Number 和 String其他对象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error 　　JS有哪些⽅法定义对象 　　对象字⾯量： var obj = {};构造函数： var obj = new Object();Object.create(): var obj = Object.create(Object.prototype); 　　你觉得jQuery源码有哪些写的好的地⽅ 　　jquery 源码封装在⼀个匿名函数的⾃执⾏环境中，有助于防⽌变量的全局污染，然后通过传⼊ window 对象参数，可以使 window 对象作为局部变量使⽤，好处是当 jquery 中访问 window 对象的时候，就不⽤将作⽤域链退回到顶层作⽤域了，从⽽可以更快的访问window对象。同样，传⼊ undefined 参数，可以缩短查找 undefined 时的作⽤域链jquery 将⼀些原型属性和⽅法封装在了 jquery.prototype 中，为了缩短名称，⼜赋值给了 jquery.fn ，这是很形象的写法有⼀些数组或对象的⽅法经常能使⽤到， jQuery 将其保存为局部变量以提⾼访问速度jquery 实现的链式调⽤可以节约代码，所返回的都是同⼀个对象，可以提⾼代码效率 　　null，undefined 的区别 　　undefined 表示不存在这个值。undefined :是⼀个表示”⽆”的原始值或者说表示”缺少值”，就是此处应该有⼀个值，但是还没有定义。尝试读取时会返回 undefined例如变量被声明了，但没有赋值时，就等于 undefinednull 表示⼀个对象被定义了，值为“空值”null : 是⼀个对象(空对象, 没有任何属性和⽅法)例如作为函数的参数，表示该函数的参数不是对象；在验证 null 时，⼀定要使⽤ === ，因为 == ⽆法分别 null 和 undefined 　　谈谈你对ES6的理解 　　新增模板字符串（为 JavaScript 提供了简单的字符串插值功能）箭头函数for-of （⽤来遍历数据—例如数组中的值。）arguments 对象可被不定参数和默认参数完美代替。ES6 将promise 对象纳⼊规范，提供了原⽣的 Promise 对象。增加了 let 和 const 命令，⽤来声明变量。还有就是引⼊ module 模块的概念 　　更多ES新语法：阮一峰的ES入门：https://es6.ruanyifeng.com/#docs/style 　　⾯向对象编程思想 　　基本思想是使⽤对象，类，继承，封装等基本概念来进⾏程序设计易维护易扩展开发⼯作的重⽤性、继承性⾼，降低重复⼯作量。缩短了开发周期 　　如何通过JS判断⼀个数组 　　instanceof 运算符是⽤来测试⼀个对象是否在其原型链原型构造函数的属性 　　isArray 　　constructor 属性返回对创建此对象的数组函数的引⽤，就是返回对象相对应的构造函数 　　Object.prototype 　　异步编程的实现⽅式 　　回调函数 优点：简单、容易理解 缺点：不利于维护，代码耦合⾼事件监听(采⽤时间驱动模式，取决于某个事件是否发⽣) 优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数 缺点：事件驱动型，流程不够清晰发布/订阅(观察者模式) 类似于事件监听，但是可以通过‘消息中⼼ʼ，了解现在有多少发布者，多少订阅者Promise对象 优点：可以利⽤then⽅法，进⾏链式写法；可以书写错误时的回调函数； 缺点：编写和理解，相对⽐较难Generator函数 优点：函数体内外的数据交换、错误处理机制 缺点：流程管理不⽅便async函数 优点：内置执⾏器、更好的语义、更⼴的适⽤性、返回的是Promise、结构清晰。 缺点：错误处理机制 　　对原⽣Javascript了解方向 　　数据类型、运算、对象、Function、继承、闭包、作⽤域、原型链、事件、 RegExp 、JSON 、 Ajax 、 DOM 、 BOM 、内存泄漏、跨域、异步装载、模板引擎、前端MVC 、路由、模块化、 Canvas 、 ECMAScript 　　sort 快速打乱数组 　　数组去重操作 　　ES6 Setfor循环 indexOffor循环 includessort 　　详细操作前往：https://juejin.cn/post/6844904035619700750 　　JS 原生拖拽节点 　　给需要拖拽的节点绑定 mousedown , mousemove , mouseup 事件mousedown 事件触发后，开始拖拽mousemove 时，需要通过 event.clientX 和 clientY 拖拽位置，并实时更新位置mouseup 时，拖拽结束需要注意浏览器边界值，设置拖拽范围 　　深拷贝、浅拷贝 　　所有的基础数据类型的赋值操作都是深拷贝通常利用上面这点，来对引用数据类型做递归深拷贝浅拷贝：Object.assign 或者 扩展运算符深拷贝：JSON.parse(JSON.stringify(object)) 深层递归 局限性：会忽略 undefined，不能序列化函数，不能解决循环引⽤的对象 　　详细信息更多：https://juejin.cn/post/6906369563793817607 　　节流防抖 　　节流：每隔一段时间执行一次，通常用在高频率触发的地方，降低频率。–如：鼠标滑动 拖拽防抖：一段时间内连续触发，不执行，直到超出限定时间执行最后一次。–如：input 模糊搜索 　　更多节流、防抖，细节介绍：https://juejin.cn/post/6844903592898330638 　　变量提升 　　当执⾏ JS 代码时，会⽣成执⾏环境，只要代码不是写在函数中的，就是在全局执⾏环境中，函数中的代码会产⽣函数执⾏环境，只此两种执⾏环境 　　变量提升 这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于⼤家理解。但是更准确的解释应该是：在⽣成执⾏环境时，会有两个阶段。第⼀个阶段是创建的阶段，JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存⼊内存中，变量只声明并且赋值为 undefined ，所以在第⼆个阶段，也就是代码执⾏阶段，我们可以直接提前使⽤ 　　js单线程 　　单线程 – 只有⼀个线程，只能做⼀件事原因 – 避免 DOM 渲染的冲突 浏览器需要渲染 DOM JS 可以修改 DOM 结构 JS 执⾏的时候，浏览器 DOM 渲染会暂停 两段 JS 也不能同时执⾏（都修改 DOM 就冲突了） webworker ⽀持多线程，但是不能访问 DOM解决⽅案 – 异步 　　说说event loop 　　⾸先， js 是单线程的，主要的任务是处理⽤户的交互，⽽⽤户的交互⽆⾮就 是响应 DOM 的增删改，使⽤事件队列的形式，⼀次事件循环只处理⼀个事件 响应，使得脚本执⾏相对连续，所以有了事件队列，⽤来储存待执⾏的事件， 那么事件队列的事件从哪⾥被 push 进来的呢。那就是另外⼀个线程叫事件触 发线程做的事情了，他的作⽤主要是在定时触发器线程、异步 HTTP 请求线程 满⾜特定条件下的回调函数 push 到事件队列中，等待 js 引擎空闲的时候去 执⾏，当然js引擎执⾏过程中有优先级之分，⾸先js引擎在⼀次事件循环中， 会先执⾏js线程的主任务，然后会去查找是否有微任务 microtask（promise） ，如果有那就优先执⾏微任务，如果没有，在去查找 宏任务 macrotask（setTimeout、setInterval） 进⾏执⾏ 　　更详细的介绍前往：https://juejin.cn/post/6844903598573240327 　　描述下this 　　this ，函数执⾏的上下⽂，可以通过 apply ， call ， bind 改变 this 的指向。对于匿名函数或者直接调⽤的函数来说，this指向全局上下⽂（浏览 器为window，NodeJS为 global ），剩下的函数调⽤，那就是谁调⽤它， this 就指向谁。当然还有es6的箭头函数，箭头函数的指向取决于该箭头函 数声明的位置，在哪⾥声明， this 就指向哪⾥ 　　ajax、axios、fetch区别 　　ajax：本身是针对 MVC 的编程,不符合现在前端 MVVM 的浪潮基于原⽣的 XHR 开发， XHR 本身的架构不清晰，已经有了 fetch 的替代⽅案JQuery 整个项⽬太⼤，单纯使⽤ ajax 却要引⼊整个 JQuery ⾮常的不合理（采取个性化打包的⽅案⼜不能享受CDN服务） 　　axios：从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求⽀持 Promise API拦截请求和响应转换请求和响应数据取消请求⾃动转换 JSON 数据客户端⽀持防⽌ CSRF/XSRF 　　fetch：只对⽹络请求报错，对 400 ， 500 都当做成功的请求，需要封装去处理默认不会带 cookie ，需要添加配置项不⽀持 abort ，不⽀持超时控制，使⽤ setTimeout 及 Promise.reject 的实现的超时控制并不能阻⽌请求过程继续在后台运⾏，造成了量的浪费没有办法原⽣监测请求的进度，⽽XHR可以 　　优化 篇 　　SEO优化 　　合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减⼩， title值强调重点即可，重要关键词出现不要超过2次，⽽且要靠前，不同⻚⾯ title 要有所不同； description 把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同； keywords 列举出重要关键词即可语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解⽹⻚重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取重要内容不要⽤ js 输出：爬⾍不会执⾏js内容少⽤ iframe ：搜索引擎不会抓取 iframe 中的内容⾮装饰性图⽚必须加 alt提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标 　　server优化 　　减少HTTP请求，合并文件、雪碧图减少DNS查询，使用缓存减少Dom素的数量使用CDN配置ETag,http缓存的手段对组件使用Gzip压缩减少cookie的大小 　　css优化 　　将样式表放在页面顶部使用less scss表达式使用link 不适用@import引入样式压缩css禁⽌使⽤ gif 图⽚实现 loading 效果（降低 CPU 消耗，提升渲染性能）使⽤ CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）对于⼀些⼩图标，可以使⽤base64位编码，以减少⽹络请求。⻚⾯头部的 <style> <script> 会阻塞⻚⾯；（因为 Renderer进程中 JS 线程和渲染线程是互斥的）当需要设置的样式很多时设置 className ⽽不是直接操作 style 　　js方面 　　将脚本放到页面底部将js 外部引入压缩js使用Eslint语法检测减少Dom的操作熟练使用设计模式禁⽌使⽤ iframe （阻塞⽗⽂档 onload 事件）⻚⾯中空的 href 和 src 会阻塞⻚⾯其他资源的加载⽹⻚ gzip ， CDN 托管， data 缓存 ，图⽚服务器 　　webpack优化点 　　代码压缩插件 UglifyJsPlugin服务器启⽤gzip压缩按需加载资源⽂件 require.ensure优化 devtool 中的 source-map剥离 css ⽂件，单独打包去除不必要插件，通常就是开发环境与⽣产环境⽤同⼀套配置⽂件导致开发环境不做⽆意义的⼯作如提取 css 计算⽂件hash等配置 devtool优化构建时的搜索路径 指明需要构建⽬录及不需要构建⽬录 　　其他优化点 　　为什么利⽤多个域名来存储⽹站资源会更有效？CDN 缓存更⽅便突破浏览器并发限制节约 cookie 带宽节约主域名的连接数，优化⻚⾯响应速度防⽌不必要的安全问题 　　Other 篇 　　从⽤户刷新⽹⻚开始，⼀次js请求⼀般情况下有哪些地⽅会有缓存处理？ 　　dns 缓存cdn缓存浏览器缓存服务器缓存 　　常⻅web安全及防护原理 　　sql 注⼊原理：就是通过把 SQL 命令插⼊到 Web 表单递交或输⼊域名或⻚⾯请求的查询字符串，最终达到欺骗服务器执⾏恶意的SQL命令 永远不要信任⽤户的输⼊，要对⽤户的输⼊进⾏校验，可以通过正则表达式，或限制⻓度，对单引号和双 “-” 进⾏转换等 永远不要使⽤动态拼装SQL，可以使⽤参数化的 SQL 或者直接使⽤存储过程进⾏数据查询存取 永远不要使⽤管理员权限的数据库连接，为每个应⽤使⽤单独的权限有限的数据库连接 不要把机密信息明⽂存放，请加密或者 hash 掉密码和敏感的信息XSS防范⽅法：Xss(cross-site scripting) 攻击指的是攻击者往 Web ⻚⾯⾥插⼊恶意 html 标签或者 javascript 代码。⽐如：攻击者在论坛中放⼀个看似安全的链接，骗取⽤户后，窃取 cookie 中的⽤户私密信息；或者攻击者在论坛中加⼀个恶意表单，当⽤户提交表单的时候，却把信息传送到攻击者的服务器中，⽽不是⽤户原本以为的信任站点 ⾸先代码⾥对⽤户输⼊的地⽅和变量都需要仔细检查⻓度和对 ”<”,”>”,”;”,”’” 等字符做过滤；其次任何内容写到⻚⾯之前都必须加以encode，避免不⼩⼼把 html tag 弄出来。这⼀个层⾯做好，⾄少可以堵住超过⼀半的XSS 攻击XSS与CSRF有什么区别：XSS 是信息，不需要提前知道其他⽤户⻚⾯的代码和数据包。 CSRF 是代替⽤户完成指定的动作，需要知道其他⽤户⻚⾯的代码和数据包。要完成⼀次 CSRF 攻击，受害者必须依次完成两个步骤，1.登录受信任⽹站 A ，并在本地⽣成 Cookie 。2.在不登出 A 的情况下，访问危险⽹站 B 服务端的 CSRF ⽅式⽅法很多样，但总的思想都是⼀致的，就是在客户端⻚⾯增加伪随机数 通过验证码的⽅法 　　用过哪些设计模式 　　单例模式策略模式代理模式迭代器模式发布—订阅模式 　　更多设计模式15种：https://www.cnblogs.com/imwtr/p/9451129.html 　　Node的应⽤场景 　　特点 它是一个javascript运行环境 依赖于chrome V8 引擎进行代码解释 事件驱动 非阻塞 I/o 单进程，单线程优点 对于文件的读写处理效率极高 高并发（node最重要的优点）缺点 只⽀持单核 CPU ，不能充分利⽤ CPU 可靠性低，⼀旦代码某个环节崩溃，整个系统都崩溃 　　哪些操作会造成内存泄漏？ 　　内存泄漏指任何对象在您不再拥有或需要它之后仍然存在setTimeout 的第⼀个参数使⽤字符串⽽⾮函数的话，会引发内存泄漏闭包使⽤不当 　　谈谈你对webpack的看法 　　WebPack 是⼀个模块打包⼯具，你可以使⽤ WebPack 管理你的模块依赖，并编绎输出模块们所需的静态⽂件。它能够很好地管理、打包 Web 开发中所⽤到的 HTML 、 Javascript 、 CSS 以及各种静态⽂件（图⽚、字体等），让开发过程更加⾼效。对于不同类型的资源， webpack 有对应的模块加载器。 webpack 模块打包器会分析模块间的依赖关系，最后 ⽣成了优化且合并后的静态资源。 　　谈谈你对gulp的看法 　　gulp 是前端开发过程中⼀种基于流的代码构建⼯具，是⾃动化项⽬的构建利器；它不仅能对⽹站资源进⾏优化，⽽且在开发过程中很多重复的任务能够使⽤正确的⼯具⾃动完成gulp的核⼼概念：流流，简单来说就是建⽴在⾯向对象基础上的⼀种抽象的处理数据的⼯具。在流中，定义了⼀些处理数据的基本操作，如读取数据，写⼊数据等，程序员是对流进⾏所有操作的，⽽不⽤关⼼流的另⼀头数据的真正流向gulp正是通过流和代码优于配置的策略来尽量简化任务编写的⼯作Gulp的特点： 易于使⽤：通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理 构建快速 利⽤ Node.js 流的威⼒，你可以快速构建项⽬并减少频繁的 IO 操作 易于学习 通过最少的 API ，掌握 gulp 毫不费⼒，构建⼯作尽在掌握：如同⼀系列流管道 　　渐进增强和优雅降级 　　渐进增强 ：针对低版本浏览器进⾏构建⻚⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验。优雅降级 ：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容 　　谈⼀谈你理解的函数式编程 　　简单说，”函数式编程”是⼀种”编程范式”（programming paradigm），也就是如何编写程序的⽅法论它具有以下特性：闭包和⾼阶函数、惰性计算、递归、函数是”第⼀等公⺠”、只⽤”表达式” 　　想了解更多，移步这里：https://zhuanlan.zhihu.com/p/57708956 　　Vue的双向绑定数据的原理 　　vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调 　　写个简单Loader 　　loader 就是⼀个 node 模块，它输出了⼀个函数。当某种资源需要⽤这个 loader 转换时，这个函数会被调⽤。并且，这个函数可以通过提供给它的 this 上下⽂访问 Loader API 。 reverse-txt-loader 　　其他问题 　　⾃我介绍⾯试完你还有什么问题要问的吗你有什么爱好?你最⼤的优点和缺点是什么?你为什么会选择这个⾏业，职位?你觉得你适合从事这个岗位吗?你有什么职业规划?你对⼯资有什么要求?如何看待前端开发？未来三到五年的规划是怎样的？你的项⽬中技术难点是什么？遇到了什么问题？你是怎么解决的？你们部⻔的开发流程是怎样的你认为哪个项⽬做得最好？说下⼯作中你做过的⼀些性能优化处理最近在看哪些前端⽅⾯的书？平时是如何学习前端开发的？你最有成就感的⼀件事你为什么要离开前⼀家公司？你对加班的看法你希望通过这份⼯作获得什么？