20-66-完整面试总结

html

说一下< label>标签的用法

label标签主要是方便鼠标点击使用,扩大可点击的范围,增强用户操作体验

遍历A节点的父节点下的所有子节点

<script>
    var b=document.getElementById("a").parentNode.children;
    console.log(b)
</script>

css

CSS 选择符有哪些?

  • id选择器(#id)
  • 类选择器(.class)
  • 标签选择器(div,h1,p)
  • 相邻选择器(h1 + p)
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器( * )
  • 属性选择器(a[title])
  • 伪类选择器(a:hover,li:nth-child)

优先级算法如何计算?

  1. 优先级就近原则,同权重情况下样式定义最近者为准;
  2. 载入样式以最后载入的定位为准;
  3. !important > id > class > tag;
  4. important 比 内联优先级高,但内联比id要高;

引入样式link和@import的区别

  1. link是HTML标签,@import是css提供的
  2. link引入的样式页面加载时同时加载,@import引入的样式需等页面加载完后再加载
  3. link没有兼容性问题,@import不兼容ie5以下
  4. link可以通过js操作DOM动态引入样式表改变样式,而@import不可以

js中基本数据类型

五种简单数据类型:字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)。

一种复杂数据类型:obeject

三大引用类型:Object类型、Array类型、Function类型

calc, support, media各自的含义及用法?

  • @support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补。
  • calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算;
  • @media 查询,你可以针对不同的媒体类型定义不同的样式。

css水平、垂直居中的写法,请至少写出4种?

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中

设置line-height 等于height
position:absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

1rem、1em、1vh、1px各自代表的含义?

  • rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。
  • 子元素字体大小的em是相对于父元素字体大小。元素的width/height/padding/margin用em的话是相对于该元素的font-size
  • 全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于 屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的 话 vh 单位更好。
  • px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

画一条0.5px的直线?

height: 1px;
transform: scale(0.5);

说一下盒模型?

盒模型的组成,由里向外content,padding,border,margin.

在标准的盒子模型中,width指content部分的宽度
在新的盒子模型中,width表示content+padding+border这三个部分的宽度

box-sizing: content-box 是W3C 旧的盒子模型
box-sizing: border-box 是IE 新的盒子模型

box-sizing的默认属性是content-box

画一个三角形

 .a{
        width: 0;
        height: 0;
        border-width: 100px;
        border-style: solid;
        border-color: transparent #0099CC transparent transparent;
        transform: rotate(90deg); /*顺时针旋转90°*/
 }
 
<div class="a"></div>

清除浮动的几种方式,及原理?

  • ::after /
    / clear: both
  • 创建父级 BFC(overflow:hidden)
  • 父级设置高度

主要考察BFC,BFC (块级格式化上下文),是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。

触发条件:

根元素
position: absolute/fixed
display: inline-block / table
float 元素
ovevflow !== visible

js

用js递归的方式写1到100求和?

function add(num1,num2){
	var num = num1+num2;
        if(num2+1>100){
	 return num;
	}else{
	  return add(num,num2+1)
        }
 }
var sum =add(1,2);        

页面渲染html的过程?

1、浏览器解析html源码,会根据html源码生成DOM树。在DOM树中,每一个HTML标签都会对应一个节点,每一个文本也都会有一个对应的文本节点。DOM树的根节点是documentElement,对应的是html标签。

2、浏览器解析css代码,会根据优先级计算出最终的样式。浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。也会生成相对应的CSSOM树。 对CSS代码中非法的语法它会直接忽略掉。

3、html生成的树和css生成的树会结合成渲染树。渲染树和DOM树有点像,但是是有区别的。

DOM树完全和html标签一一对应,但是渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。而且渲染树的每一个节点都会存储对应的css属性。

4、一旦渲染树创建好了,浏览器会根据渲染树把页面渲染到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM树或者CSSOM树被修改,以上过程会被重复执行。实际上,CSS和JavaScript往往会多次修改DOM或者CSSOM。

说一下CORS?

资源跨域共享,CORS是一种新标准,支持同源通信,也支持跨域通信。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

如何中断ajax请求?

一种是设置超时时间让ajax自动断开,另一种是手动停止ajax请求,其核心是调用XML对象的abort方法,ajax.abort()

说一下闭包?

闭包的实质是因为函数嵌套而形成的作用域链

闭包的定义即:函数 A 内部有一个函数 B,函数 B 可以访问到函数 A 中的变量,那么函数 B 就是闭包。

说一下事件代理?

事件委托是指将事件绑定到目标元素的父元素上,利用冒泡机制触发该事件。

ulEl.addEventListener('click', function(e){
var target = event.target || event.srcElement;
if(!!target && target.nodeName.toUpperCase() === "LI"){
    console.log(target.innerHTML);
}

}, false);

说一下宏任务和微任务?

1、宏任务:当前调用栈中执行的任务称为宏任务。(主代码快,定时器等等)。
2、微任务: 当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务为微任务。(可以理解为回调事件,promise.then,proness.nextTick等等)。

target、currentTarget的区别?

currentTarget当前所绑定事件的元素

target当前被点击的元素

说一下继承的几种方式及优缺点?

1、借用构造函数继承,使用call或apply方法,将父对象的构造函数绑定在子对象上
2、原型继承,将子对象的prototype指向父对象的一个实例
3、组合继承

