seimeii的博客

前端性能做过哪些优化

JavaScript中的数据类型

双飞翼布局和圣杯布局

【代码】清除浮动的三种方式。

BFC触发条件:根元素，即HTML元素position: fixed/absolutefloat 不为noneoverflow不为visibledisplay的值为inline-block、table-cell、table-caption作⽤是什么？防⽌margin发⽣重叠

左右固定宽，中间自适应（三栏布局）的方法

防抖原理没有防抖（只要输入一下就搜索 只要动一下值就变化）优化的两种方式（让输入完毕过1秒再查询）（延迟执行）-- 先等待再执行输入完毕立即查询，过2秒才能查询（立即执行）----先执行再等待...

computed:1. computed 是计算属性,也就是计算值,它更多⽤于计算值的场景2. computed 具有缓存性,computed的值在getter执⾏后是会缓存的，只有在它依赖的属性值改变之后，下⼀次获取computed的值时才会重新调⽤对应的getter来计算3. computed 适⽤于计算⽐较消耗性能的计算场景watch:4. 更多的是「观察」的作⽤,类似于某些数据的监听回调,⽤于观察 props $emit 或者本组件的值,当数据变化时来执⾏回调进⾏后续操作5.

CORS跨域 （前端不用动，后端设置Access-Control-Allow-Origin等）服务端进行接口请求设置，前端直接调用说明：后台设置前端某个站点进行访问接口代理通过修改nginx服务器配置实现代理转发前端修改，后端不用前端请求 a 地址，设置nginx服务，将 a 地址代理到 b 地址。如vue项目中可以在 vue.config.js 中设置：devServer: { host: 'localhost', // 主机地址 port: '8000', //.

疑问1：什么是options请求OPTIONS请求方法的主要用途有两个：1、获取服务器支持的HTTP请求方法；2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。这是浏览器给我们加上的，后端并没有做任何操作。疑问2：为什么会用到options请求这得从浏览器同源策略和跨域说起，具体可阅读也谈谈同源策略和跨域问题和浏览器同源政策及其规避方法，这里不在赘述。解决跨域问题的方法有很

var data = [ { "name": "手机", "childs": [ { "name": "iphone", "childs": [ { "name": "iphonex" }, { "name": "iphonexR" }, { "name": "iphonexS" } ]

let str ='1,2,3,4,123,1,2,3'第一种解法let str ='1,2,3,4,123,1,2,3';let arr = str.split(',');console.log([...new Set(arr)].join())https://blog.youkuaiyun.com/Maserati_8000/article/details/112775501

"1,2,3"变成[{content:1},{content:2},{content:3}]第一种写法let str = "1,2,3";let arr = [];let s1 = str.split(',');s1.map((item) => { let obj = {}; obj.content = item; arr.push(obj); })console.log(arr)第二种写法let str = "1,2,3"let arr = str.spl

数组<==>字符串1.数组转换成字符串 Array.prototype.join(‘分隔符’)var arr=[1,'w','er']console.log(arr.join()) // 1,w,erconsole.log(arr.join('.')) //1.w.erconsole.log(arr.join('')) //1wer2.字符串转换成数组 String.prototype.split(‘按什么切割的切割符’)var str='name=lxl&am

将 str = “1,2,3”, str2 =“ann,lili,john”转为：arr = [{id: 1,name: ‘ann’},{id: 2, name: ‘lili’},{id: 3,name: ‘john’}];代码如下：let arr = [];let s1 = str.split(',');s.forEach((item, i)=>{ let obj = {}; obj.id = item; arr.push(obj)})let s2 = str

利用ES6的Set方法function unique(str) { let arr = str.split(""); let newArr = [...new Set(arr)]; return newArr.join("");}

1.子元素 div{text-align:center} p{display:inline-block}2.淘宝分页： div{position:relative; left:50%; float:left;} p{position:relative; left:-50%;}3.利用diplay:table来解决：<div id="box"> <span><div id="inner">11111111111111111111&

vue 获取组件高度// 当前区域<div ref="element"></div> 12// 获取高度值 （内容高+padding+边框）let height= this.$refs.element.offsetHeight; //1001// 获取元素样式值 （存在单位）let height = window.getComputedStyle(this.$refs.element).height; // 100px1// 获取元素内联样式值（非内联样

这里介绍jquery的3个方法· text() text即设置或者返回文本内容· html() 设置或者返回html内容· val() 设置或者返回表单字段的值获取DOM元素的方法有8种通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）获取html的方法（document.documentElement）获取bod

Vue中获取DOM元素<div id="app"> <input type="button" value="获取元素" @click="getElement"> <h3 ref="myh3">今天天气真好啊</h3> </div> <script> var vm = new Vue({ el:'#app', data:

数组去重set把它变成数组（）展开运算符或者是Array.from()的方式不用ES6的方法怎么实现性能较好的方法每个数组都是一个堆内存数组去重(删除指定数组元素)indexOf 与 push 方法数组排序冒泡排序 每一轮比较后 当前数组中最大的放在末尾利用函数进行冒泡排序插入排序数组翻转数组排序（冒泡排序）快速排序（快速排序是最快的排序）数组扁平化的N种方法有这么一个五维数组flat（）先转换为字符串再转换为数组JSON.stri

1、如何让一个盒子垂直水平方向居中定位1 需要知道盒子的宽高定位2 盒子必须要有宽度和高度 但是不用考虑这个问题定位3 只兼容到IE9以上display：flex （IE10 移动端经常使用这个）js方法 js实现就是模拟css写样式6. 基本不怎么使用 display：table-cell 主要是控制文本的 所以要将盒子变成文本 固定宽高的父级...

过滤器使用一、全局过滤器二、局部过滤器一、全局过滤器export function getSex(value){ switch (value) { case 'man': return '男'; case 'woman': return '女'; default: return value; }};export function getDate(time){

1. 定位1 需要知道盒子的宽高2. 定位2 盒子必须要有宽度和高度 但是不用考虑必须是多少3. 定位3 只兼容到IE9以上4. display：flex （IE10 移动端经常使用这个）5. js方法 js实现就是模拟css写样式6. 基本不怎么使用 display：table-cell 主要是控制文本的 所以要将盒子变成文本 固定宽高的父级...

块级标签 特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；典型的块级标签有：<div> ，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>行内标签 特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！典型的行内标签有：<span>，&l

一、内联元素宽高的确定宽度：不受width的限制，有文字内容决定的，padding 和 margin 可以改变宽度。高度：不受height的限制，padding 和margin 也不能改变。可以通过line-height 和 font-size来改变。二、块级元素宽高的确定宽度：　　1、可以自行设置width的值；　　2、不设置宽度时的值为auto，默认宽度是父元素的宽度-自身的border-自身的margin。　　3、需要注意的是如果宽度写了100%，应该是元素内容的宽度（conte

文章目录一、基本概念二、JS如何设置获取盒模型对应的宽和高三、解决盒模型边距重叠—BFC一、基本概念基本概念：标准模型 + ie模型（1）标准模型 （宽、高）= content 的宽高（2）ie模型（宽、高）= content 的宽高 + padding 的宽高 + border 的宽高二、JS如何设置获取盒模型对应的宽和高1、内联样式的宽和高：dom.style.width/height2、渲染后的结果，只有ie支持 : dom.currentStyle.width/height3.

1. query：第一种 name引入 query传参<router-link :to="{ name: 'W', query: { id:'1234'，age:'12' }}"/>routes基于name设置：{ path: '/hhhhhhh', //这里可以任意 name: 'W', //这里必须是W component: W}然后就把path匹配添加到url上去：http://localhost:8080/#/hhhhhhh?id=1234&

我们经常需要把某个模式匹配到的所有路由，全都映射到同一个组件，例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染，那么我们可以在vue-router的路由路径中使用 “动态路由参数” 来达到这个效果1. 动态路径参数，使用 “冒号” 开头，一个路径参数，使用冒号标记，当匹配到一个路由时，2. 参数会被设置到 this.$router.params 中,并且可以在每个组件中使用this.$router.push({ name:"路由地址", par