Q1: 页面布局
解决方案的优缺点:
1、浮动:脱离文档流,需要清除浮动。兼容性较好。
2、绝对定位:快捷。子元素脱离文档流,降低可使用性
3、flex布局:移动端使用较多。
4、表格布局:兼容性较好。
5、网格布局:新技术。
各种方案之间的比较,假如没有设置高度,哪个更适用:
flex布局和表格布局仍可以使用。
浮动的内容向左浮动时,被左侧的块遮挡。但是内容超出后,没有就会向左浮动。如果需要在中间块只在中间延伸,则需要创建BFC。
页面布局的变通:
Q2: CSS盒模型
设置这两种模型: 计算高度和宽度的不同。
box-sizing: border-box; //IE盒模型
box-sizing: content-box; //标准模型(浏览器默认方式)
1. dom.style.width/height
这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话,通过这种方法是获取不到dom的宽高的。
2. dom.currentStyle.width/height
这种方式获取的是在页面渲染完成后的结果,就是说不管是哪种方式设置的样式,都能获取到。
但这种方式只有IE浏览器支持。
3. window.getComputedStyle(dom).width/height
这种方式的原理和2是一样的,这个可以兼容更多的浏览器,通用性好一些。
4. dom.getBoundingClientRect().width/height
返回元素的大小及其相对于视口的位置
5.dom.offsetWidth/offsetHeight
最常用的,也是兼容最好的。
var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
//IE、Opera
alert(oAbc.currentStyle.width);
} else {
//FF、chrome、safari
alert(getComputedStyle(oAbc,false).width);
}
// 兼容性获取元素的渲染后的宽高
边距重叠: 1、父子元素(通过父元素设置 overflow:hidden;) 2、兄弟元素:取最大值 3、空元素设置上边距和下边距:取最大值
BFC(块级格式化上下文)原理:即渲染规则
1、 垂直方向上的边距会发生重叠;
2、 BFC的区域不会与浮动元素的box重叠(用来清除浮动);
3.、是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的;
4、 计算BFC高度时浮动元素也会参与计算;
创建BFC:
1、设置float
2、position值为绝对定位或fixed
3、display:inline-block,table-cell
4、overflow:hidden;/auto
BFC的使用场景:
1. 清除浮动
2.清除外边距
Q3:DOM事件
DOM事件级别:
事件模型:捕获、冒泡
事件流:事件通过捕获到达目标元素,再从目标元素冒泡到window对象
描述事件捕获的具体流程:从上到下。
如何用JS表示当前的html节点:
document.documentElement //返回html dom中的root 节点 即<html>, 页面存在DTD使用
document.body //返回html dom中的body节点 即<body>
兼容性解决方案:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
常见Event对象:
stopImmediatePropagation : 如果有多个相同类型事件的事件监听函数绑定到同一个元素,当该类型的事件触发时,它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation()
方法,则当前元素剩下的监听函数将不会被执行。
自定义事件:CustomEvent
CustomEvent 能够指定参数Obj
Q4: http协议
HTTP协议的主要特点:简单快速、灵活、无连接、无状态
HTTP报文的组成部分:
请求行:http方法、页面地址、http协议以及版本
请求头:key、value值
http方法:
POST和GET的区别:
状态码:
http持久链接: 1.1版本支持
管线化:
Q5:原型链
创建对象的三种方式:
// 第一种方式:字面量
var o1 = {name: 'o1'};
var o2 = new Object({name: 'o2'});
// 第二种方式:构造函数
var M = function (name) { this.name = name; };
var o3 = new M('o3');
// 第三种方式:Object.create
var p = {name: 'p'};
var o4 = Object.create(p);
构造函数的原型对象的constructor属性为本身。
M.prototype.constructor === M
//true
实例的__proto__属性指向构造函数的原型对象。
o3.__proto__ === M.prototype
//true
1.只有函数拥有prototype属性
2. 实例对象拥有__proto__
o3 instanceof M
//true
new一个新对象:
1. 创建一个空对象关联原型对象
2. 执行构造函数(指定上下文)
3. 判断运行结果,是对象类型则正确
var new2 = function (func) {
var o = Object.create(func.prototype);
var k = func.call(o);
if (typeof k === 'object') {
return k;
} else {
return o;
}
};
Q6:面向对象
javaScript中的继承有几种方式,各有什么优缺点:
1、构造函数实现继承(缺点: parent1的原型链上的属性方法并不会被继承)
function Parent1 () {
this.name = 'parent1';
}
function Child1 () {
Parent1.call(this);//子类中执行父类元素,并指定上下文。可以实现父类的属性挂载到子类中
this.type = 'child1';
}
console.log(new Child1());
// name:"parent1"
// type:"child1"
2、原型链实现继承(缺点: 原型链中的原型对象是共用的)
function Parent2 () {
this.name = 'parent2';
this.play = [1, 2, 3];
}
function Child2 () {
this.type = 'child2';
}
Child2.prototype = new Parent2();
3. 组合方式实现继承 (缺点:子类的constructor就是父类的constructor)
function Parent4 () {
this.name = 'parent4';
this.play = [1, 2, 3];
}
function Child4 () {
Parent4.call(this);
this.type = 'child4';
}
//Child4.prototype = new Parent4()
Child4.prototype = Parent4.prototype; //继承父类的原型对象
4.优化组合方式:
function Parent5 () {
this.name = 'parent4';
this.play = [1, 2, 3];
}
function Child5 () {
Parent5.call(this);
this.type = 'child4';
}
Child5.prototype = Object.create(Parent5.prototype); //通过创建中间对象将原型对象分隔开
Child5.prototype.construct = Child5
Q7:通信类
同源策略:协议、域名、端口(默认80)
实现跨域通信:
JSONP:网页中动态插入script
标签,向服务端请求数据;服务端会解析请求的url
,至少拿到一个回调函数(比如callback=myCallback
)参数,之后将数据放入其中返回给客户端。
Hash:(#后面的内容)改变页面不更新。
h5新增加:postMessage
WebScoket:不受同源策略影响
CORS:通过设置HTTP请求和返回中header,告知浏览器该请求是合法的。这涉及到服务器端和浏览器端双方的设置:请求的发起(Http Request Header)和服务器对请求正确的响应(Http response header)。
Q8: 前端相关的安全问题
CSRF XSS
必要条件: 1.网站接口存在漏洞 2.在网站登录过
原理:不需要登录认证,在页面中注入脚本。
Q9:渲染机制
DOCTYPE:声明文档类型和DTD规范。 作用:文件合法性验证。
浏览器将HTML、CSS分别解析成树形的数据结构,合并后生成Render Tree,然后在页面中显示。
Q9:页面性能
meta:强制打开a标签的DNS预解析