前端知识归纳

前端基础

HTTP/HTML/浏览器

http 和 https
https 的 SSL 加密是在传输层实现的。
(1)http 和 https 的基本概念
http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
https: 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。
https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。
https 协议的缺点： https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。 https 缓存不如 http 高效，会增加数据开销。 SSL 证书也需要钱，功能越强大的证书费用越高。 SSL 证书需要绑定 IP，不能再同一个 ip 上绑定多个域名，ipv4 资源支持不了这种消耗。
tcp三次握手

从图片可以得到三次握手可以简化为：C 发起请求连接 S 确认，S也发起连接 C 确认我们再看看每次握手的作用：第一次握手：S 只可以确认自己可以接受 C 发送的报文段第二次握手：C 可以确认 S 收到了自己发送的报文段，并且可以确认自己可以接受 S 发送的报文段第三次握手：S 可以确认 C 收到了自己发送的报文段
TCP 和 UDP 的区别
（1）TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。
（2）TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP 尽最大努力交付，即不保证可靠交付。并且因为 tcp 可靠，面向连接，不会丢失数据因此适合大数据量的交换。
（3）TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如 IP 电话和视频会议等）。
（4）TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。 m
（5）TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。（6）TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。
HTTP 请求的方式，HEAD 方式
head：类似于 get 请求，只不过返回的响应中没有具体的内容，用户获取报头 options：允许客户端查看服务器的性能，比如说服务器支持的请求方式等等。
一个图片 url 访问后直接下载怎样实现？
请求的返回头里面，用于浏览器解析的重要参数就是 OSS 的 API 文档里面的返回 http 头，决定用户下载行为的参数。

下载的情况下：
1) x-oss-object-type: Normal
2) x-oss-request-id: 598D5ED34F29D01FE2925F41
3) x-oss-storage-class: Standard
web Quality（无障碍）
能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。残障人士指的是那些带有残疾或者身体不健康的用户。使用 alt 属性： < img src=”person.jpg” alt=”this is a person”/ > 有时候浏览器会无法显示图像。具体的原因有：用户关闭了图像显示浏览器是不支持图形显示的迷你浏览器浏览器是语音浏览器（供盲人和弱视人群使用） 如果您使用了 alt 属性，那么浏览器至少可以显示或读出有关图像的描述。
实用的 BOM 属性对象方法?
什么是 Bom? Bom 是浏览器对象。有哪些常用的 Bom 属性呢？
(1)location 对象
location.href— 返回或设置当前文档的 URL
location.search — 返回 URL 中的查询字符串部分。
例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash — 返回 URL#后面的内容，如果没有#，返回空
location.host — 返回 URL 中的域名部分，例如 www.dreamdu.com location.hostname — 返回 URL 中的主域名部分，例如 dreamdu.com location.pathname — 返回 URL 的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port — 返回 URL 中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回 8080
location.protocol — 返回 URL 中的协议部分。
例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容 http: location.assign — 设置当前文档的 URL
location.replace() — 设置当前文档的 URL，并且在 history 对象的地址列表中移除这个 URL
location.replace(url);
location.reload() — 重载当前页面
(2)history 对象
history.go() — 前进或后退指定的页面数 history.go(num);
history.back() — 后退一页
history.forward() — 前进一页
(3)Navigator 对象
navigator.userAgent — 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled — 返回浏览器是否支持(启用)cookie
HTML5 drag api
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
http2.0
提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比 http1.0）允许多路复用：多路复用允许同时通过单一的 HTTP/2 连接发送多重请求-响应信息。改善了：在 http1.1 中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。
二进制分帧：HTTP2.0 会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码首部压缩服务器端推送
400 和 401、403 状态码
(1)400 状态码：请求无效
产生原因:
前端提交数据的字段名称和字段类型与后台的实体没有保持一致 前端提交到后台的数据应该是 json字符串类型，但是前端没有将对象 JSON.stringify 转化成字符串。
解决方法： 对照字段的名称，保持一致性将 obj 对象通过 JSON.stringify 实现序列化
(2)401 状态码：当前请求需要用户验证
(3)403 状态码：服务器已经得到请求，但是拒绝执行
(4)404状态码是一种HTTP（超文本传输协议）状态码，表示客户端请求的资源在服务器上未找到
fetch 发送 2 次请求的原因
fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。
Cookie、sessionStorage、localStorage 的区别
共同点：都是保存在浏览器端，并且是同源的
Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下, 存储的大小很小只有4K 左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约 4K 左右）
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session 为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
localStorage：localStorage 在所有同源窗口中都是共享的；
cookie 也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）
补充说明一下 cookie 的作用：保存用户登录状态。例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie 后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用 cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。
Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?
Doctype 声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。 混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。
Cookie 如何防范 XSS 攻击
XSS（跨站脚本攻击）是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些攻击，需要在 HTTP 头部配上，
set-cookie：
httponly-这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。 secure- 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。结果应该是这样的：Set-Cookie=< cookie-value >…
click 在 ios 上有 300ms 延迟，原因及如何解决？
(1)粗暴型，禁用缩放
(2)利用 FastClick，其原理是：检测到 touchend 事件后，立刻出发模拟 click 事件，并且把浏览器 300 毫秒之后真正出发的事件给阻断掉
addEventListener 参数
addEventListener(event, function, useCapture)
其中，event 指定事件名；function 指定要事件触发时执行的函数；useCapture 指定事件是否在捕获或冒泡阶段执行。
强缓存、协商缓存什么时候用哪个
因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我们还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧的资源；所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使用本地的缓存，以最大程度的减少因网络请求而产生的资源浪费。
前端优化
降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。
HTTP 支持的方法
GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE,
如何画一个三角形
三角形原理：边框的均分原理

