- 博客(117)
- 收藏
- 关注
RSS订阅原创 WebRTC用到的方法
远端流通过监听事件 client.on(‘stream-added’) 获得，请在 client.join() 进房前注册该事件，确保您不会错过远端用户进房通知。收到上述事件后要通过 client.subscribe() 订阅远端音视频流。● userSig: 用户签名，参考获取临时 userSig，或者部署 userSig 签发服务。● sdkAppId: 您在腾讯云创建的音视频应用的 sdkAppId。● mode: 实时音视频通话模式，设置为 ‘rtc’。● userId: 用户 ID，由您指定。
2022-10-17 14:42:19
586
原创 WebRTC的基本概念
转发的协议被定义为TURN。STUN：NAT的UDP简单的网络协议，它允许位于NAT后的客户端找出自己的公网地址，查出自己位于那种类型的NAT之后，以及NAT为某一个本地端口绑定的Internet端端口。问题：STUN并不是每次都能够成功的为需要的NAT的通话设备分配IP地址的，P2P在传输媒体流时，使用本地带宽，在多人音视频通话的过程中，通话质量好坏往往需要根据使用者本地带宽确定。信令服务器除了交换网络协商信息和媒体协议信息，比如房间的管理，音视频播放的音乐信息，进度条信息等都需要通过信令服务器实现。
2022-10-17 14:36:25
1024
原创 前端如何优化性能
一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等等一系列复杂的过程。就是在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。对于图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大的影响，所以需要使用图片延迟加载。 我们知道，当客户端渲染时，他是获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。
2022-09-05 21:15:55
215
原创 vite的学习笔记
vite先读取main.js中引入的index.css文件，直接使用fs模块读取index.css中的文件内容，创建一个style标签，将index.css中的文件内容直接copy进style标签里，然后将style标签插入到index.html的head中，将该css文件中的内容直接替换为js脚本，同时设置（Content-Type)为js，从而让浏览器以js脚本的形式来执行css后缀的文件。当我们在协同开发的时候，两个人开发用了相同的类名，这样导致了样式的覆盖，为了解决这个问题需要用到css模块化。..
2022-08-29 17:20:16
952
原创 vue中的路由学习巩固
router是全局的router实例，它有很多实例和对象，例如history,push(),replace(),go();route是当前激活的路由信息的对象。
2022-07-21 14:40:11
94
原创 canvas学习第一篇
一：绘制图形1:绘制一个实心长方形 ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect(10, 10, 55, 50);2:绘制一个矩形的边框ctx.fillStyle = "rgb(200,0,0)";ctx.strokeRect(10, 10, 55, 50);3:清除指定矩形区域，让清除部分完全透明。clearRect(x, y, width, height)4:案例 var canvas = document.getElementB
2022-04-21 17:10:51
955
原创 常见的算法题目
1：括号匹配function isMatch(str){ var map=new Map(); map.set('(',')'); map.set('{','}'); map.set('[',']'); var k=[]; for(let i=0;i<str.length;i++) { if(str[i]=='('||str[i]=='['||str[i]=='{') { k.push(str[i]); }else{
2021-10-23 14:48:42
311
原创 常见的前端题目
1：括号匹配function isMatch(str){ var map=new Map(); map.set('(',')'); map.set('{','}'); map.set('[',']'); var k=[]; for(let i=0;i<str.length;i++) { if(str[i]=='('||str[i]=='['||str[i]=='{') { k.push(str[i]); }else{
2021-10-23 14:47:12
186
原创 url转成对象
var strUrl="http:baidu.com/stu/?lx=1&name=aa&sex=man"; var s=strUrl.indexOf('?'); var strs=strUrl.slice(s+1); var strAry=strs.split('&'); var objs={}; for(var i=0;i<strAry.length;i++){ var item=strAry[i]; ..
2021-10-23 14:40:22
165
原创 驼峰命名对像
function mapKeyToCamelCase(data) { // 参考答案 const rename = (name) => { return name.split('_').reduce((pre, current) => { return pre + current[0].toUpperCase() + current.substring(1) }); } let res =
2021-10-23 14:28:08
139
原创 斐波拉去动态规划
function fib(n) { let array = new Array(n + 1).fill(null) array[0] = 0 array[1] = 1 for (let i = 2; i <= n; i++) { array[i] = array[i - 1] + array[i - 2] } return array[n]}fib(10)
2021-10-23 14:22:07
104
原创 二叉树的深度
var maxDepth = function(root) { if (!root) return 0 return Math.max(maxDepth(root.left), maxDepth(root.right)) + 1};
2021-10-23 14:21:09
86
原创 数组扁平化
let flatten = (nestedList) => { let result = []; let fn = function(target, ary) { for (let i = 0; i < ary.length; i++) { let item = ary[i]; if (Array.isArray(ary[i])) { fn(target, item); } else { target.push(item); }
2021-10-23 14:08:18
90
原创 层次输出二叉树
var levelOrder = function(root) { if (!root) return []; let queue = []; let res = []; let level = 0; queue.push(root); let temp; while (queue.length) { res.push([]); let size = queue.length; // 注意一下: size--; //在层次遍历中是一个非常重要的技巧 while (size-
2021-10-22 12:02:29
263
原创 promise all的实现
function promiseAll(Promises){ return new Promise(function(resolve,reject){ if(!Array.isArray(Promises)) { return reject(new TypeError("argument")); } var countNum=0; var promiseNum=Promises.length; var resolvedva
2021-10-22 11:58:36
107
原创 instanceof的实现原理
function instanceOf(left, right) { let leftValue = left.__proto__; let rightValue = right.prototype; while (true) { if (leftValue === null) { return false; } if (leftValue === rightValue) { return t
2021-10-22 11:53:25
144
原创 反转链表练习
var reverseList = function(head) { // 判断下变量边界问题 if (!head || !head.next) return head // 初始设置为空，因为第一个节点反转后就是尾部，尾部节点指向 null let pre = null let current = head let next // 判断当前节点是否为空 // 不为空就先获取当前节点的下一节点 // 然后把当前节点的 next 设为上一
2021-10-22 11:43:06
94
原创 快排的练习
function sort(array) { if (!checkArray(array)) return quickSort(array, 0, array.length - 1); return array;}function quickSort(array, left, right) { if (left < right) { swap(array, , right) // 随机取值，然后和末尾交换，这样做比固定取一个位置的复杂度略低 let ind
2021-10-22 11:41:12
107
原创 防抖和节流
防抖：解决的问题就是在一段时间间隔内多次触发事件的时候，只会执行一次节流：解决的问题是减少一段时间的触发频率1：函数在指定时间内只会触发一次，具体实现方法第一次触发函数的时候，延迟delay时间执行，如果在delay时间段内再次触发该函数，则重新开始计时如果delay时间段内没有触发该函数，则执行该函数 function bunde(fn ,depaly) { let timetar=null; return function() { if(timetar)
2021-10-22 11:25:02
120
原创 new的实现
1：首先会创建一个对象2：创建构造函数上面的属性和方法给这个对象3：将这个对象的__proto__的属性赋一个构造函数的protypeof<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> </title> <script> // alert(2423) // console.log("423"); fun
2021-10-22 11:16:12
100
原创 异步的学习
(1)promise1：实现原理主要是通过回调函数来实现，内部封装了回调函数，通过then方法链式调用，将异步的代码以同步的形式表现出来。2:promise的特点状态只有三种：等待，成功，失败状态的改变只能改变一次3：promise的缺点一旦执行不能取消，出现错误要通过回调函数捕获4：promis构造函数调用和promise的链式调用的区别构造函数的调用是立即执行的new Promise((resolve, reject) => { console.log('new Promi
2021-09-22 09:21:48
144
原创 面经总结2
1：实现sleep函数。等待指定的时间再执行function spleep1(ms,fun){ setTimeout(() => { fun(); }, ms);}spleep1(1000,()=>{ console.log("132");})案例2：css的优先级a,不同级的优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性b,同级的优先级
2021-09-14 09:47:47
107
原创 vue的基础知识2
1:vue的基本原理是怎么样的？vue数据的响应式原理？（这个回答要很全面，涉及到mvvm，钩子函数用法，v-model等等）1：响应式原理：是变量data和propos中的所有属性，通过object.definproperty转换成getter和setter变成响应式的，然后查看rander函数中是否用到了data或者propers中的数据，是的话对改属性进行依赖收集。当改属性被修改的时候会触发setter,通知刚刚收集好的依赖进行更新，每一个组件实例都绑定一个wathcher，当数据发生改变会通知它
2021-09-12 10:42:29
133
原创 vue知识总结基础篇
1：vue生命周期1）创建前(beforeCreate)初始化vue的实例对象，不能获取data和props中的数据，dom还没有进行渲染2）创建后（created）vue实例已经创建，可以获取data和props中的数据，dom还没有进行渲染3，载入前（beforeMount）已经进行了虚拟dom的渲染4，载入后（mounted）进行了真实的dom和数据的渲染5，更新前（beforeUpdate）数据更新之前6，更新后（updated）数据更新之后7，销毁前（beforeDest
2021-09-08 22:07:08
767
原创 面经的总结
1：懒加载是怎么实现的？懒加载就是按需加载的意思，我们通过将一个大的资源文件，打包成多个小的资源文件，当我们点击前端路由的时候就会按需的加载js文件，这样可以缩短首屏时间，提高性能。2：重排和重绘1：重排就是当元素的布局和排列方式发生改变的时候会造成重排。2：重绘的话就是当元素的外观发生改变的时候，会引起重绘。a:引起重排的原因有：增加，删除元素元素中字体大小，内容的改变元素的大小，位置的改变第一次加载页面的时候浏览器窗口缩放的时候b:引起重绘的原因有：字体颜色的改变背景颜色的改变
2021-08-26 00:02:30
113
原创 webpack学习与实践第二篇
1：Js的兼容性处理：第一种方法：安装：npm i babel-loader @babel/core @babel/preset-env -Dmodule:{ rules:[ { test:/\.js$/, exclude: /node_modules/, loader:'babel-loader', options:{ //指定兼容的处理
2021-08-22 16:14:04
154
原创 webpack学习与实践第一篇
1：webpack是什么？是模块打包工具，它会将前端的所有的资源文件（js,css,json,img,less)都会作为模块处理。模块的依赖关系进行静态的分析，生成对应的静态资源。2:什么是loader?webapck本身只能处理js/json模块，如果要加载其他的模块，需要使用对应的loader,进行转换、加载。loader本身也是运行在node.js环境中的javascript模块，它是一个函数，接受源文件作为参数，返回转换的结果。3：什么是插件？可以完成一些loader不能完成的功能，在we
2021-08-22 11:10:06
129
原创 call, apply,bind
1：他们主要是用来改变this的指向对象的2:call它和apply的区别就是参数不一样，call的参数传的是数组，apply传的是单个参数，他们必须是函数去调用他们。是立即执行的3：bind也可以将一个对象绑定给一个函数，它是永久绑定不能改变，返回的是一个函数，不是立即执行，要通过函数的返回值调用...
2021-08-02 10:23:42
78
原创 事件的循环机制
1：js它是一个单线程的所以每次操作只允许一个主线程，js它是非阻塞的当我们要执行异步任务的时候会采用事件循环来解决。2：对于同步代码执行中所调用的函数的执行环境放到执行栈中去，如果执行环境中也有函数同样也会将其 放入执行栈中，当遇到异步函数的时候，主线程会暂时挂起异步函数，当异步函数有返回结果的时候我们会将异步函数的回调函数放到事件队列中去，主线程执行执行栈发现执行栈为空的时候，主线程就会将事件队列中的第一个元素的执行环境放到执行栈中进行执行，每次执行都会先判断执行栈中有不有任务，没有任务就去执行事件队
2021-08-01 21:31:09
128
原创 防抖和节流
1：函数在指定时间内只会触发一次，具体实现方法第一次触发函数的时候，延迟delay时间执行，如果在delay时间段内再次触发该函数，则重新开始计时如果delay时间段内没有触发该函数，则执行该函数 function bunde(fn ,depaly) { let timetar=null; return function() { if(timetar) { clearTimeout(timetar); } timetar=setTime
2021-07-25 15:54:35
127
原创 深拷贝和浅拷贝
1：浅拷贝就是指赋值对象的一层给另外一个对象，深拷贝表示把一个对象的每一层都赋值给一个另外一个对象，让这两个对象没有一点关联，深拷贝和浅拷贝只针对于引用类型。浅拷贝的方法：Array.assign()function clone(obj) { return Object.assign(obj, {}) }for in:function clone(obj) { var target={}; for(var key in obj) { if(obj.h
2021-07-25 15:35:45
108
原创 闭包的作用
1：两个函数嵌套，内部的函数能够访问外部函数中的变量。就会形成闭包，闭包是隐藏的，不会造成全局的污染，缺点就是，闭包中的变量会造成内存溢出，因为这些变量不会被垃圾回收。
2021-07-25 14:04:39
163
原创 new的原理
1：首先会创建一个对象2：创建构造函数上面的属性和方法给这个对象3：将这个对象的__proto__的属性赋一个构造函数的protypeof<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> </title> <script> // alert(2423) // console.log("423"); fun
2021-07-25 13:18:19
133
原创 this的指向的问题
我们看调用函数的是什么，this一般指向的就是什么，如果是构造函数this指向的是构造函数所创建的实例，如果是一个对象调用一个函数，this指向的是这个对象，如果是直接调用函数this指向的是windows,我们也可以通过call,aplly，bind改变this的指向对象...
2021-07-25 11:10:19
85
原创 typeof和instanceof的实现原理
1：typeof判断基本数据类型可以准确的判断，除了null,会被判为object类型，因为js底层的数据存储，前三位表示的是数据类型，而null全部的位数是0,object类型前三位是000，所以用typeof判断数据类型的时候被误判是object数据类型，typeof判断对象的数据类型的时候只能判断object和function两种。2：我们可以通过object.tostring.call()准确的判断基本数据类型和引用的数据类型。3：instanceof判断数据类型的时候会基于原型链去判断，例如：
2021-07-25 10:56:49
576
原创 原型的总结
举个生活中的例子，我没有房子，但是我父亲有我可以住我父亲的房子，那我父亲就相当于原型，原型，实例，构造函数的关系，构造函数有一个protype属性和他所创建的实例对象的属性__proto__指向同一个原型，原型上面有一个construct的属性指向构造函数。为什么要有原型？原型上面主要是共享属性和方法给所有的实例，因为构造函数创建实例的时候，会将构造函数中的属性和方法重新创建然后赋值给所有的实例，显然我们是没有必要创建那么多同名却不相等的方法，和属性。原型链：因为每一个属性都有一个__proto__
2021-07-25 09:58:05
111
原创 前端计算机网络常见面试题目总结
1：说一下 http 和 httpshttp：是超文本传输协议，是目前互联网运用最为广泛的协议，他主要是服务器和客户端传输获取数据的一个桥梁，http是明文传输，如果攻击者窃取了服务器和客户端传输的报文，很容易被读懂，因此http不适合传输比较铭感的信息。https:安全套接字层超文本传输协议HTTPS，就是在http基础上加入了ssl层,就是通过ssl对数据进行了加密，因此https要比http安全。2：http的缺点1：通信使用明文，内容可能被窃取2：不验证通信方的身份容易遭遇伪装3：无法证
2021-07-20 21:26:44
1096
6
原创 http协议
请求方法：put:用来传输文件,要求在请求报文主体中包含文件的内容,但是他自身不带验证机制.head:获取报文的首部delete:删除文件,他自身不带验证机制.options:用来获取服务器支持那些请求方法tract:追踪路径发送请求的时候:在Max-Forwards首部字段中填写输入的数值,每经过服务器就减一,当数值减到0时,就服务器发起响应connect：要求和代理服务器建立隧道，通过ｓｓｌ进行加密，经过隧道http：特点持久连接：通过三次握手和四次挥手，能够减少tcp的连接和断开的开
2021-07-18 16:33:22
83
原创 面试题收集１
１：语义化在html5没有出现之前,都是一堆的没有语义的冷冰冰的标签。以前的页面，一上来就是一堆的div+css, 为了解决这个问题提出了语义化标签.语义化标签的好处(1):通过见名知意的标签,方便开发者写界面(2):更符合W3C统一的规范标准，是技术趋势。(3):没有设置样式时浏览器的默认样式也能让页面结构很清晰。(4):支持更多的设备。屏幕阅读器会完全根据你的标记来“读”你的网页。更好的支持浏览器的阅读模式等。(5):有利于SEO(搜索引擎优化)。和搜索引擎建立良好沟通，有助于爬虫抓取更多
2021-07-04 16:47:39
90
原创 双飞翼布局
1:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>try</title> <style> *{ margin: 0px; padding: 0px; } .counm{ float: left; } .content{ width: 100%; } .center{
2021-06-25 22:00:53
97
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人