马小兜--CSDN博客

原创前端性能优化的七种方法

前端性能优化主要有七种方法，包括减少请求数量、减少资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化 1、减少请求数量1.1 图片处理1.1.1 雪碧图雪碧图是根据css sprite音译过来的，就是将很多小图标放在一张图片上就称之为雪碧图，可以减少网站http请求数量，但是当整合图片比较大的时候，一次加载比较慢，随着字体图片、svg图片的流行该技术慢慢退出了舞台1.1.2 Base64将图片的内容以Base64格式内嵌到HTML中，可以减少http请求数量，但是

2020-08-06 17:26:33 25060 4

原创面试常考的Vue知识点

一、对于MVVM的理解MVVM是Model-View-ViewModel的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑View代表UI组件，它负责将数据模型转换成UI 展现出来ViewModel监听模型数据的改变和控制视图的行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行交互的，Model和ViewModel之间的交互是双向的，因此Vie

2020-07-26 15:05:34 420 2

原创由浅入深 65个JS常考面试题

由浅入深逐个击破 JS常考面试题（上篇）1、介绍一下JS的基本数据类型，值是如何存储的？JavaScript一共有8种数据类型，其中有7种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值）和BigInt（es10新增）；一种引用类型Object（本质上是由一组无序的名值对组成的），里面包含function、Array、Date，JS不支持任何自定义类型的机制，所有的值都是上述的八种数据类型之一。如何存储？？？基本数

2020-07-23 09:49:41 1101

原创如何给localStorage设置过期时间

