整理知识 -- 阶段三

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预解析

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值