HTML+CSS
1.说一下css的盒模型
在HTML页面中的所有元素都可以看成是一个盒子
盒模型的组成:是由内容、内边距、边框、外边距组成的
盒模型的类型:
标准盒模型 margin +border+padding +content
IE盒模型 margin +content(border+ padding)
box-sizing:content-box(默认值,标准盒模型)、border-box(IE盒模型)
2.CSS选择器的优先级?
优先级:写css样式的时候,会给同一个元素添加多个样式,此时谁的权重大就显示谁的样式
从大到小:!important>行内样式>id>类/伪类/属性>标签>全局选择器
3.隐藏元素有那些?
3.1元素在页面中消失,不占据空间
display:none
3.2设置的样式的透明为0,元素不可见,占据空间位置
opacity(哦爬斯几) :0
让元素消失,占据空间位置,一种不可见的状态
visibility(v斯白了提):hidden
4.px和rem的区别是什么?
px是像素,显示器上给我们呈现画面的像素,每个像素的大小是一样的,绝对单位长度
rem,相对单位,相对于html根节点的font-size的值,直接给html节点的font-size:62.5%; 1rem=10px; (16px*62.5%=10px)
5重排和重绘有什么区别?
重排(回流)布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
重绘:计算好盒模型的位置、大小和其他一些属性之后,浏览器就会根据每个盒模型的特性进行绘制
浏览器的渲染机制
对DOM的大小、位置进行修改后,浏览器需要重新计算元素的这些几何属性,就叫重排
对DOM元素的样式进行修改,比如color和background-color,浏览器不需要重新计算几何属性的时候,直接绘制了该元素的新样式,那么这里就只触发了重绘
6.让一个元素水平垂直居中的方式有哪些?
1.定位+margin
2.定位+transform
3.flex布局
4.grid布局
5.table布局
7.CSS的那些属性可以继承?那些不可以继承?
CSS的三大特性:继承、层叠、优先级
子元素可以继承父类元素的样式
1.字体的一些属性:font
2.文本的一些属性:line-height
3.元素的可见性:visibility:hidden
4.表格布局的属性:border-spacing
5.列表的属性:list-style
6.页面样式属性:page
7.声音的样式属性
8.有没有用过预处理器?
预处理语言增加了变量、函数、等强大的功能
SASS LESS
javascript
1.JS由那三部分组成?
ECMAScript :JS核心内容 ,描述了语言的基础语法,比如var、for循环、数据类型(数组、字符串)
文档对象模型(Dom): Dom把整个HTML页面规划为元素构成文档
浏览器对象模型(Bom): 对浏览器窗口进行访问和操作
2.JS有哪些内置对象?
String Boolean Number Array Object Function Math Date RegExp
常用 Math: abs() sqrt() random() max() min
Date: new Date getFullYear() getMount() getHours()
Array: indexOf() Array.isArray() sort() splice() includes()
String: concat() length slice() split()
3.操作数组的方法有那些?
push() pop() sort() splice() unshift() shift() reverse() concat() join() map() filter() every() some() reduce() Array.isArray() findIndex()
那些方法会改变原数组
push() pop() unshift() shift() sort() reverse() splice()
4.对数据类型的检测方式有哪些
typeof()、instanceof()、constructor、Object.prototype.toString.call()
4.1typeof() 对于基本数据类型没问题,遇到引用数据类型就不管用
console.log(typeof 666) //number
console.log(typeof []) //object 明明是个数组
4.2instanceof() 只能判断引用数据类型,不能判断基本数据类型
console.log([] instanceof Arrat) //true
console.log('abc' instanceof String) //false //明明是字符串 所有不能判断基本数据类型
4.3constructor 几乎可以判断基本数据类型和引用数据类型,如果生命了一个构造函数,并把它的原型指向了Array
conlose.log(('abc').constructor===String) //true
4.4Object.prototype.toString.call()
var opt=Object.prototype.toString
console.log(opt.call(2)) // Number
console.log(opt.call(true)) //Boolean
console.log(opt.call('aaa')) // String
console.log(opt.call([])) //Array
5.说一下闭包,闭包有什么特点?
函数嵌套函数,·函数被外部函数返回并保存下来时,就会产生闭包
特点:可以重复利用变量,避免垃圾回收,可以用来保存一个需要持久保存的变量,
缺点: 闭包较多的时候,会增大消耗内存,在IE浏览器里面会导致内存泄漏
解决方法:防抖,节流,函数嵌套函数避免全局污染的时候
6.内存泄漏怎么理解?
JS里已经分配内存地址的对象,
.但是由于长时间没有释放或者没办法清除,造成长期占用内存的现象,会让内存资源大幅浪费,最终导致运行速度慢,甚至崩溃的情况。
因素:一些未声明直接赋值的变量:一些未清空的定时器;过度的闭包;一些引用元素没有被清除
7.事件委托是什么?
又叫事件代理,原理就是利用了事件冒泡机制来实现,也就是说把子元素的事件绑定到父元素的身上。
子元素阻止了事件冒泡,那么事件委托也就不成立
阻止事件冒泡:event.stopPropagation()
addEventListener('click',函数名,true/false) 默认是false(事件冒泡),true(事件捕获)
好处:提高性能,减少事件的绑定,也就减少了内存的占用
8.基本数据和引用数据类型的区别?
基本数据类型:String Number Boolean undefined null
基本数据类型保存在栈内存当中,保存的就是一个具体的值
引用数据类型(复杂数据类型): Object Function Array
引用数据类型是保存在堆内存中,声明一个引用数据类型的变量,它保存的是引用数据类型的地址
假如声明两个引用类型同时指向了一个地址的时候,修改其中一个那么另外一个也会改变
9.什么是原型,什么是原型链 ?
1、什么是原型?
原型prototype:这个属性对应着一个对象,这个对象就是原型对象。
2、什么是原型链?
当我们使用一个对象的属性或方法时,首先会在自身中寻找,
自身有,则直接使用;
自身没有则去原型对象中寻找,原型对象中有,则使用;
再没有则去原型的原型中寻找 ,这个过程就是原型链。
10.new操作符具体做了什么?
1.先创建一个空对象
2.把空对象和构造函数通过原型链进行链接
3.把构造函数的this绑定到新的空对象身上
4.根据构造函数返回的类型判断,如果是值类型,则返回对象,如果是引用类型,就要返回这个引用类型
11.JS是如何实现继承的?
1.原型链继承
2.借用构造函数继承
3.组合式继承
4.ES6的class类继承
12.Js的设计原理是什么?
同步:从头到尾 ,一行一行执行代码
异步:可以改变程序正常执行顺序(从头到尾)的操作就可以看成是异步操作。
13.Js中关于this指向的问题
1.全局对象中的this指向
指向的是window
2.全局作用域或者普通函数中的this
指向全局window
3.this永远指向最后调用它的那个对象
在不是箭头函数的情况下
4.new 关键词改变了this的指向
5. apply,call,bind
可以改变this指向,不是箭头函数
6.箭头函数中的this
它的指向在定义的时候就已经确定了
箭头函数它没有this,看外层是否有函数,有就是外层函数的this,没有就是window
7.匿名函数中的this
永远指向了window,匿名函数的执行环境具有全局性,因此this指向window
14.script标签里的async和defer有什么区别?
当没有async和defer这两个属性的时候,
浏览器会立刻加载并执行指定的脚本
有async
加载和渲染后面元素的过程将和script的加载和执行并行进行(异步)
有defer
加载和渲染后面元素的过程将和script的加载并行进行(异步),但是它的执行事件要等
所有元素解析完成之后才会执行
15.setTimeout最小执行时间是多少?
HTML5规定的内容:
setTimeout最小执行时间是4ms
setInterval最小执行时间是10ms
16.ES6和ES5有什么区别?
JS的组成:ECMAScript BOM DOM
ES5:全称(ECMAScript5),2009年ECMAScript的第五次修订,ECMAScript2009
ES6:全程(ECMAScript6),2015年ECMAScript的第六次修订,ECMAScript2015,是Js的下一个版本标准
17.ES6的新特性有哪些?
1.新增声明变量关键词(let const)
2.class类
3.解构赋值
4.扩展运算符
5.箭头函数
6.数组新增API
7.Promise封装
8.新增模块化(import,export)
9.新增set和map数据结构
18.call,aply,bind三者有什么区别?
都是改变this指向和函数的调用,call和apply的功能类似,只是传参的方法不同
call方法传的是一个参数列表
apply传递的是一个数组
bind传参后不会立刻执行,会返回一个改变了this指向的函数,这个函数还是可以传参的,bind()()
call方法的性能要比apply好一些,所以call用的更多一点
19.用递归的时候有没有遇到什么问题?
如果一个函数内可以调用函数本身,那么这个就是递归函数
函数内部调用自己
特别注意:写递归必须要有退出条件return
20.如何实现一个深拷贝?
深拷贝就是完全拷贝一份新的对象,会在堆内存中开辟新的空间,拷贝的对象被修改后,原对象不受影响
主要针对的是引用数据类型(以下就是改变深拷贝方法)
1.扩展运算符
2.JSON.parse(JSON.stringify())
3.利用递归函数实现
21.说一下事件循环
js是一个单线程的脚本语言
主线程 执行栈 任务队列 宏任务 微任务
主线程先执行同步任务,然后再去执行任务队列的任务,如果在宏任务之前有微任务,那么先执行微任务,全部执行完之后等待主线程调用,调用完之后再去任务队列查看是否有异步任务,这样一个循环的过程就是事件循环
22.ajax是什么?怎么实现的
再不重新加载整个页面的前提下,与服务器交换数据并更新部分内容
通过XmlHttpRequest对象向服务器发送异步请求,然后从服务器拿到数据,最后通过js操作DOM更新页面
1.创建XmlHttpRequest对象 xmh
2.通过xmh对象里的open()方法和服务器建立连接
3.构建请求所需的数据,并通过xmh对象的send()发送给服务器
4.通过xmh对象的onreadystate changes事件监听服务器和你的通信状态
5.接收并处理服务器响应的数据结果
6.把处理的数据更新到HTML页面上