Kun

Kun

IT学徒、技术民工、斜杠青年,机器人爱好者、摄影爱好 PS、PR、LR、达芬奇潜在学习者

共 212 篇文章

链接

Kun's Blog

　　前端进阶六，web api

内网穿透

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

内网穿透的应用场景：

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

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

首先安装包

npm install -g localtunnel

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

lt --subdomain mitu --port 8080

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/

Iconfont的使用

iconfont有三种使用方式：

unicode

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

font class

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

Symbol

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

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

业务场景代码

手写轮播图

轮播需要设置一个很长的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();

手写图片懒加载

手写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)，所以你只能访问同域中存储的数据，而不能访问其他域的。

性能监控

关键指标

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

白屏时间：是指从用户进入网站（输入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 : TYPENAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式) 1 : TYPERELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面) 2 : TYPEBACKFORWARD (用户通过后退按钮访问本页面)

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

通常计算首屏的方法有

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

标签标记法

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