Kun's Wiki

前端进阶五，web api

# 内网穿透

内网穿透，即NAT穿透，网络连接时术语，计算机是局域网内时，外网与内网的计算机节点需要连接通信，有时就会出现不支持内网穿透。就是说映射端口，能让外网的电脑找到处于内网的电脑，提高下载速度。不管是内网穿透还是其他类型的网络穿透，都是网络穿透的统一方法来研究和解决。

内网穿透的应用场景：

  • 内网穿透，可代替vpn
  • 将无外网IP的desktop映射到公网
  • 临时搭建网络并分配二级域名
  • 微信二次开发的本地调试

方法1:localtunnel （使用国外网，非常慢，经常超时，不建议使用）

首先安装包

npm install -g localtunnel
1

在本地开启服务后，如服务在8080端口，运行命令开启服务

lt --subdomain mitu --port 8080
1

lt为localtunnel的缩写，mitu是指定域名前缀为mitu，8080为配置端口

常见错误：

（1）运行脚本命令错误：以管理员模式开启脚本权限

（2）invalid host header：在webpack的配置devServer下添加配置：disableHostCheck: true

方法二：natapp （国内网站）

方法三：ngrok

ngrok需要在服务端和客户端配置，客户端叫ngrokd，服务端叫ngrok

https://juejin.cn/post/6844903623659356168

https://aotu.io/notes/2016/02/19/ngrok/index.html

https://xicheng412.github.io/2016/09/27/ngrok-config/

# canvas api

<canvas>元素用于生成图像。它本身就像一个画布，JavaScript 通过操作它的 API，在上面生成图像。它的底层是一个个像素，基本上<canvas>是一个可以用 JavaScript 操作的位图（bitmap）

它与 SVG 图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。

每个<canvas>元素都有一个对应的CanvasRenderingContext2D对象（上下文对象）。Canvas API 就定义在这个对象上面。

<canvas id="myCanvas" width="400" height="250">
  您的浏览器不支持 Canvas
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
</script>
1
2
3
4
5
6
7

Canvas API 需要getContext方法指定参数2d，表示该<canvas>节点生成 2D 的平面图像。如果参数是webgl，就表示用于生成 3D 的立体图案，这部分属于 WebGL API。

方法：

绘制路径：

ctx.beginPath():

ctx.closePath():

ctx.moveTo():

ctx.lineTo():

ctx.fill():

ctx.stroke():

ctx.fillStyle():

ctx.strokeStyle:

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);:

ctx.restore()方法将画布的样式恢复到上一个保存的快照，如果没有已保存的快照，则不产生任何效果。

图像变换：

ctx.rotate:图像旋转

ctx.scale:图像缩放

ctx.translate:图像平移

ctx.transform:设置图像变换

ctx.settransform:取消前面的图像变换

# svg

SVG是一种基于XML语法的图象格式，全称是可缩放矢量图，其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

SVG元素可以直接插入网页，成为DOM的一部分，然后用JavaScript和css进行操作

<!DOCTYPE html>
<html>
<head></head>
<body>
  <svg
    id="mysvg"
    xmlns="https:/www.w3.org/2000/svg"
    viewBox="0 0 800 600"
   	preserveAspectRatio="xMidYMid meet"
    >
  	<circle id="mycircle" cx="400" cy="300" r="50"/>
  </svg>  
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 基础标签

api

circle标签

circle标签代表圆形，cx、cy、r属性分别为横坐标、纵坐标、和半径单位为像素。

<svg width="300" height="300">
	<circle cx="30" cy="50" r="25" />
  <circle cx="30" cy="50" r="25" class="red"/>
  <circle cx="30" cy="50" r="25" class="fancy"/>
</svg>
1
2
3
4
5

line标签代表直线

<svg width="300" height="300">
	<line x1="0" y1="0" x2="200" y2="0" />
</svg>
1
2
3

polyline标签用于绘制一根折线

<svg width="300" height="300">
	<polyline points="3,3 30,28 3, 53" fill="none" stroke="black"/>
</svg>
1
2
3

rect标签用于绘制矩形

<svg width="300" height="300">
  <rect x="0" y="0" height="100" width="200" style="stroke: #70d5dd; fill: #dd524b" />
</svg>
1
2
3

