-----------------------------------------html css--------------------------------------------
一.回流与重绘
回流一定引起重绘，重绘不一定回流
1.浏览器渲染机制
1）浏览器采用流式布局。
2）浏览器将html解析成DOM，css解析成CSSOM，再把二者结合生render tree 渲染树（带了结构和样式）。
3）render tree 知道节点样式后，把节点绘制到页面。
2. 回流
含义：当render tree中某些元素尺寸变化，浏览器会重新渲染部分或全部文档。
何时会回流：
1）首次渲染
2）窗口大小变化
3）内容变化
4）添加删除节点
5）激活css伪类
3 .重绘
含义：当页面中元素样式改变不影响它在文档流中的位置，浏览器会将新样式赋予给元素。
如：background
4.性能影响
总结：回流性能消耗大
5.避免性能影响
css：
避免使用table
避免多层内联样式
js：
避免频繁操作DOM
三.标签属性
lang属性：用于指定元素内容的语言
dir属性：用于指定元素中内容的文本方向，属性只有ltr或rtl两种
accesskey属性：用于指定激活元素的快捷键
tabindex属性：用于指定元素在tab键下的次序
四.事件属性
window窗口事件，onload，在网页加载结束之后触发，onunload，在用户从网页离开时发生（点击跳转，页面重载，关闭浏览器窗口等）form表单事件，onblur，当元素失去焦点时触发，onchange，在元素的值被改变时触发，onfocus，当元素获得焦点时触发，onreset，当表单中的重置按钮被点击时触发，onselect，在元素中文本被选中后触发，onsubmit，在提交表单时触发keyboard键盘事件，onkeydown，在用户按下按键时触发，onkeypress，在用户按下按键后，按着按键时触发。该属性不会对所有按键生效，不生效的有，alt,ctrl,shift,escmouse鼠标事件，onclick，当在元素上发生鼠标点击时触发，onblclick，当在元素上发生鼠标双击时触发，onmousedown，当元素上按下鼠标按钮时触发，onmousemove，当鼠标指针移动到元素上时触发，onmouseout，当元素指针移出元素时触发，onmouseup，当元素上释放鼠标按钮时触发。- .
Media媒体事件，onabort，当退出时触发，onwaiting，当媒体已停止播放但打算继续播放时触发。
五.文本标签
- 强调语句标签，
<em></em>，用于强调某些文字的重要性 - 更加强调标签，
<strong></strong>和<em>标签一样，用于强调文本，但它强调的程度更强一些 - 无语义标签
<span></span>，标签是没有语义的 - 短文本引用标签
<q></q>，简短文字的引用 - 长文本引用标签
<blockquote></blockquote>，定义长的文本引用 - 换行标签
<br/>
有序列表，ol,li 属性 start从第几个开始 type 类型有a A 1… reversed 反转
表格合并，同一行内，合并几列colspan="2"，同一列内，合并几行rowspan="3"
- 表单标签
<form>
<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
action，浏览者输入的数据被传送到的地方
method，数据传送的方式 - 输入标签
<input/>
name：为文本框命名，用于提交表单，后台接收数据用。
value：为文本输入框设置默认值。
type：通过定义不同的type类型，input的功能有所不同。
1、HTML5的新特性？
- 1、语义化标签，比如header、footer、nav导航、aside侧边栏、article、section time定义时间
- 2、音视频，比如audio、video
- 3、画布canvas、矢量图svg
- 3、画布，canvas的api有getContext、fillStyle、fillRect等
- 4、本地存储localStorage、sessionStorage
- 5、web worker
meta 元数据 作者 语言。。
六 .CSS
-
CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。 -
不可继承样式：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear -
可以继承的样式：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor
圣杯布局 优先加载中间的主元素 把第二个padding-200px移除页面 再给父元素-100px 扩大父元素
七.选择器的优先级
5. 当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。
-
通过测算那个选择器的权重值最高，应用哪一个选择器的样式
-
权重计算方式:
标签选择器：1
class选择器：10
id选择器：100
行内样式：1000
- ~兄弟选择器
!important 最高级别，提高样式权重，拥有最高级别
八.背景样式
-
背景颜色
background-color -
背景图片
background-image
background-image:url(bg01.jpg); -
背景图片位置
background-position
background-position:10px 100px;
// 代表坐标x，y轴 -
背景图片重复
background-repeat
background-repeat:no-repeat
// no-repeat 设置图像不重复，常用
// round 自动缩放直到适应并填充满整个容器
// space 以相同的间距平铺且填充满整个容器 -
背景图片定位
background-attachment
background-attachment:fixed
// 背景图像是否固定或者随着页面的其余部分滚动
// background-attachment的值可以是scroll（跟随滚动），fixed（固定）
padding撑起高:200% 即宽度两倍 margin不行
伪类伪元素
伪元素 调试时文档上找不到
：：before after selection文字的选中
伪元素有六个，分别是::after、::before、::first-line、::first-letter、::selection、::backdrop。
css伪类有：“:link”、“:visited”、“:hover”、“:active”、“:focus”、“:lang()”、“not()”、“:root”、“:first-child”、“:last-child”、“:empty”等等
溢出隐藏 overflow
设置当对象的内容超过其指定高度及宽度时如何显示内容
visible 默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
解决 margin 塌陷问题的方法
同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分
父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开，更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来
浮动导致塌陷
在下面父级元素加个div 设置clear both 不给高度
或者给父元素加个伪类 ：：after {
content="";
display:block;
width:0;
height:0;
clear:both;}
或者写一个样式 。clearfix：：after 谁需要清除 加到class里
或者 用overflow hidden 出发bfc规则
data url 图片小于多少时 打包成base64编码
preload加载优先级高的资源
prefetch空闲时加载
禁止复制
user-select none
oncopy事件禁用
取消请求
abortcontrol
---------------------------------------------js------------------------------------------------
一.JavaScript判断类型的方式是什么？
1.如何判断一个变量是数组 instanceof = true
2.typeof：只能判断 字符串、布尔值、数值、undefined、function、object、symbol、bigInt，不能区分判断 数组、null、对象
3.A instanceof B：判断A是否为B的实例对象，从而判断A是否为B类型
4.Object.prototype.toString.call()：可以判断所有的数据类型
二.call,apply,bind
1.call 可以调用代码
function dog(name){console.log("eat bone")
}dog.call();
//可以调用方法
2.call 可以改变函数this指向 apply的区别参数是数组 bind 传参与call一致 但不会调用函数
var foo = 'bar';
function dog(name){name："dd"sayName(){console.log("l am" + this.name)}eat(food){console.log("l eat" + this.food)}
}
let cat ={name:"cc";
}dog.sayName.call(cat);
dog.eat.call(cat,fish,apple)//cat this的对象 后面是要传的参数
dog.eat.apply(cat,["fish","apple"])
dog.eat.bind(cat,fish,apple)//不会执行 但会有返回值
let fun = dog.eat.bind(cat,fish,apple);
fun();跨域
jsonp （cors contol among …设置wei*） proxy
---------------------------ES6-------------------
1.var let const
var 1.声明提升 2.变量覆盖 3.没有块级作用域 函数作用域function内都可以用 for循环体内声明使用 循环体外依旧有效
const 不能修改 let 不存在变量提升 同一作用域不能重复定义一个名称 支持块级作用域 严格作用域 const一定要初始化赋值 不能值声明不赋值 const一个空的对象数组 再给对象数组赋值可以
2.去重
let arr = [11,11,22,23]
let item = [...new Set(arr)]
console.log(item)
。。。扩展运算符
3.promise
.then() 异步
1 3 2
四.promise 目前最好的异步处理方案
避免回调地狱
异步 ajax 定时器 事件 node读文件 操作数据库
三状态 fulfilled已解决 pending 待定 rejected拒绝 状态不可逆
.then挂在在原型promise上
五.新特性
let const 箭头函数 set map数据类型
set 类似数组 但成员唯一add 2个2进数组 只显示一个 用于去重
map 要有键和值
const m=new Map（）；
m.set（‘name’，‘jack’）
箭头函数
-------------vue------------------------
一.MVC 缺点 后端完成 才能开发前端
MVVM前后端分离 中间多一个VM（data（））多了视图控制器
可以将数据保存到data里 不用反复请求后端
二.v-model 原理
三.虚拟Dom v2才有
1.本质js 跨平台
vue一条线初始化 一条线更新
vue —通过render 转化dom 真实dom转成虚拟dom 更新的时候做对比
真实dom更新是摧毁整个页面 虚拟dom局部更新
