ES6新属性
var、let、const模板字符串123456789//ES5function sayHi(name) { return '你好，' + name + '!'}//ES6 模板字符串function sayHi(name) { return `你好，${name}!` }
集合（set）
ES6 新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。
以 [value, value]的形式储存元素。
Set 本身是一种构造函数，用来生成 Set 数据结构。
Set 对象允许你储存任何类型的唯一值，无论是原始值或者是对象引用。
操作方法
add(value)：新增，相当于 array里的push。
delete(value)：存在即删除集合中value。
has(value)：判断集合中是否存在 value。
clear()：清空集合。
遍历方法
keys()：返回一个包含集合中所有键的迭代器。
values()：返回一个包含集合中所有值得迭代器。
...
CSS3新属性
1.选择器css3中新增了一些选择器，主要为如下图所示：
新增属性选择器：
E[foo^=’bar’] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头
E[foo$=’bar’] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾
E[foo*=’bar’] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串
新增结构伪类选择器：
E:root 匹配文档所在的根元素
E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）
E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素
E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
UI元素状态伪 ...
JavaScript中的继承
继承继承（inheritance）是面向对象软件技术当中的一个概念。
如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”
继承可以使子类获得父类的属性和方法，同时子类还可以创建自己的属性和方法或者重写覆盖父类的一些属性和方法，使其获得与父类不同的功能。
方法下面给出JavaScripy常见的继承方式：
原型链继承
构造函数继承（借助 call）
组合继承
原型式继承
寄生式继承
寄生组合式继承
原型链继承原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。
1234567891011121314151617181920function Parent1(name) { this.name = name this.body = ['头','手','脚']}function Child1(n ...
px、rem、em的区别与联系
pxpx是相对长度单位，它是相对于显示器屏幕分辨率而言的。
优点是比较稳定和精确
缺点是不会根据浏览器页面的放大缩小而改变，会导致当前页面布局被打破；
em是相对长度单位，EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(16px)。
优缺点：EM的值并不是固定的，它会继承父级元素的字体大小。
remCSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素(浏览器默认16px)。
通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
webpack
5大核心概念1.entry(入口)
2.output(输出)
3.loader(加载器)
4.plugins(插件)
5.mode(模式)
css选择器
标签选择器(如：body,div,p,ul,li)
id选择器(如：id=“name”,id=“name_txt”)
类选择器(如：id=“name”,id=“name_txt”)
后代选择器(如：#head .nav ul li 从父集到子孙集的选择器)
子元素选择器(如：div>p ,带大于号>)
伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。
css选择器优先级最高到最低顺序为:
!important
行内样式
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.子选择器(ul > li)
5.后代选择器(li a)
6.伪类选择(a:hover,li:nth-child)
前端安全
XSS（跨站脚本攻击）是指攻击者利用网站漏洞将代码注入到其他用户浏览器的攻击方式。常见类型有：
反射型（非持久性）
存储型（持久性）
DOM 型
CSRF（跨站请求伪造） 是指攻击者可以在用户不知情的情况下，窃用其身份在对应的网站进行操作。
中间人攻击（MITM） 是指攻击者与通讯的两端分别创建独立的联系，在通讯中充当一个中间人角色对数据进行监听、拦截甚至篡改。
XSS（跨站脚本攻击）1.反射型（非持久性） 原理：攻击者通过在 URL 插入恶意代码，其他用户访问该恶意链接时，服务端在 URL 取出恶意代码后拼接至 HTML 中返回给用户浏览器。
要点：
通过 URL 插入恶意代码。
有服务端参与。
需要用户访问特定链接。
例子：
攻击者诱导被害者打开链接 abcd.com?name=<script src="http://a.com/attack.js"/>。
被攻击网站服务器收到请求后，未经处理直接将 URL 的 name 字段直接拼接至前端模板中，并返回数据。
被害者在不知情的情况下，执行了攻击者注入的脚本（可以通过这个获取对方的 Coo ...
BFC
BFC 全称为 block formatting context，中文为“块级格式化上下文”。它是一个只有块级盒子参与的独立块级渲染区域，它规定了内部的块级盒子如何布局，且与区域外部无关。
作用
修复浮动元素造成的高度塌陷问题。
避免非期望的外边距折叠。
实现灵活健壮的自适应布局。
触发BFC的常见条件
根元素。
float 的值不为 none。
position 的值不为 relative 或 static。
overflow 的值不为 visible 或 clip（除了根元素）。
display 的值为 table-cell，table-caption，或 inline-block 中的任意一个。
display 的值为 flow-root，或 display 值为 flow-root list-item。
flex items，即 display 的值为 flex 或 inline-flex 的元素的直接子元素（该子元素 display 不为 flex，grid，或 table）。
grid items，即 display 的值为 grid 或 inline-grid 的元 ...
浏览器从输入网址到页面展示的过程
流程浏览器从输入网址到渲染页面主要分为以下几个过程
URL输入
DNS解析
建立TCP连接
发送 HTTP / HTTPS 请求（建立 TLS 连接）
服务器响应请求
浏览器解析渲染页面
HTTP请求结束，TCP断开连接
深入1.URL输入
https://wn244.com:443/2022/04/07/hello-world?search=true
https(protocol-协议)
wn233.com(hostname-主机名)
443(port端口号)
/2022/04/07/hello-world(pathname)
?search=true(search)
URL（统一资源定位符，Uniform Resource Locator）用于定位互联网上资源，俗称网址。
当我们在浏览器中输入wn244.com的网址后敲下回车，浏览器会对输入的信息进行判断：
检查输入的地址是否是一个合法的URL。
如果是，浏览器会判断URL是否完整，然后根据历史记录和书签对输入的网址进行猜测并给出智能提示。
如果不是，通常会将输 ...
节流防抖
节流定义
函数执行一次后，一段时间内不会再次执行
应用场景
点击按钮事件，用户在一定时间段内的点击事件，为了防止和服务端的多次交互，我们可以采用防抖。
输入框的自动保存事件
浏览器的resize事件
代码12345678910111213function throttle(fun, wait) { let load = false return function () { if (!load) { setTimeout(() => { fun.call(this, arguments) load = false }, wait); } load = true }}
防抖定义
延迟执行函数，每次触发都重新计算延迟，保证函数只会在最后一次触发后执行一次
应用场景
点击按钮发送Ajax请求。不使用防抖可能会导致用户连续点击按钮时，陆续发 ...