ellipse标签用于绘制椭圆

<svg width="300" height="180">  <ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></svg>
1

polygon标签用于绘制多边形

<svg width="300" height="180">	<polygon fill="green" stroke="orange" stroke-width="1" points="0,0 100,0 100, 100 0,100 0, 0"/></svg>
1

path标签用于绘制路径

<svg width="300" height="300">	<path  	d="    M 18,3    L 46,3    L 46,40    L 62,40    L 32,68    L 3,40    L 18,40    Z       " 	>  </path></svg>
1

marker-start属性

Marker-end属性

stroke-linecap属性：用于控制描边末端的样式

Stroke-dasharray属性：控制画笔的虚实，通过实线和虚线控制画

stroke-dashoffset属性：相对于绘制的起点偏移的量，正值是向右或者顺时针偏移，负值是向左或者逆时针偏移

text标签用于绘制文本

<svg width="300" height="300">	<text x="50" y="25">22</text></svg>
1

use标签用于复制一个形状

<svg viewBox="0 0 30 10" xmlns="https://www.w3.org/2000/svg">  <circle id="myCircle" cx="5" cy="5" r="4" />  <use href="#myCircle" x="10" y="0" fill="blue"/>  <use href="#myCircle" x="20" y="0" fill="white" stroke="blue" /></svg>
1

g标签用于将多个形状组成一个组，方便复用

<svg width="300" height="300">  <g id="myCircle">    <text></text>    <circle cx="50" cy="50" r="20"/>  </g></svg>
1

defs标签用于自定义形状，它内部的代码不会显示，仅供饮用

<svg width="300" height="100">  <defs>    <g id="myCircle">      <text x="25" y="20"></text>      <circle cx="50" cy="50" r="20"/>    </g>  </defs>  <usr href="#myCircle" x="0" y="0"/>  <usr href="#myCircle" x="100" y="0" fill="blue"/>  <usr href="#myCircle" x="200" y="0" fill="white" stroke="blue"/></svg>
1

pattern标签用于自定义一个形状，该形状可以被引用来平铺一个区域

<svg width="500" height="500">  <defs>  	<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">    	<circle fill="#bee9e8" cx="50" r="35"/>    </pattern>  </defs>  <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" /></svg>
1

image标签用于插入图片文件

<svg viewBox="0 0 100 100" width="100" height"100">	<image xlink:href="path/to/image.jpg"         width="50%" height="50%"/></svg>
1

animate标签用于产生动画效果

<svg	width="500px" height="500px">  <rect x="0" y="0" width="100" height="100" fill="#feac5e">    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />  </rect></svg>
1

animateTransform

<svg width="500px" height="500px">  <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeat="indefinite" />   </rect></svg>
1

# webapi

SVGGElement对应g标签

SVGDefsElement对应defs标签

SVGEllipseElement对应ellipse标签

https://developer.mozilla.org/en-US/docs/Web/API/SVGGElement

# js操作svg

