一、html
-
HTML语义化是指从代码上展示页面的结构,而不是从最终视觉上来表现结构
-
HTML5新加的标签:header、footer、asid、nav、section、article、caption、thead、tbody、tfoot、h1~h6(重要性递减)
-
盒子模型: IE盒子模型: 宽度 = border2+content+padding2
标准盒子模型: 宽度 = content -
水平垂直居中(高频)
// 方法一:flex布局
display: flex;
justify-content: centent;
align-items: centent;
// 方法二:table布局
display: table;
vertical-align: centent;
// 方法三:已知元素宽高
position: absolute;
width:100px;
height: 100px;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
// 方法四:未知元素宽高
position:absolute;
top:50%;
left: 50%;
transform: translateY(-50%) stanslateX(-50%)
// 方法五:行内元素
display:inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
// 方法六: 块元素
display:block;
width:100px;
height: 100px;
margin: 0 auto;
line-height: 100px;
- 重排(回流)&重绘
重排就是页面的元素尺寸、结构或者某些属性发生变化时,浏览器重新渲染部分或全部页面的情况
重绘就是页面元素颜色等不会改变它在文档流的位置的变化
频繁的重排和重绘会引起性能问题
避免方法:
1.减少table布局的使用
2.将元素设为display:none;因为这个属性不会引发重排或重绘
3.减少DOM操作
4.对复杂的动画元素使用绝对定位,使它脱离文档流
5.减少使用行内样式
重排一定会引起重绘,重绘不一定会引起重排 - 清除浮动的方法
1.给要清楚浮动的元素增加样式clear
2.给该元素的父元素的结束标签前加入一个清除浮动的块级元素
3.给该元素的父元素的结束标签前加入一个清楚浮动的伪元素
4.父元素添加overflow:hidden样式清除浮动
二、css
- 引入css样式link和@import的区别
link是css的属性,会在页面加载时加载css,而@import是js的属性,会在页面加载完之后加载css - css3新特性
1.css3的新选择器
E:nth-child(n) 选择器匹配其父元素的第n个子元素,不论元素类型,n可以使数字,关键字,或公式
E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素
E:frist-child 相对于父级做参考,“所有”子元素的第一个子元素,并且“位置”要对应
E:frist-of-type 相对于父级做参考,“特定类型”(E)的第一个子元素
E:empty 选择没有子元素的每个E元素
E:target 选择当前活动的E元素
::selection 选择被用户选取的元素部分
属性选择器
E[abc*=“def”] 选择adc属性值中包含子串"def"的所有元素
2.文本
text-shadow:2px 2px 8px #000;参数1为向右的偏移量,参数2为向左的偏移量,参数3为渐变的像素,参数4为渐变的颜色
text-overflow:规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)
text-wrap:规定文本换行的规则
word-break 规定非中日韩文本的换行规则
word-wrap:对长的不可分割的单词进行分割并换行到下一行
white-space:规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行
3.边框
border-raduis 边框的圆角
border-image 边框图片
.border-image {
border-image-source:url(images/border.png);
boder-image-slice:27;
border-image-width:10px;
border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角,只适应与四边
}
4.背景
rgba
backgrounnd-size:cover/contain,其中background-size:cover,会使“最大”边进行缩放,另一边同比缩放,铺满容器,超出部分会溢出。background-size:contain,会使“最小”边进行缩放,另一边同比缩放,不一定铺满容器,会完整显示图片
5.渐变
linear-gradient
background-image:linear-gradient(90deg,yellow 20%,green 80%)
radial-gradient
background-iamge:radial-gradient(120px at center center,yellow,green)
6.多列布局
column-count
column-width
column-gap
column-rule
7.过渡
transition
transition-property:width //property为定义过渡的css属性列表,列表以逗号分隔
transition-duration:2s; //过渡持续的时间
transition-timing-function:ease;
transition-delay:5s //过渡延迟5s进行
8.动画、旋转
animation
transform :translate(x,y) rotate(deg) scale(x,y)
translate
scale
rotate
skew(倾斜)
9.flex布局
10.@media媒体查询 - 选择器的优先级:
!important > ID选择器 > 类选择器 > 标签选择器
三、js
-
数据类型:
1.基本数据类型:boolean、string、number、undefined、null、symbol(ES6新增)
2.引用数据类型:Object(function、array、data) -
setTimeout、setInterval:
setTimeout:在设定时间后只执行一次
setinterval:在设定时间后可重复执行,属于重复定时器 -
判断数据类型
1.typeof():对于引用类型只能判断出是Object
2.instanceof()
3.object.prototype.tostring.call() -
防抖、节流
防抖:在持续触发事件中,如若触发则重新计时,在一段时间后没有再触发则调用一次
节流:在设定的时间段内不管触发事件多少次,都只调用一次 -
深浅拷贝
浅拷贝:只复制了值,但是对象在堆的地址还是指向原对象的地址,所以新对象改变原对象也会随着改变
深拷贝:新对象重新在堆开辟了一个地址,新对象改变不影响原对象
深拷贝实现:
// 方法一
JSON.parse(JSON.stringify(Object));
// 方法二(当只有一层对象)
Object.assign(newObject,oldObject)
// 方法三(有多层对象使用递归)
// 定义一个深拷贝函数 接收目标target参数
function deepClone(target) {
let result;
// 如果当前需要深拷贝的是一个对象的话
if (typeof target === 'object') {
// 如果是一个数组的话
if (Array.isArray(target)) {
result = []; // 将result赋值为一个数组,并且执行遍历
for (let i in target) {
// 递归克隆数组中的每一项
result.push(deepClone(target[i]))
}
// 判断如果当前的值是null的话;直接赋值为null
} else if(target===null) {
result = null;
// 判断如果当前的值是一个RegExp对象的话,直接赋值
} else if(target.constructor===RegExp){
result = target;
}else {
// 否则是普通对象,直接for in循环,递归赋值对象的所有值
result = {};
for (let i in target) {
result[i] = deepClone(target[i]);
}
}
// 如果不是对象的话,就是基本数据类型,那么直接赋值
} else {
result = target;
}
// 返回最终结果
return result;
}
- 原型
每个对象都有原型(proto)属性,而函数特有prototype属性,prototype的所有方法和属性都会被构造函数的实例继承,所以公用的方法可以写到prototype对象属性上。 - 原型链
每个对象都有proto属性,而proto属性也是个对象,所以它也有proto属性,因此当访问一个属性或方法时,它会沿着proto层层往上找 - es6新特性:
1.promise
promise是一个处理异步任务的对象,它的主体是同步的,对象和函数的区别就是对象可以保存状态。它有三种状态:pending、resolve、reject
2.箭头函数:this指向父级
3.解构:从数组或对象取值并赋值给独特的变量
4.新增基本类型:symbol
5.map、set结构:map相当于对象,是key、value结构,value可以为任意结构;set相当于数组,但其里面的值不可重复,
6.apply()、bind()、call():call(对象,数据列表)、apply(对象,数组)、bind(对象,数据列表),bind()返回函数,所以call()、apply()是立即生效的,而bind()是延迟生效的
7.let、const:不存在变量提升,const定义常量后不可修改
8.模板字符串:用倒引号连接字符串
9.for…of…循环:无需使用索引 - this:绑定函数的执行上下文,谁调用它,它就指向谁
严格模式下this指向undefined;非严格模式下this指向window;箭头函数的this指向它的上级作用域 - 给字符串扩展方法,在原型链prototype上增加相应的方法
四、Vue全家桶
1.vue
- 数据的双向绑定:通过数据劫持结合发布-订阅者模式实现,数据劫持是用过Object.defineProperty()设置数据的的setter()、getter()方法实现的
- 插槽slot
- Vue的生命周期
beforeCreate(初始化界面前)
created(初始化界面后,拿到data,props,methods,computer,watch)
beforeMount(渲染DOM前)
mounted(渲染DOM后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(卸载组件前)
destroy(卸载组件后) - 父子组件通信
父传子:prop
子传父:$emit
同级:eventbus、vuex - 对于MVVM的理解:
model:是数据模型,定义业务逻辑
viewmodel:将数据模型和UI组件连接起来,不需要手动操作DOM,只要关业务逻辑处理
view:代表UI组件 - 第一个页面加载会触发那些钩子:beforeCreate、created、beforeMount、mounted
- 新增已定义且绑定的属性时,需要使用.$set(绑定对象,新增属性,属性值)新增
- keep-alive
2.vueX
1.页面上调用action的方法,促使mutations去改变state中的数据
2.vuex文件的结构:mouldle/store/state/getter/mutation/action/
mutation只能写同步方法,异步方法写在action里
2.vue-router
- router和route的区别
router为vue-router的实例
route是正在跳转的路由对象,里面有ame,path,params,query等属性 - hash模式和history模式:
1.hash模式:#号及后面的字符称之为hash,请求时不会随着URL请求到服务器
2.history模式:有pushState()、replaceState()两个可对浏览器历史记录栈进行修改的方法,还有popStete()属性可监听事件的状态变更 - 路由传参
// 方法一:
// vue:
$router.push({'path:/url/${id}'})
// router
{
path: '/url/:id',
name: url,
component: url
}
// 使用
this.$route.params.id
// 方法二:
// vue:
$router.push({
name: url,
params: {
id: id
}
})
// router
{
path: '/url/:id',
name: url,
component: url
}
// 使用
this.$route.params.id
// 方法三:
// vue
$router.push({
path: '/url',
query: {
id: id
}
})
// router
{
path: '/url',
name: url,
component: url
}
// 使用:
this.$route.query.id
五、浏览器
- 兼容性问题
1.不同浏览器默认的内外补丁不同:设置* {margin:0;padding:0;}
2.ie6元素设置了float又设置了margin后会出现双边距:设置display:inline
3.ie6、ie7当标签高度小于10px时,显示的高度会超出设置的高度:设置overflow: hidden;或设置line-height小于设置的高度
4.图片之间默认有间距:使用float给图片布局 - 事件循环机制(event loop)
同步任务在主线程执行,在主线程之外还有个任务队列用于存放异步任务;当主线程的任务执行完之后,异步任务进入主线程执行;异步任务又分宏任务和微任务;会先执行微任务后执行宏任务;
宏任务:script、定时器setTimeout、setinterval
微任务:promise的then属性里的方法、perocess.nextTick()、mutationObserver
// 示例:
console.log('script start');
setTimeout(function() {
console.log('settimeout');
}, 10);
new Promise(resolve => {
console.log('promise1');
resolve();
}).then(function() {
console.log('then1')
})
console.log('script end');
// 最终打印
script start
promise1
script end
then1
settimeout
- http
1.http请求由什么组成:请求行、请求头、请求体
1.从请求到页面出来发生了什么
在浏览器的地址栏中敲入了url -> 域名解析 -> 服务器处理请求 -> 浏览器处理 -> 绘制网页 - 客户端缓存(cookie、sessionStorage、localstorage)
cookie: 服务器生成的数据,需要随请求发送到服务器,有数据大小限制,可设置存在的时长
sessionStorage:客户端生成的数据,保存在客户端,无需随请求发送到服务器,浏览器关闭则失效(刷新页面不会失效)
localStorage:客户端生成的数据,保存在客户端,无需随请求发送到服务器,永久保存,也可设置失效时间 - 内存泄露
怎么会导致内存泄露:
1.局部变量会在函数调用完后销毁,但全局变量会保存到浏览器页面关闭之前,所以
过多使用全局变量也会导致内存泄露
2.闭包
3.没有清理的DOM元素引用
4.未清除的定时器
怎样避免内存泄露
1.减少不必要的全局变量,或者生命周期较长的对象,及时对无用的数据进行垃圾回收;
2.注意程序逻辑,避免“死循环”之类的 ;
3.避免创建过多的对象 原则:不用了的东西要及时归还。 - 浏览器内核:
Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]
Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]
六、webpack
七、跨域
概念:因浏览器的同源策略,当请求路径的域名、协议、端口号三者有不同的话则不允许资源共享
解决方法:
- 使用nginx在nginx.conf文件里配置反向代理
- 在后端通过webserver向第三方请求服务,提供本地前端接口
- 使用jsonp(只支持get请求和http请求)
- document.domain + iframe
- 动态创建script
- Vue-cli2.0在config文件夹下的index.js文件里更改跨域配置
proxyTable: {
'/api': { // 请求的代称,写在Axios里的BaseUrl
target: 'http://localhost:8083', // 真实请求URl
changeOrigin: true, // 允许跨域
pathRewrite: { // 替换,通配/api的替换成/
'^/api': '/'
}
}
- Vue-cli3.0在根目录下创建vue.config.js文件配置跨域
八、ajax
- 手写ajax请求
/*
创建 XMLHttpRequest 对象 ;XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
*/
// var xhr = new XMLHttpRequest();
var xhr = null;
// 检查浏览器是否支持 XMLHttpRequest 对象
if(window.XMLHttpRequest){
// 若支持则创建 XMLHttpRequest 对象
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr = new XMLHttpRequest();
}else {
// 若不支持创建 ActiveXObject
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 设置请求行,向服务器发送请求;用于说明XMLHttpRequest对象要从哪里获取数据.通常可以是网站中的数据,也可以是本地中其他文件中的数据。
// open(method,url,async);规定请求的类型、URL 以及是否异步处理请求。
// method:请求的类型;GET 或 POST;
// url:文件在服务器上的位置;
// async:true(异步)或 false(同步)
xhr.open('GET','http://ajax.com/phpFile/time.php',true);
// post 请求需要设置请求头
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 设置请求体;
// send(string); 将请求发送到服务器。string:仅用于 POST 请求
xhr.send(null); // get请求参数可不填或置空
/* 设置响应HTTP请求状态变化的函数 */
// onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
xhr.onreadystatechange = function(){
// 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
// 0: 请求未初始化,1: 服务器连接已建立,2: 请求已接收,3: 请求处理中,4: 请求已完成,且响应已就绪
// console.log(this.readyState);
if(this.readyState != 4) return;
// 获得来自服务器,字符串形式的响应数据。
console.log(this.responseText);
}
- 怎么中断ajax请求:
1.设置超时时间,让ajax自动断开
2.手动调用xmlhttpRequest对象的abort方法中断请求
九、性能优化
- 静态资源合并压缩
- 静态资源缓存(浏览器缓存)
- css放head中,js放body后
- 图片懒加载
- 减少对DOM的操作
- 事件节流
- 减少使用闭包、递归
- 避免死循环
十、趣味题
1.五个人中只有一个人说真话,其他四个时真时假,但有个规律,四个人第一句为假话时第二句则一定为真话,反之第一句为真话时第二句则为假话,问:只问两句话(可问同一个人也可问不同人),怎么找出那个说真话的人
2.一家五口人,要过一座桥,只有一盏灯(30秒熄灭)一次只能过两个人,五人分别过桥需要的时间为1S、3S、6S、8S、12S,请问怎么过桥才能30秒内全部通过