web前端面试题

说下行内元素和块级元素的区别？行内块元素的兼容性使用？ (多次问到)

1.行内元素与块级函数可以通过修改display属性值互转换，行内元素display：inline，块级元素display：block。
2.行内元素一条水平线上排列；块级元素会在新的一行排列，各个块级元素独占一行，垂直向下排列，可使用左右浮动（float：left/right）让其水平方向排列。
3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置margin、padding上下无效，左右有效；块级元素宽高、外边距，内填充都可随意控制。
4.块级元素包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
兼容性：display:inline-block;display:inline;zoom:1;

清除浮动有哪些方式？ (多次问到)

1.父级div定义height。
2.结尾处加空div标签clear:both。
3.父级div定义overflow:hidden。
4.父级div也浮动，需要定义宽度。

Doctype作用？标准模式与兼容模式各有什么区别?

1.告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2.标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

页面导入样式时，使用link和@import有什么区别？

1.link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3.import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

简述一下你对HTML语义化的理解？

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

请描述一下 cookies、sessionStorage和localstorage区别? (多次问到)

相同点：都存储在客户端

不同点：1.存储大小， cookie数据大小不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间，localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据， sessionStorage数据在当前浏览器窗口关闭后自动删除，cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

3. 数据与服务器之间的交互方式，cookie的数据会自动传递到服务器，服务器端也可以写cookie到客户端，sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

Javascript中的定时器有哪些？他们的区别及用法是什么？

setTimeout 只执行一次
setInterval 会一直重复执行

js有哪些内置对象？ (多次问到)

数据封装类对象：Object基础对象、Array数组、Boolean布尔对象、Number数值对象 和 String字符串对象
其他对象：Function函数构造器、Arguments函数参数集合、Math数学对象、Date日期和时间、RegExp正则表达式对象、Error异常对象.

this对象的理解?

this总是指向函数的直接调用者（而非间接调用者）；
如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

null和undefined的区别？ (多次问到)

null

• 作为函数的参数，表示该函数的参数不是对象。
• 作为对象原型链的终点。
• null转换为number的结果是0。

undefined

• 变量被声明了，但没有赋值时，就等于undefined。
• 调用函数时，应该提供的参数没有提供，该参数等于undefined。
• 对象没有赋值的属性，该属性的值为undefined。
• 函数没有返回值时，默认返回undefined。
• undefined转换为number的结果是NaN。

call()和apply()的区别和作用？

call，apply都属于Function.prototype的一个方法，每个Function对象实例(就是每个方法)都有call，apply属性,它们的作用一样，只是使用方式不同。
作用：call()方法和apply()方法的作用相同：改变this指向。
区别：apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。如：function.apply(this,[1,2,3]);
call()的第一个参数是上下文，后续是实例传入的参数序列。如：function.call(this,1,2,3);

css选择器有哪些，选择器的权重的优先级？

选择器：标签名选择器、类选择器、ID选择器、后代选择器(如divClass span)、群组选择器(如div,span,img)
选择器的优先级：直接在标签中的设置样式>ID选择器 >类选择器>标签选择器

http和 https有何区别？如何灵活使用？ (多次问到)

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

px和em的区别?

相同点：px和em都是长度单位
异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

get与post 通讯的区别? (多次问到)

1. Get 请求能缓存,Post 不能
2. Post 相对 Get 安全一点点,因为Get 请求都包含在 URL 里,且会被浏览器保存历史纪录,Post 不会,但是在抓包的情况下都是一样的.
3. Post 可以通过 request body来传输比 Get 更多的数据,Get 没有这个技术
4. URL有长度限制,会影响 Get 请求,但是这个长度限制是浏览器规定的,不是 RFC 规定的
5. Post 支持更多的编码类型且不对数据类型限制

promise 放在try catch里面有什么结果?

1. Promise 对象的错误具有冒泡性质,会一直向后传递,直到被捕获为止,也即是说,错误总会被下一个catch语句捕获
2. 当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直至被捕获

网站性能优化? (多次问到)

1. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
2. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
3. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
4. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
5. 代码校验：避免CSS表达式，避免重定向

跨域问题,谁限制的跨域,怎么解决?

1. 浏览器的同源策略导致了跨域
2. 用于隔离潜在恶意文件的重要安全机制
3. jsonp ,允许 script 加载第三方资源
4. nginx 反向代理(nginx 服务内部配置 Access-Control-Allow-Origin *)
5. cors 前后端协作设置请求头部,Access-Control-Allow-Origin 等头部信息
6. iframe 嵌套通讯,postmessage

请解释一下 JavaScript 的同源策略?

同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。

标签上title属性与alt属性的区别是什么？

alt属性是为图像的浏览者提供文字说明的。
title属性为设置该属性的元素提供建议性的信息。

v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

请详细说下你对vue生命周期的理解？ (多次问到)

• 创建前（beforeCreated）：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
• 创建后（created）：vue实例的数据对象data有了，但$el还是没有。
• 载入前（beforeMount）：vue实例的$el和data都初始化了，但是还挂载前的虚拟dom节点，data.message没有被替换。
• 载入后（mounted）：vue实例初始化完成，data.message成功渲染。
• 更新前（beforeUpdate）：当data发生变化时触发。
• 更新后（updated）：当data发生变化时触发。
• 销毁前（beforeDestroy）：组件销毁时触发。
• 销毁后（destroyed）：组件销毁时触发，对data的改变不会触发周期函数。vue实例解除事件监听和dom节点的绑定。但dom结构依旧存在

第一次页面加载会触发哪几个钩子？DOM 渲染在 哪个周期中就已经完成？

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
DOM 渲染在 mounted 中就已经完成了

vue-router是什么？它有哪些组件？

vue用来写路由一个插件。router-link、router-view

如何阻止事件冒泡和默认事件?

阻止冒泡:
现代浏览器:e.stopPropagation
低版本浏览器:e.cancelBubble=true
阻止默认事件:
现代浏览器:e.preventDefult()
低版本浏览器:return false