ES5扩展Storage思路比较简单，就是存储一个时间戳，下次取值的时候验证时间戳就可以注意：localStorage存储的时候只能存储字符，存入的时候要将对象转换成json字符串，读取的时候也要解析Storage.prototye.setExpire=(key,value,expire)=>{ let obj={ data:value, time:Date.now(), expire:expire};localstorage.setExpire(key,JSON.string

2020-09-29 21:35:36 674

原创 JS数组去重（包含对数字、字符串、数组和对象）

对于一般的数组去重我们可以使用indexOf()去重。但是对于数组中包含数组或者对象，使用indexOf()难以实现function unique(arr){ //存储去重数字或者字符串 var newArr=[]; var newArr1=[]; for(var i=0;i<arr.length;i++){ if(!(arr[i] instanceof Array)||!(arr[i] instanceof Object)) { if(newArr.inde

2020-09-28 08:06:41 1105

原创使用js高效地将扁平的数据转换成树形结构

当我们需要将一维数组转换成一个多层结构的时候，最简单但是最慢的就是使用多个for循环嵌套，但是这样做有一些缺点，那就是效率太低，而且有多少层就需要用多少个for，现在我们可以使用一种高效的手段将一维的扁平数组转换成一个多层级的菜单结构。一维数组中每一个元素必须要包含以下属性：拥有一个唯一的id拥有一个parent_id,这个id指向父级的id扁平数组实例：var menu_list = [{ id: '1', menu_name: '设置', menu_ur

2020-09-27 21:52:51 1169

原创 JS的垃圾回收机制

为什么有垃圾回收机制？因为字符串、对象、数组没有固定的大小，所有当它们大小已知的时候，才能对他们进行动态内存分配。JS每次创建的时候，解析器都必须分配内存来存储实体，只有像这样动态分配了内存，最终都需要释放这些内存以便他们能够再次被利用，如果有些原因造成内存没释放的话，就会造成内存泄漏。JS不像C/C++，他有一套自己的垃圾回收机制。JS的解析器可以检测到何时程序不再使用一个对象了，当他确定了一个对象是无用的时候，他就会将这个内存释放掉。var a="hello world";var b="worl

2020-09-27 21:02:57 173

原创还在纠结前端的布局方式嘛

一、静态布局1、布局概念最传统、原始的Web布局设计。网页最外层容器有固定的大小，所有的内容都是以该容器为标准，超出宽高的话用滚动条实现（overflow:hidden）来实现滚动2、优点采用的是css2之前的写法，不存在浏览器兼容问题。布局简单3、缺点但是移动端不支持使用pc端的页面，两个页面的布局不一致，移动端需要自己另外自己设计一个布局并使用不同的域名来呈现4、实现方法最外层居中，使用固定的宽高，超出部分用滚动条例如百度首页外层的body设置了一个min-height:1000px，

2020-09-27 20:49:34 177

转载嵌套的promise执行顺序以及多个promise顺序执行

https://blog.csdn.net/yyk5928/article/details/103624315

2020-09-26 21:39:03 889 1

原创清除浮动的方法

1. 额外标签法（不推荐）即在最后一个浮动标签之后新添加一个标签，给其设置成clear:both<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" cont

2020-09-13 10:25:08 114

原创简述domready和onload事件的区别

58同城笔试题简述domready和onload事件的区别？图片的onload和domready和页面onload的先后顺序，并简述原因。、Dom文档加载的步骤：解析html结构加载外部脚本和样式表文件解析并执行脚本dom树构建完成加载图片等外部文件页面加载完毕DOM ready、页面 Load、图片LoadDOM ready是在第四步完成之后触发图片 Load是在第五步完成之后触发页面Load是在第六步完成之后触发由此可见三者执行顺序是DOM ready->图片 L

2020-09-12 08:39:28 1005

原创 Vue的computed计算属性和watch的异同

computed和watch的异同不同点：触发条件不同computed计算属性会依赖于它的data属性，只要是依赖的data属性有变动的话，则自定义重新调用计算属性执行一次watch则是在监控data属性值发生变化的时候，其余会自动调用watch回调函数执行速度不同computed计算属性的值是从缓存中获取的，而不是重新编译执行一次，因而其性能要高一些，尤其是在data属性没有发生变化的时候，而重复调用computed回调函数使用方式不同computed计算属性的回调函数方法可以直接在页面

2020-09-04 09:26:27 882

原创还在纠结什么时候用v-if和v-show吗

vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示，但是他们控制的原理是不同的。v-if原理v-if控制元素显示或者隐藏是把整个dom元素整个地渲染或者删除，如果删除元素，也就是说页面中不存在这个dom元素，从而达到隐藏的效果；v-if每次切换的时候都会创建或者销毁元素，有较高的切换性能消耗v-if是惰性的，如果在初始条件为假的情况下什么也不会做，直到第一次条件为真的时候才会渲染条件块v-show原理v-show无论初始条件是什么，元素都会被渲染，也就是说dom元

2020-09-03 09:59:41 754

原创 vue中如何给生产环境和开发环境配置不同的baseURL

第一步：设置不同的接口地址找到文件config/dev.env.js对开发环境下设置接口'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: "/api/"})找到文件/config/prod.env.js给生产环境

2020-09-02 23:46:31 3985

原创树的重心（模板题）

树的重心：树的重心也叫树的质心。找到一个点,其所有的子树中最大的子树节点数最少,那么这个点就是这棵树的重心,删去重心后，生成的多棵树尽可能平衡。#include<iostream>#include<algorithm>#include<cstring>using namespace std;const int N=1e5+10;//用链表结构存储每个点的边int h[N]; //h[]用于存储每个点的头节点int e[2*N]; //用

2020-09-02 11:33:14 925

原创详解迷宫最短路问题

给定一个n*m的二维整数数组，用来表示一个迷宫，数组中只包含0或1，其中0表示可以走的路，1表示不可通过的墙壁。最初，有一个人位于左上角(1, 1)处，已知该人每次可以向上、下、左、右任意一个方向移动一个位置。请问，该人从左上角移动至右下角(n, m)处，至少需要移动多少次。数据保证(1, 1)处和(n, m)处的数字为0，且一定至少存在一条通路。输入格式第一行包含两个整数n和m。接下来n行，每行包含m个整数（0或1），表示完整的二维数组迷宫。输出格式输出一个整数，表示从左上角移动至右下角的

2020-09-02 10:20:51 1187

原创 leetcode每日一题之486.预测赢家

理解dp的本质：假设我是玩家1，对手是玩家2每一个格子是我作为玩家，设身处地地假设我本人或者我的对手面对着区间[i,j]，做出最好的选择后能领先的最高分数当我面对着[i,j]这个区间的时候，我作为一个玩家选择i位置或者j位置，那么我的对手只能选择[i+1,j]格子内的分数，而如果我选择了j，我的对手只能选择[i,j-1]格子内的分数。但是[i+1,j]和[i,j-1]内格子的分数如何计算呢？敲黑板：假如我选择了i，那么我的对手会领先[i+1,j]内的分数，而我新吸收了i位置的分数，所以我会比

2020-09-02 07:49:28 140

原创详解Vue.nextTick()方法

什么是Vue.nextTick()?在下次DOM更新循环结束之后执行回调函数。在修改数据之后使用这个方法获取更新之后的DOM，这是获取更新之后的DOM的Vue方法理解：将回调函数延迟到下一次DOM更新数据之后再调用，简单理解就是当数据更新了，在DOM中渲染后自动执行该函数。<template> <div class="hello"> <div> <button id="firstBtn" @click="testClick()" re

2020-09-01 13:27:01 534

原创为何Vue采用异步渲染

理解：因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以考虑性能问题，Vue会在本轮数据更新之后，再去异步更新视图原理：首先调用dep.notify()通知watcher进行更新调用watcher的subs.update()方法将watcher去重之后放到队列当中异步清空watcher队列源码：update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = tru

2020-08-31 08:53:21 465

原创一文弄懂webpack和gulp的区别

webpackwebpack是当下最热门的前端资源模块化管理和打包工具。侧重于模块打包，我们可以把开发中的所有资源（图片、js文件、css文件）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源核心代码：const path = require('path'); var webpack = require("webpack");const config = { entry: { main: './src/ind

2020-08-06 18:05:12 686 1

原创详解ajax、axios、fetch的区别

Ajax传统的ajax指的是XMLHttpRequest，最早出现的向后端发送请求的技术，隶属于原始的js中，核心使用XMLHttpReqyest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});Jquery ajax是对原生XHR

2020-08-06 09:17:24 249 1

原创跨域的七种方式

JSONP的优缺点优点：它不像XMLHttpRequest对象实现的ajax请求那样受到同源策略的限制，JSONP可以跨域同源策略它的兼容性更好在请求完毕之后可以通过callback方式回传结果缺点：他只支持get请求而不支持post等其他类型的HTTP请求它只支持跨域HTTP请求，不支持不同域的两个页面之间如何进行JS调用的问题jsonp在调用失败的情况下不会返回HTTP状态码jsonp需要后端配合返回指定格式的数据跨域（jsonp、ajax）jsonp：ajax请求受同源策略的

2020-08-06 08:35:23 187

原创 bootstrap清除浮动的方法

.clearfix:before,.clearfix:after{ content:""; diaplsy:table;}.clearfix:after{ clear:both;}//IE/6/7.clearfix { *zoom:1;}:after伪类在元素末尾插入一个包含空格的字符，并设置display为tabledisplay:table会创建一个匿名的table-cell，从而触发BFC(块级格式上下文)，因为容器内float的元素也是BFC，由于BFC有不能互相重叠的

2020-08-05 21:46:55 852

原创什么使JS闭包？有什么用处？用闭包写一个单例模式

什么是闭包？闭包就是能够访问到自由变量的函数，自由变量指的是在函数中使用的，但是既不是函数的参数也不是函数的局部变量的变量，由此可以看出闭包=闭包+函数能够访问的自由变量，闭包是JS 的一种新特性，其中一点就是可以将外部函数的变量保存在内存中，利用这个特性，我们可以用来实现类的单例模式。首先了解何为单例模式？闭包的应用？模仿块级作用域保存外部函数的变量。当执行上下文环境被销毁之后，变量仍然存在内存中，闭包函数仍然保留了这个对象的引用，所以这个对象不会被回收封装私有变量。通过使用闭包，我们可以通

2020-08-05 16:12:44 323

原创结合Vue谈谈MVVM的理解

一、MVCMVC是Model-View-Controller的缩写，就是模型-视图-控制器Model：后端传递的数据View：看到的页面Controller:页面的业务逻辑MVC是单向通信，即View和Model，必须通过Controller来承上启下使用MVC的目的就是将M和V分开MVC和MVVM的区别并不是VM取代了C，ViewModel存在的目的在于抽离了Controller中展示的业务逻辑，而不是替代了Controller，其他视图操作业务还是应该放在Controller中实

2020-08-02 11:53:11 1060

原创详解浏览渲染原理

我们都知道JS有一个JS引擎，那么执行渲染也有一个渲染引擎，同样，渲染引擎在不同的浏览器中也是不同的。浏览器接收到HTML文件并转换成DOM树当我们打开一个网页时，浏览器都会去请求对应的html文件，虽然平时我们写代码的时候都会分为HTML、CSS、JS文件，也就是字符串，但是计算机硬件不理解这些字符串，所以在网络中传输的内容都是0和1这些字节数据。当浏览器接收到这些字节数据以后，它会将字节数据转换为字符串，也就是我们写的代码。当数据转换成字符串以后，浏览器会先将这些字符串通过词法分析转换成标记，这

2020-07-26 07:22:38 154

原创 JS中数组去重的九种方式

一、利用ES6中的Set方法去重Set为ES6中新增的对象，允许存储任何类型（原始值或引用值）的唯一值let arr = [1,0,0,2,9,8,3,1]; function unique(arr) { return Array.from(new Set(arr)) } console.log(unique(arr)); // [1,0,2,9,8,3]　　or6　　　　　　console.log(...n

2020-07-25 15:24:22 150

原创详解跨域问题

同源策略在说跨域之前，先来了解一下“同源策略”什么是源？源=协议+域名+端口号。如果两个url的协议、域名、端口号完全一致，那么这两个url就是同源的。我们可以通过window.origin或location.origin得到当前源。什么是同源策略？同源策略：不同源之间的页面不能互相访问数据。浏览器规定：如果JS运行在源A里，那么就只能获取源A的数据，不能获取源B的数据，即不允许跨域假设 wang.com/index.html引用了ergou.com/1.js,那么就说1.js运行在源w

2020-07-24 09:05:35 623

原创详解XSS攻击与CSRF攻击

什么是XSS攻击？XSS中文名称就是跨站脚本攻击。XSS的重点不在于跨站点而在于脚本的执行，那么XSS的原理是：恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候，那么嵌入到web页面中的script代码会执行，因此会达到恶意攻击用户的目的。XSS攻击分为如下几类：反射型、存储型、DOM-based型，反射型和DOM-based型可以归类为非持久的XSS攻击，存储型可以归类为持久性的XSS攻击。反射型XSS简而言之，代码出现在url中，作为输入提交到服务器端原理：反射型

2020-07-23 20:36:34 652 2

空空如也

空空如也