div {
width:0px; 
height:0px; 
border-top:10px solid red; 
border-right:10px solid transparent; 
border-bottom:10px solid transparent; 
border-left:10px solid transparent; }

HTML5 新增的元素
首先 html5 为了更好的实践 web 语义化，增加了 header，footer，nav,aside,section 等语义化标签，在表单方面，为了增强表单，为 input 增加了 color，emial,data ,range 等类型，在存储方面，提供了 sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素 audio和 vedio，另外还有地理定位，canvas 画布，拖放，多线程编程的 web worker 和 websocket协议。
Cookie 和 Session 的认知，Cookie 有哪些限制？
1) cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
2) cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗考虑到安全应当使用 session。
3) session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用 COOKIE。
4) 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。

CSS

css 盒模型
简介：就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
box-sizing(有 3 个值哦)：border-box,padding-box,content-box. 标准盒子模型

区别：从图中我们可以看出，这两种盒子模型最主要的区别就是width 的包含范围，在标准的盒子模型中，width 指 content 部分的宽度，在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：
标准盒子模型的盒子宽度：左右 border+左右 padding+width
IE 盒子模型的盒子宽度：width
在 CSS3 中引入了 box-sizing 属性，box-sizing:content-box;表示标准的盒子模型box-sizing:border-box 表示的是 IE 盒子模型
最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右 padding+width 也很好理解性记忆，包含什么，width 就从什么开始算起。
画一条 0.5px 的线
采用 meta viewport 的方式
< meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=no” / >
采用 border-image 的方式
采用 < div style=”height: 1px; border-top: 0.5px solid red;”>< /div >
采用 transform: scaleY(0.5);的方式
link 标签和 import 标签的区别
link 属于 html 标签，而@import 是 css 提供的页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。 link 方式样式的权重高于@import 的
Flex 布局
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。简单的分为容器属性和元素属性
容器的属性：
flex-direction：决定主轴的方向（即子 item 的排列方法）
.box { flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap：决定换行规则
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
flex-flow：
.box { flex-flow: < flex-direction> || < flex-wrap>; }justify-content：对其方式，水平主轴对齐方式
align-items：对齐方式，竖直轴线方向
项目的属性（元素的属性）：
order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0 flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个 item 的 flow-shrink 为 0，则为不缩小
flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖 align-items，默认属性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局
BFC（块级格式化上下文，用于清楚浮动，防止 margin 重叠等）
直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。 BFC 区域不会与 float box 重叠
BFC 是页面上的一个独立容器，子元素不会影响到外面
计算 BFC 的高度时，浮动元素也会参与计算那些元素会生成 BFC：
根元素
float 不为 none 的元素
position 为 fixed 和 absolute 的元素
display 为 inline-block、table-cell、table-caption，flex，inline-flex 的元素
overflow 不为 visible 的元素

垂直居中的方法
1) margin:auto 法

 div{ 
    width: 400px; height: 400px; 
    position: relative; 
    border: 1px solid #465468; 
    }
    img{
         position: absolute; 
         margin: auto; top: 0; 
         left: 0; right: 0; 
         bottom: 0; 
         }
 < div>