原型链继承的缺点

  • 字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数。

借用构造函数(类式继承)

  • 借用构造函数虽然解决了刚才两种问题,但没有原型,则复用无从谈起。

组合式继承

  • 组合式继承是比较常用的一种继承方法,其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性。

export和export default的区别?

使用上的不同

export default  xxx
import xxx from './'
默认只能导出一个,导出的是整个文件

export xxx
import {xxx} from './'
可以导出多个,导出的文件中的某个函数

什么是会话cookie,什么是持久cookie?

cookie是服务器返回的,指定了expire time(有效期)的是持久cookie,没有指定的是会话cookie

说一下自己常用的es6的功能?

像module、class、promise等,尽量讲的详细一点。

数组去重

自己的代码链接

js

var arr=['12','32','89','12','12','78','12','32'];
    // 最简单数组去重法
    function unique1(array){
        var n = []; //一个新的临时数组
        for(var i = 0; i < array.length; i++){ //遍历当前数组
            if (n.indexOf(array[i]) == -1)
                n.push(array[i]);
        }
        return n;
    }
    arr=unique1(arr);
    // 速度最快, 占空间最多(空间换时间)
    function unique2(array){
        var n = {}, r = [], type;
        for (var i = 0; i < array.length; i++) {
            type = typeof array[i];
            if (!n[array[i]]) {
                n[array[i]] = [type];
                r.push(array[i]);
            } else if (n[array[i]].indexOf(type) < 0) {
                n[array[i]].push(type);
                r.push(array[i]);
            }
        }
        return r;
    }
    //数组下标判断法
    function unique3(array){
        var n = [array[0]]; //结果数组
        for(var i = 1; i < array.length; i++) { //从第二项开始遍历
            if (array.indexOf(array[i]) == i) 
                n.push(array[i]);
        }
        return n;
    }

es6

es6方法数组去重
arr=[...new Set(arr)];
es6方法数组去重,第二种方法
function dedupe(array) {
  return Array.from(new Set(array));       //Array.from()能把set结构转换为数组
}

get、post的区别

  • get传参通过地址栏的URL传递,可以看到传递的参数,请求的数据在URL后通过?连接,通过&进行参数分割;post传递不可见,参数存放在HTTP的包体内。
  • get传递数据是通过URL进行传递,对传递的数据长度是受到URL大小的限制,URL最大长度是2048个字符。post没有长度限制。
  • get请求可以被缓存,post不可以被缓存
  • get请求的记录会留在历史记录中,post请求不会留在历史记录
  • get后退不会有影响,post后退会重新进行提交
  • get请求只URL编码,post支持多种编码方式

手写 call、apply、bind 方法

// call
Function.prototype.myCall = function () {
  context = context || window;
  let fn = Symbol();
  context[fn] = this;
  let args = [...arguments].slice(1);
  let ret = context[fn](...args);
  delete context[fn];
  return ret;
}

// apply
Function.prototype.myApply = function () {
  context = context || window;
  let fn = Symbol();
  context[fn] = this;
  let args = [...arguments][1] || [];
  let ret = context[fn](...args);
  delete context[fn];
  return ret;
}

// bind
Function.prototype.myBind = function (context) {
  context = context || window;
  let fn = this;
  let args = [...arguments].slice(1);
  return function () {
    let exeArgs = [...arguments]
    fn.apply(context, [...args, ...exeArgs])
  }
}

浏览器

http状态码

1xx:(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。

  • 100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。
  • 101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。

2xx (成功)表示成功处理了请求的状态代码。

  • 200:(成功)正确的请求返回正确的结果。 通常,这表示服务器提供了请求的网页。
  • 201 (已创建) 请求成功并且服务器创建了新的资源。
  • 202 (已接受) 服务器已接受请求,但尚未处理。

3xx((已重定向)) 表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

  • 300:请求成功,但结果有多种选择。
  • 301:请求成功,但是资源被永久转移。
  • 303:使用 GET 来访问新的地址来获取资源。
  • 304:请求的资源并没有被修改过

4xx(请求错误)

  • 400 (错误请求) 服务器不理解请求的语法。
  • 401 (未授权) 请求要求身份验证。请求的时候没有带上 Token 等。
  • 403 (禁止) 服务器拒绝请求。
  • 404 (未找到) 服务器找不到请求的网页。请求的内容不存在。

5xx(服务器错误)

  • 500: (服务器内部错误) 服务器遇到错误,无法完成请求。

web 性能优化

资源优化:预加载、懒加载、资源压缩(图片、字体、代码)、利用缓存、减少请求、代码优化(减少操作dom、减少全局变量)

怎么处理 CSRF、XSS 漏洞

CSRF跨站请求伪造。

攻击
用户登录 A 网站,并保留了登录凭证(cookie)
用户访问了 B 网站
B 网站向 A 网站发送一个请求,浏览器会默认携带 cookie
A 网站对请求进行验证,确认是用户的凭证
A 网站执行 B 网站的请求

防御
同源检测:通过 http 请求头中的origin或referer字段,确定请求的来源域名
添加 token
双重 cookie 验证

XSS跨站脚本攻击。
攻击:攻击者将恶意代码插入到页面中
防御:过滤敏感字段

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值