说下行内元素和块级元素的区别?行内块元素的兼容性使用? (多次问到)
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过期时间之前一直有效,即使窗口或浏览器关闭。
- 数据与服务器之间的交互方式,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 通讯的区别? (多次问到)
- Get 请求能缓存,Post 不能
- Post 相对 Get 安全一点点,因为Get 请求都包含在 URL 里,且会被浏览器保存历史纪录,Post 不会,但是在抓包的情况下都是一样的.
- Post 可以通过 request body来传输比 Get 更多的数据,Get 没有这个技术
- URL有长度限制,会影响 Get 请求,但是这个长度限制是浏览器规定的,不是 RFC 规定的
- Post 支持更多的编码类型且不对数据类型限制
promise 放在try catch里面有什么结果?
- Promise 对象的错误具有冒泡性质,会一直向后传递,直到被捕获为止,也即是说,错误总会被下一个catch语句捕获
- 当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直至被捕获
网站性能优化? (多次问到)
- 请求数量:合并脚本和样式表,CSS Sprites,拆分初始化负载,划分主域
- 请求带宽:开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体
- 缓存利用:使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,使AjaX可缓存
- 页面结构:将样式表放在顶部,将脚本放在底部,尽早刷新文档的输出
- 代码校验:避免CSS表达式,避免重定向
跨域问题,谁限制的跨域,怎么解决?
- 浏览器的同源策略导致了跨域
- 用于隔离潜在恶意文件的重要安全机制
- jsonp ,允许 script 加载第三方资源
- nginx 反向代理(nginx 服务内部配置 Access-Control-Allow-Origin *)
- cors 前后端协作设置请求头部,Access-Control-Allow-Origin 等头部信息
- iframe 嵌套通讯,postmessage
请解释一下 JavaScript 的同源策略?
同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
<img>标签上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