<html><body>  <svg     id="mysvg"     xmlns="http://www.w3.org/2000/svg"     viewBox="0 0 800 600"     preserveAspectRatio="xMidYMid meet"    >   	<circle id="myCircle" cx="400" cy="300" r="50" />  </svg></body><css type="text/css">  circle {  	stroke-width: 5;  	stroke: #f00;  	fill: #ff0;  }  circle:hover {  	stroke: #090;  	fill: #fff;  }<css><script type="text/javascript">  var mycircle = document.getElementById('mycircle');  mycircle.addEventListener('click',function(e) {    console.log('circle clicked - enlarging');    mycircle.setAttribute('r',60);  },false)</script></html>
1

# svg常见用法

作为css背景图

描边动画

<svg width="100%" height="100">  <text text-anchor="middle" x="50%" y="50%" class="text text-1">    segmentfault.com  </text>  <text text-anchor="middle" x="50%" y="50%" class="text text-2">    segmentfault.com  </text>  <text text-anchor="middle" x="50%" y="50%" class="text text-3">    segmentfault.com  </text>  <text text-anchor="middle" x="50%" y="50%" class="text text-4">    segmentfault.com  </text></svg><css>.text {  font-size: 64px;  font-weight: bold;  text-transform: uppercase;  fill: none;  stroke-width: 2px;  stroke-dasharray: 90 310;  animation: stroke 6s infinite linear;}.text-1 {	stroke: #3498db;  text-shadow: 0 0 5px #3498db;  animation-delay: -1.5s;}.text-2 {	stroke: #f39c12;  text-shadow: 0 0 5px #f39c12;  animation-delay: -3s;}.text-3 {	stroke: #e74c3c;  text-shadow: 0 0 5px #e74c3c;  animation-delay: -4.5s;}.text-4 {	stroke: #9b59b6;  text-shadow: 0 0 5px #9b59b6;  animation-delay: -6s;}@keyframes stroke {	100% {		stroke-dashoffset: -400;  }  }</css>
1

圆形进度条

<svg>	<circle   cx="150"   cy="73"   r="60"   stroke="grey"   stroke-width="12"   fill="none"   stroke-dasharray="190"   stroke-dashoffset="-190"   stroke-linecap="round"   />  <circle   cx="150"   cy="73"   r="60"   stroke="gold"   stroke-width="12"   fill="none"   stroke-dasharray="95 190" #修改此数字即为进度条进度   stroke-dashoffset="-190"   stroke-linecap="round"   /></svg>
1

# Iconfont的使用

iconfont有三种使用方式：

unicode

<span class="icon-font">&#59173</span>
1

font class

<span class="iconfont icon-2018-pc"></span>
1

Symbol

<svg class="icon" aria-hidden="true">	<use xlink:href="#icon-2018-tu"></use></svg>
1

前两种不支持彩色图标，第三种支持

# 业务场景代码

# 手写轮播图

轮播需要设置一个很长的DOM，设置超出容器隐藏，使用setInterval进行轮播，计算便宜位置。

DOM左端与右端交换的时候会有快速滑动，为了体验好一点，我会设置两层DOM，在容器之外的DOM进行DOM的左右交换。

const position = [-8,-388,-768,-1148,-1528,-1908,-2208,-2668,-3048,-3428]var certificate = document.getElementById("certificate-inner");var i = 3;function pre_pic(){   if(i >= 1){     if(isNaN(parseInt(certificate.style.marginLeft)) || parseInt(certificate.style.marginLeft) < -400)         i--;         var newLeft = position[i] + "px";         $("#certificate-inner").animate({marginLeft:newLeft},500);     else if (parseInt(certificate.style.marginLeft)> -400 || i >= 1){         i++;         var newLeft = position[i] + "px";         $("#certificate-inner").animate({marginLeft:newLeft},500);         setTimeout(function(){            i = 6;            certificate.style.marginLeft = "-2283px"         },3985)     }   }else{     i = 5;     certificate.style.marginLeft = "-2283px";     var newLeft = position[i] + "px"     $("#certificate-inner").animate({marginLeft:newLeft},500);   }}function next_pic(){   if(i < 9){     if(isNaN(parseInt(certificate.style.marginLeft))|| parseInt(certificate.style.marginLeft) > 374*8 || i > 0)			{        i++;        var newLeft = position[i] + "px"        $("#certificate-inner").animate({marginLeft:newLeft},500)     }     else{        i++;        var newLeft = position[i] + "px"        $("#certificate-inner").animate({marginLeft:newLeft},500)        setTimeout(function(){          i = 3;          certificate.style.marginLeft = "-1143px"        },3985)     }     newLeft = newLeft + "px"     time = 0;   }else{     i = 4;     certificate.style.marginLeft = "1143px";     var newLeft = position[i] + "px"     $("#certificate-inner").animate({marginLeft:newLeft},500)   }}$(".left-coursol-icon").on("click",function(e){  e.preventDefault();  pre_pic();})$(".right-coursol-icon").on("click",function(e){  e.preventDefault();  next_pic();})var time = null;function autoplay(){  time = setInterval(function(){    next_pic();  },4000);}autoplay();
1

# 手写图片懒加载

# 手写Google搜索

# 前端添加水印

# 富文本编辑器

# 前端大容量缓存方案indexedDB

对于做3D WebGL 的开发者来说，加载大量的 hdr、glb、gltf 等文件往往是很令人头疼的，因为这些文件体积不小，在网络侧加载会消耗大量时间，从而影响用户体验。对于这些大文件，localstorage 和 sessionstorage 的缓存容量肯定是不够塞牙缝的。所以这时候我们要请出 IndexedDB。

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法， 允许储存大量数据，提供查找接口，还能建立索引。 IndexedDB 的兼容性也还不错，基本上不兼容太老的浏览器，都还是可用的。

容量

chrome67设置了should remain available，这个值表示为浏览器本身需要留出来的空间，硬盘容量除去这个值以后的空间就是浏览器临时存储可用空间

大文件存储

IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象），所以我们可以把图片或者 3D 模型文件转化成 Blob 格式的文件，存在 IndexedDB 中，就可以解决免去二次加载时网络请求的时间。

IndexedDB 完全可以满足存储大体积文件的需求，并且 IndexedDB 可以 worker 中使用，包括 Web Worker 和 Service Worker，当 3D 需要进行复杂计算时，就可以利用 Service Worker 把一些数据存储在 IndexedDB 中或者通过 Web Worker 读取 IndexedDB 中的数据进行多线程计算。

需要注意的是 IndexedDB 也遵从同源协议(same-origin policy (opens new window))，所以你只能访问同域中存储的数据，而不能访问其他域的。

#

# 性能监控

# 关键指标

首屏时间：从浏览器输入地址并回车后到首屏内容渲染完毕的时间；首屏时间等于白屏时间+首屏渲染时间

白屏时间：是指从用户进入网站（输入url、刷新、跳转等方式）的时刻开始计算，一直到页面有内容展示出来的时间节点。这个过程包括dns查询、建立tcp连接、发送首个http请求（如果使用https还要介入TLS的验证时间）、返回html文档、html文档head解析完毕。

用户可操作时间节点：domready触发节点，点击事件有反应；

总下载时间：window.onload的触发节点。

# window.performance

Window.performance是用来测量网页和Web应用程序的性能api，performance中有以下字段用来衡量性能：

memory字段代表JavaScript对内存的占用。

navigation字段统计的是一些网页导航相关的数据：redirectCount:重定向的数量（只读），但是这个接口有同源策略限制，即仅能检测同源的重定向；type 返回值应该是0,1,2 中的一个。分别对应三个枚举值: 0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式) 1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面) 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)