< img src="mm.jpg"> 
< /div> 定位为上下左右为 0，margin：0 可以实现脱离文档流的居中

2)margin 负值法
.container{
width: 500px; height: 400px;
border: 2px solid #379;
position: relative;

}
.inner{ 
 width: 480px; 
 height: 380px; 
 background-color: #746; 
 position: absolute; 
 top: 50%; left: 50%;
  margin-top: -190px; /*height 的一半*/ 
  margin-left: -240px; /*width 的一半*/ }

补充：其实这里也可以将 marin-top 和 margin-left 负值替换成， transform：translateX(-50%)和 transform：translateY(-50%)
3)table-cell（未脱离文档流的）设置父元素的 display:table-cell,并且 vertical-align:middle，这样子元素可以实现垂直居中。 css: div{ width: 300px; height: 300px; border: 3px solid #555; display: table-cell; vertical-align: middle; text-align: center; }img{ vertical-align: middle; }
4)利用 flex 将父元素设置为 display:flex，并且设置 align-items:center;justify-content:center;
1css: 2.container{ 3width: 300px; 4height: 200px; 5border: 3px solid #546461; 6display: -webkit-flex; 7display: flex; 8-webkit-align-items: center; 9align-items: center; 10-webkit-justify-content: center; 11justify-content: center; 12} 13.inner{ 14border: 3px solid #458761; 15padding: 20px; 16}

使用CSS实现硬币翻转效果

  /* 硬币容器样式 */
.coin {
  width: 100px;
  height: 100px;
  perspective: 1000px; /* 透视距离 */
}

/* 硬币正面样式 */
.front {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: gold;
}

/* 硬币背面样式 */
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: silver;
  transform: rotateY(180deg); /* 初始为反面朝上 */
}

/* 动画效果 */
.coin:hover .front {
  animation: flip-coin 0.8s forwards;
}

@keyframes flip-coin {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(-90deg);
  }
  100% {
    transform: rotateY(-180deg);
  }
}

.coin:hover .back {
  animation: flip-coin-back 0.8s forwards;
}

@keyframes flip-coin-back {
  0% {
    transform: rotateY(-180deg);
  }
  50% {
    transform: rotateY(-90deg);
  }
  100% {
    transform: rotateY(0);
  }
}

通过定义两个 @keyframes 规则分别表示正面翻转和背面翻转的动画，使用 transform: rotateY() 来实现翻转的效果。
需要注意的是，在动画效果中，我们使用了 forwards 关键字，使得动画结束后保持最终状态。此外，为了避免鼠标快速移动时动画效果重复触发，我们可以使用 transition-delay 属性为鼠标悬停状态添加一个延迟效果。

<div class="coin">
  <div class="front"></div>
  <div class="back"></div>
</div>

em、deg和px都是在前端开发中常用的单位
它们之间的区别如下：
1) px（像素）是一个绝对单位，它在所有设备上的显示效果相同。例如，10px 的文本在所有设备上看起来都是一样大小的。
2) em 是一个相对单位，它基于当前元素的字体大小进行计算。例如，如果一个元素的字体大小为16px，那么 1em 就等于16px。如果在一个元素内部设置字体大小为 0.5em，那么它的大小将会是当前元素字体大小的一半。
因此，em 和 px 的主要区别在于它们的大小计算方式不同。px 是一个绝对单位，而 em 是一个相对单位。在设置文本大小时，使用 em 可以让你的文本大小根据父元素的大小进行缩放，而不是在不同的设备上显示不同的大小。
1) deg是一个角度单位，用于表示旋转角度。在CSS中，它通常用于设置CSS3的旋转属性，如transform: rotate(45deg)。

