前端
文章平均质量分 64
沈行的专栏
当时明月在,曾照彩云间。
展开
-
socket.io常见用法
socket.io常见用法转载 2022-08-29 14:48:18 · 756 阅读 · 0 评论 -
Threejs性能优化
three.js性能优化转载 2022-07-19 11:18:58 · 1525 阅读 · 0 评论 -
Dom事件类
dom事件原创 2022-06-08 09:52:16 · 79 阅读 · 0 评论 -
从url输入之后发生了什么事情
在浏览器输入url后会发生的过程:1.DNS对域名进行解析;2.建立TCP连接(三次握手);3.发送HTTP请求;4.服务器处理请求;5.返回响应结果;6.关闭TCP连接(四次挥手);7.浏览器解析HTML;8.浏览器布局渲染;1.浏览器对输入的地址补全,然后DNS域名解析 如果你搜索的是baidu.com的时候,实际访问的还是http://www.baidu.com,浏览器会将你没输入全的地址进行补充。2、找到服务器地址,建立TCP连接(三次握手)这里举个简单例子来了解什转载 2022-05-27 15:44:58 · 5221 阅读 · 4 评论 -
elementUI表格合并单元格详解
相信你肯定看了ElementUI官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们rowspan的参数需要自己做判断,根据数据的相同行(或列)进行合并;我们先看下结果:<template> <div class=""> <el-table :data="listData" :span-method="obje...原创 2022-03-19 15:04:26 · 4472 阅读 · 6 评论 -
ES2020新语法:可选链操作符 `?.`
项目中一个很常见的场景,从接口返回的数据,对象中的某个属性可能不存在,即 undefined ;或者尝试获取 DOM 元素,该元素不存在,即 null 。下面是 MDN 官方的例子,cat 属性可能不存在:const adventurer = { name: 'Alice', cat: { name: 'Dinah' }};如果想要访问 cat 的 name 属性,像下面这样可能会报错:const name = adventurer.cat.nameUnc转载 2022-03-17 10:19:56 · 1384 阅读 · 0 评论 -
前端object的相应方法
1.Object.assign():(1)是ES6新添加的接口,主要的用途是用来合并多个JavaScript的对象。(2)Object.assign()接口可以接收多个参数,第一个参数是目标对象,后面的都是源对象,assign方法将多个原对象的属性和方法都合并到了目标对象上面,如果在这个过程中出现同名的属性(方法),后合并的属性(方法)会覆盖之前的同名属性(方法)。基本用法如下:var target = {a : 1}; //目标对象var source1 = {b : 2}; //源对原创 2022-01-11 19:21:14 · 835 阅读 · 1 评论 -
前端算法相关
目录时间复杂度1、五大算法2、基础排序算法2.选择排序3.插入排序3、高级排序算法1.快速排序2.希尔排序4、递归运用(斐波那契数列): 爬楼梯问题5、数据树6、天平找次品时间复杂度口诀:插冒归基稳定,快选堆希不稳定稳定性: 同大小情况下是否可能会被交换位置, 虚拟dom的diff,不稳定性会导致重新渲染;1、五大算法1.贪心算法:局部最优解法2.分治算法:分成多个小模块,与原问题性质相同3.动态规划:每个状态都是过去历史的一个总.原创 2021-11-04 16:34:44 · 1028 阅读 · 0 评论 -
常见函数的四种类型有哪些
1、匿名函数1.匿名函数:定义时候没有任何变量引用的函数2.匿名函数自调:如果函数只执行一次(function(a,b){console.log("a="+a);console.log("b="+b);})(1,2);优点:节约内存空间,调用前和调用后内存中不创建任何函数对象。2、回调函数(callback)回调函数:如果一个函数作为对象交给其他函数使用let arr=[13,6,65,50,23]arr.sort(function(a,b){...原创 2021-11-03 15:11:29 · 7436 阅读 · 0 评论 -
手写indexOf
function indexOf(str, val){ let strLen = str.length, valLen = val.length for(let i = 0; i < strLen; i++){ let matchLen = i + valLen let matchStr = str.slice(i, matchLen) if(matchLen > strLen){ r.原创 2021-11-03 09:50:41 · 208 阅读 · 0 评论 -
前端项目性能优化
普通项目 页面加载 dns预解析 使用cdn 静态资源的压缩与合并 减少https请求 异步加载defer,async 服务端渲染ssr 多使用内存和缓存 页面渲染 css放前面,js放后面 减少dom查询,多次使用的保存为变量 减少dom操作,统一通过dom片段操作..原创 2021-10-25 18:04:54 · 132 阅读 · 0 评论 -
前端相关面试总结
目录CSS面试题1.盒模型2.如何让一个盒子水平垂直居中?3.BFC(Block Formatting Context) 是什么?应用?4.请描述一下 cookies,sessionStorage 和 localStorage 的区别?5.px和em,rem的区别6.解释下浮动和它的工作原理,清除浮动的方法?7.如何实现浏览器内多个标签页之间的通信?8.CSS隐藏元素的几种方法9.css 优先级确定10.简述下CSS的元素分类11.重绘和回流12、css3原创 2021-10-25 18:03:19 · 1100 阅读 · 5 评论 -
前端常见跨域解决方案(全)
引自:https://segmentfault.com/a/1190000011145364什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链3.) 脚本请求: js发起的ajax转载 2021-10-09 13:41:04 · 158 阅读 · 0 评论 -
简述BFC的原理及其应用
一、常见定位方案(1)普通流元素按照其在html的先后位置由上而下布局。(2)浮动布局(float)元素先按照普通流的位置出现,然后根据浮动方向尽可能的向左或向右偏移。(3)绝对定位(absolute)在绝对定位布局中,元素会脱离文档流。二、BFC概念BFC块级格式上下文,属于定位方案中的普通流。具有BFC特性的元素可以看作是隔了的独立容器,容器里的元素不会在布局上影响到外面的元素。简单的说:可以理解BFC是要给封闭的大箱子,箱子内的元素无论如何交换,都不会影响到外面的元原创 2021-09-15 22:01:47 · 531 阅读 · 0 评论 -
冒泡排序算法实现
冒泡排序,它的名字由来于一副图——鱼吐泡泡,泡泡越往上越大。思路:第一次循环,开始比较当前元素与下一个元素的大小,如果比下一个元素小或者相等,则不需要交换两个元素的值;若比下一个元素大的话,则交换两个元素的值。然后,遍历整个数组,第一次遍历完之后,相同操作遍历第二遍。图例:const arr = [1, 20, 10, 30, 22, 11, 55, 24, 31, 88, 12, 100, 50];function bubbleSort(arr){ for(let i = 0;原创 2021-09-10 00:23:00 · 101 阅读 · 0 评论 -
隐藏式滚动条但有滚动效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .inner{ width: 200px; height: 200px; border: 1.原创 2021-09-09 17:01:17 · 68 阅读 · 0 评论 -
哔哩哔哩,面试题
一面:1. 如何实现一个同花顺?写代码如何实现?(七张牌同一花色并且数字相连)2. display有哪些属性值?3. 块级元素与内联元素的区别?4. 冒泡排序的复杂度是多少?快排呢?5. 如何实现快排?6. JS的基本数据类型7. 获取DOM节点的几个方法?8. 如何给DOM节点上添加事件?9. 如何实现水平垂直居中?10. position的属性值有哪些?11. HTTP状态码有哪些?12. GET和POST的区别?主要问了这些,说是两天内会有通知。二面:1. 如何实现二原创 2021-09-08 23:34:26 · 327 阅读 · 0 评论 -
CSS中display和position的属性值有哪些?
display具有以下特性display:none、inline、inline-block、block、table、inherit、flex1、none:就是隐藏,不会占用文档流位置,不会占用空间(其他元素会占用他的元素)2、inline:行内元素3、inline-block:行内块元素,也即有块元素的一些特性,可以设置宽度、高度(width、height)边距等等4、block:块元素,独占一行,可以设置宽度高度(width、height)边距等等5、table:表格相关,..原创 2021-09-08 23:19:39 · 435 阅读 · 0 评论 -
html中块级元素和内联元素(行内元素)的区别
1.下表列出了内联元素和块级元素的主要区别html中内联元素和块级元素的区别 块级元素 行内元素 独占一行,默认情况下,其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化 可以设置width,height属性 行内元素设置width,height属性无效 可以设置margin和padding属性 行内元素起边距作用的只有margin-left、margin-right、padding-left、paddin原创 2021-09-08 21:34:38 · 140 阅读 · 0 评论 -
vue路由跳转方式
转自:https://www.cnblogs.com/miluluyo/p/11190648.htmlvue路由跳转有四种方式1. router-link2. this.$router.push() (函数里面调用)3. this.$router.replace() (用法同push)4. this.$router.go(n)一、不带参1.1 router-link<router-link :to="{name:'home'}"><router-lin.转载 2021-09-08 11:53:06 · 308 阅读 · 0 评论 -
Flex 布局教程:语法篇
转自:https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html目录一、Flex 布局是什么?二、基本概念三、容器的属性3.1 flex-direction属性3.2 flex-wrap属性3.3 flex-flow3.4 justify-content属性3.5 align-items属性3.6 align-content属性四、项目的属性4.1 order属性4.2 flex-grow属性...转载 2021-09-06 16:02:50 · 241 阅读 · 0 评论 -
js是单线程和EventLoop的个人理解
转自:https://zhuanlan.zhihu.com/p/257069622js 是单线程执行的,js中的任务按顺序一个一个的执行,但是一个任务耗时太长;那么后面的任务就需要等待,为了解决这种情况,将任务分为了同步任务和异步任务;而异步任务又可以分为微任务和宏任务。代码示例:console.log('script start');setTimeout(function() { console.log('setTimeout');}, 0);Promise.resolve转载 2021-09-06 13:57:57 · 130 阅读 · 0 评论 -
前端垂直水平居中的3种方式
CSS居中所有例子共用以下代码 <!--html--> <div class="outers"> <div class="inners"> </div> </div>绝对定位方法一:50%的父元素宽高减去自身宽高的50%/*css*/.outers { width: 500px; height: 300px; bo原创 2021-09-03 00:23:11 · 823 阅读 · 0 评论 -
前端项目优化
转自:https://zhuanlan.zhihu.com/p/147958620一,本文分为两部分普通项目优化 vue项目优化 防止XSS与XSRF(安全性)二,普通项目优化:页面加载阶段 页面渲染阶段一、 页面加载dns预解析 使用cdn 静态资源的压缩与合并 减少https请求 异步加载defer,async 服务端渲染ssr 多使用内存和缓存二、 页面渲染css放前面,js放后面 减少dom查询,多次使用的保存为变量 减少dom操作,统一通过dom片段转载 2021-08-31 13:42:07 · 3424 阅读 · 0 评论 -
前端大屏自适应js和css
转自:https://blog.csdn.net/qq_42033668/article/details/109717401分辨率1920*1080,其它分辨率的也可以试试。第一种方式(类似浏览器Ctrl+鼠标滚轮缩放),目前发现一个缺陷,用到了echarts 会出现鼠标焦点不对应head 里面加上 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">转载 2021-08-31 11:10:51 · 728 阅读 · 0 评论 -
前端常用字符串方法集合
一、字符串的属性和方法1.charAt()查找字符串2.indexOf()查找字符串下标3.lastIndexOf()查找字符串最后出现的下标4.replace()替换5.split()字符串分割为数组6.substr()提取字符串7.substring()提取字符串8.slice()字符串截取9.concat()字符串拼接10.大小写转换方法数组和字符串有很多相似的对方,比如数组和字符串都有以下方法:1. concat2. indexOf...原创 2021-08-30 00:52:48 · 2084 阅读 · 0 评论 -
前端中的深拷贝和浅拷贝及相应注意事项
讲到前端中的深拷贝与浅拷贝之前需要先简单了解下js中的堆与栈:1、堆和栈都是运行时内存分配的一个数据区(1)堆(heap)堆(heap)用于复杂数据类型(引用类型)分配空间,例如数组对象、object对象;它是运行时动态分配内存的,因此存取速度较慢(2)栈(stack)栈(stack)中主要存放一些(基本类型)的变量和对象的引用,(包含池、池存放常量),其优势是存取速度比堆要快,并且栈内的数据可以共享,但缺点是存在栈中的数据大小与生存期必须是确定的,缺乏灵活性2、js的变.原创 2021-08-29 15:46:20 · 1167 阅读 · 1 评论 -
前端常用数组方法集合
前端JavaScript常用数组方法集合原创 2021-08-28 22:27:20 · 3678 阅读 · 1 评论 -
前端面试系列-typeof 和instanceof 的实现原理(手写代码)
引自:https://blog.csdn.net/qq_39903567/article/details/115048977文章目录一、typeof二.instanceof 操作符instanceof 操作符实现原理原型链相关知识一、typeoftypeof 操作符的唯一目的就是检查数据类型,我们可以利用 typeof 来判断number, string, boolean, function, undefined, symbolvar str="string";console.log转载 2021-08-16 16:54:38 · 248 阅读 · 0 评论