timing字段的统计数据，它包含了网络、解析等一系列的时间数据。具体包括：

DNS查询耗时 ：domainLookupStart和domainLookupEnd分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用了cache），则两者的值都等于fetchStart；

TCP链接耗时：connectStart和connectEnd分别代表TCP建立连接和连接成功的时间节点。如果浏览器没有进行TCP连接（比如使用持久化连接webscoket），则两者都等于domainLookupEnd；

request请求耗时：responseStart和responseEnd分别代表浏览器收到从服务器端（或缓存、本地资源）响应回的第一个字节和最后一个字节数据的时刻；

解析dom树耗时:domCompletehtml文档完全解析完毕的时间节点减去domInteractive，代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady，它早于DOMReady触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点；

白屏时间：domLoading代表浏览器开始解析html文档的时间节点减去fetchStart是指在浏览器发起任何请求之前的时间值。

domready可操作时间 ：domContentLoadedEventEnd 代表DOMContentLoaded事件完成的时间节点，此刻用户可以对页面进行操作，也就是jQuery中的domready时间；- fetchStart

onload总下载时间 = loadEventEnd代表onload事件结束的时间节点-fetchStart；

# 实例方法

白屏时间

在html文档的head中所有的静态资源以及内嵌脚本/样式之前记录一个时间点，在head最底部记录另一个时间点，两者的差值作为白屏时间

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>白屏时间</title>    <script>        // 开始时间        window.pageStartTime = Date.now();    </script>    <link rel="stylesheet" href="">    <link rel="stylesheet" href="">    <script>        // 白屏结束时间        window.firstPaint = Date.now()    </script></head><body>    <div>123</div></body></html>白屏时间 = firstPaint - pageStartTime
1

通常计算首屏的方法有

  • 首屏模块标签标记法
  • 统计首屏内加载最慢的图片的时间
  • 自定义首屏内容计算法

标签标记法

由于浏览器解析HTML是按照顺序解析的，当解析到某个元素的时候，觉得首屏完成了，就在此元素后面加入

Last Updated: 11/7/2021, 3:25:01 PM

← 前端进阶（八） →