画一个3D正方形

<style>
        .wrapper {
            width: 50%;
            float: left;
        }

        .cube {
            font-size: 4em;
            width: 2em;
            margin: 1.5em auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(32deg);
        }

        .side {
            position: absolute;
            width: 2em;
            height: 2em;
            background: rgba(255, 99, 71, 0.6);
            border: 1px solid rgba(0, 0, 0, 0.5);
            color: white;
            text-align: center;
            line-height: 2em;
        }

        .front {
            transform: translateZ(1em);
        }

        .bottom {
            transform: rotateX(-90deg) translateZ(1em);
        }

        .top {
            transform: rotateX(90deg) translateZ(1em);
        }

        .left {
            transform: rotateY(-90deg) translateZ(1em);
        }

        .right {
            transform: rotateY(90deg) translateZ(1em);
        }

        .back {
            transform: translateZ(-1em);
        }
    </style>
</head>

<body> 
    <div class="wrapper w1">
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
    <div class="wrapper w2">
        <div class="cube">
            <div class="side front">1</div>
            <div class="side back">6</div>
            <div class="side right">4</div>
            <div class="side left">3</div>
            <div class="side top">5</div>
            <div class="side bottom">2</div>
        </div>
    </div>
</body>

calc 属性
Calc 用户动态计算长度值，任何长度值都可以使用 calc()函数计算，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
隐藏页面中某个元素的方法
display:none; visibility:hidden; opacity: 0; position 移到外部，z-index 涂层遮盖等等
1) visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
2) display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉
line-height 和 height 的区别
line-height 一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，height 一般是指容器的整体高度。
相对布局和绝对布局，position:relative 和 obsolute。
相对定位 relative：
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，``。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute：
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
css 布局
六种布局方式总结：
圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网格布局。
圣杯布局是指布局从上到下分为 header、container、footer，然后 container 部分定为三栏布局。这种布局方式同样分为 header、container、footer。
圣杯布局的缺陷在于 center 是在 container 的 padding 中的，因此宽度小的时候会出现混乱。
双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。
Flex 布局是由 CSS3 提供的一种方便的布局方式。
绝对定位布局是给 container 设置 position: relative 和 overflow: hidden，因为绝对定位的元素的参照物为第一个 postion 不为 static 的祖先元素。 left 向左浮动，right 向右浮动。 center 使用绝对定位，通过设置 left 和 right 并把两边撑开。 center 设置 top: 0 和 bottom: 0 使其高度撑开。表格布局的好处是能使三栏的高度统一。网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系
css 预处理器有什么
less，sass 等

javaScript

闭包
一句话可以概括：闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。
图片的懒加载和预加载
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力
JS 实现跨域
JSONP：通过动态创建 script，再请求一个带参网址实现跨域通信。document.domain + iframe
跨域：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。
location.hash + iframe 跨域：a 欲与 b 跨域相互通信，通过中间页 c 来实现。三个页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通信。 window.name + iframe跨域：通过iframe的src属性由外域转向本地域，跨域数据即由iframe 的 window.name 从外域传递到本地域。 postMessage 跨域：可以跨域操作的 window 属性之一。 CORS：服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带 cookie 请求，前后端都需要设置。代理跨域：启一个代理服务器，实现数据的转发
JS 基本数据类型
基本数据类型：undefined、null、number、boolean、string、symbol
跨域的原理
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同，都被当作是不同的域。跨域原理，即是通过各种方式，避开浏览器的安全限制。
写一个函数，第一秒打印 1，第二秒打印 2
两个方法，第一个是用 let 块级作用域
for(let i=0;i<5;i++){
setTimeout(function(){
console.log(i)
},1000*i)
}
第二个方法闭包
for(var i=0;i<5;i++){
(function(i){
```
 setTimeout(function(){
```
console.log(i)
},1000*i) })(i)
}

前端知识归纳

前端基础

HTTP/HTML/浏览器

CSS

javaScript

前端核心

服务端编程

Ajax

移动Web端

前端进阶

前端工程化

Vue框架

React框架

Angular框架