- 博客(53)
- 收藏
- 关注
RSS订阅原创 Google Analytics 优化/Google Analytics加载失败导致阻塞的解决方法
Google的服务能用的非常有限了，Google Analytics之前还算正常，近期经常处于pending状态，多是googletagmanager.com/gtag/js挂起，导致整个页面数据都无法正常渲染。正常的给的代码是这样的插入上述代码后，网页渲染时执行的流程如下：1.下载https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y脚本（下面简称gtag.js），此过程不阻塞HTML的解析。
2023-03-17 18:27:47
2036
原创 Vue生命周期
Vue的生命周期常用到的8个钩子函数1、beforeCreate（将要创建数据监测、数据代理，无法通过vm访问到data中的数据，medthods中的方法）2、created（创建数据监测、数据代理完毕，可以通过vm访问到data中的数据、methods中配置的方法。）3、beforeMount（将要挂载DOM，页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。）4、mounted（挂载完毕，页面中呈现的是经过Vue编译的DOM，所有对DOM的操作，最终都有效；）注：一般在
2022-04-01 21:37:14
368
1
原创 Vue中的watch与computed
一、计算属性computed（一个数据受多个数据影响）1.支持缓存，只有依赖数据发生改变，才会重新进行计算2.不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.如果computed属性值是函数，默认走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。二、侦听属性watch:（一个数据影响多个数据）1.不支持缓存，数据变，直接回触发相应的操作；2.watch支持异步；3.监听的函数接收两个参
2022-03-30 22:12:01
2558
原创 webpack优化前端性能
一、webpack来优化前端性能首先，用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。压缩代码：删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUhlifyPlugin来压缩JS文件，利用cssnano（css-loader？minimize）来压缩css利用CDN加速：在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参
2022-03-26 22:00:44
3492
原创 webpack详解
一、什么是webpack1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包）下面来说一下模块和打包的概念！2、前端模块化：前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发）ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
2022-03-24 21:38:55
62838
4
原创 前端知识体系（Vue2.0）
1、css预处理器：Sass、Less什么是css预处理器？css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这中语言进行css的编码工作。转化成通俗移动的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用”SASS：基于Rbuy，通过服务器处理，功能强大，解析效率高，需要学习Ruby语言，上手难度高于LESS。LESS：基于NodeJS，通过客户端
2022-03-21 21:32:43
1761
原创 JavaScript运行机制
一、单线程js是单线程，一个任务完成之后才能执行另一个任务。二、同步与异步：1、计时器（setTimeout,setInterval）2、ajax3、读取文件同步异步区别：注：同步程序执行完成后，执行异步程序。图中上面是同步的，下面是异步的。三、process.nextTick与setImmediate方法两个函数的执行顺序如下：1、同步2、nextTick3、异步4、setImmediate（当前事件循环结束执行）例子：setImmediate(()=>{ con
2022-03-10 20:45:23
677
原创 原型与原型链
一、原型对象的基本概念1、每一个对象都有它的原型对象2、它可以使用自己原型对象上的所有属性和方法let cat = { name: '喵喵'}//在cat原型上加了一个eat方法cat.__proto__.eat = function(){ console.log("吃鱼")}//此时cat对象就可以调用eat方法cat.eat();//吃鱼二、获取原型的方法1、是通过对象的__proto__(两个下划线)获取2、是通过构造函数的prototype属性拿到原型3、ES6通过类
2022-03-08 20:39:05
273
原创 回调地狱和Promise对象
一、回调地狱例子1：//获取奶茶的方法function getTea(fn){ setTimeout(() => { fn("奶茶") },500)}//调用获取奶茶的方法getTea(function(data){ console.log(data)//奶茶})//获取火锅的方法function getHotpot(fn){ setTimeout(() => { fn("火锅") },800)}//调用获取火锅的方法getHotpot(function
2022-03-07 20:29:42
214
原创 JS防抖和节流
一、防抖1、概念： 当用户触发时间过于频繁，只要最后一次事件的操作//实现：input框输入0.5秒后，控制台进行打印input输入内容//这样就实现了防抖的预期<html><style><input type="text"></style><scprit>let inp = document.querySelector("input");let t = null;inp.oninput = function(){ //如果
2022-03-07 17:08:33
326
原创 js闭包基本概念及应用
一、闭包概念：函数嵌套函数，内部函数就是闭包。1、闭包的经典例子：（如下）*function outerFun(){ let a = 10; function innerFun(){ console.log(a); }//a可访问外部函数变量的 return innerFun;}let fun = outerFun();fun();//打印102、注：但正常情况下，函数执行完成，内部变量会被销毁（销毁：释放内存空间）例子：function fun(){ let a = 10;
2022-03-07 10:48:42
279
原创 箭头函数与普通函数的区别，ES6中好用的模板字符串
一、箭头函数与普通函数的区别普通函数：例子：//函数声明的写法 function fun(){ reurn 100;}//或者函数表达式的写法const fun = function(){ return 100;}console.log(fun());//100箭头函数()中定义参数，如果只有一个参数，可以不写括号；{ } 中写函数体，如果函数体中只有返回值，可以不写return（写法2）const fun =() =>{ return 100;}//上面函数的另
2022-03-05 21:21:40
167
原创 如何使用ES2015中的let和const、js解构赋值的使用方法
一、ES6新特性1、let(定义变量，有块级作用域) const（定义常量，不能修改）介绍letlet和var的区别//var定义的变量没有块级作用域的概念//let定义变量有块级作用例子：if(true){ let a = 10;}console.log(a);说明:此时不能输出a的的值，由于let有块级作用域，属于局部变量。虽然在if语句中使用var定义a时可以输出，但之后开发我们还是会弃用var选用let。介绍const例子1：const a = 10;a
2022-03-05 19:39:12
531
原创 CSS渲染原理，优化策略
一、css渲染原理（Cascading Style Sheets）在介绍css渲染原理之前，我们简明扼要介绍一下页面的加载过程和浏览器渲染过程，有助于更好理解后续css渲染原理。1.1页面的加载过程和浏览器渲染过程1.1.1页面加载过程要点如下：浏览器根据DNS服务器得到域名的IP地址向这个IP的机器发送HTTP请求服务器收到、处理并返回HTTP请求浏览器得到返回内容（其实就是一堆HTML格式的字符串，因为只有HTML格式浏览器才能正确解析，这是W3C标准的要求。接下来就是浏览器的渲染过程
2021-10-30 15:19:43
3146
1
原创 BFC、IFC概念的布局规则、形成方法、用处
1、Formatting ContextFormatting Context（格式化上下文）：是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互之间的作用。...
2021-10-29 22:08:29
659
原创 css动画
一、transition语法值描述transiton-durationtransition效果需要指定多少秒或者毫秒才能完成transition-property指定CSS属性的name，transition效果transition-timing-function指定transition效果的转速曲线transition-delay定义transition效果开始的时候transition中文意思为过渡的意思，顾名思义，它就是专门做过渡动画的，比如一些
2021-10-25 20:43:47
548
原创 经典面试布局
介绍两个经典布局：一、圣杯布局和双飞翼布局简单介绍一下：这两种布局作为经典的三栏式布局是面试中的常客。两种布局都是两边两栏宽度固定，中间栏宽度自适应。 在HTML结构上中间栏在最前面保证了最先渲染中间提升性能（因为这两种布局都比较老，在现在浏览器中这点性能优化效果并不是很大），并且兼容性良好。两种布局的实现方法前半部分相同，后半部分的实现各有利弊，下面详细介绍一下两者的区别：二、圣杯布局首先，既然是三栏式布局我们需要3个div： <header>圣杯布局</header&g
2021-10-25 14:40:56
206
原创 移动端适配
一、移动端适配的必要性一般设计稿都按照375的尺寸设计。但是，现在每个手机都有不同的物理分辨率，导致每台设备的逻辑分辨率不尽相同，从而使375的设计稿还原基本是不可能的。（因为一个左右布局，如果左边写死，右边自适应，每个设备的右边所展示的内容大小就不尽相同，这就表现出来移动端适配的必要性）二、基本概念接下来我们来一起看几个概念：2.1 屏幕尺寸是以屏幕对角线的长度来计量的，计量单位为英寸。2.2 像素从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位。他指显示屏的画面上表示出来的最小
2021-10-22 21:18:55
672
原创 javaScript split()方法
定义和用法split()方法用于把一个字符串分割成字符串数组语法：stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。返回值一个字符串数组。该数组是通过在separator指
2021-10-19 15:07:52
340
原创 JS命名空间
命名空间namespace（某些语言中叫package），是一个在静态语言中常见的概念。它可以帮助我们更好地整理代码，并可避免命名冲突。举一个栗子，如果有两个人都叫小明，我们很难区分和引用这两个人。但如果我们在他们前面加上命名空间，比如：北京的小明和上海的小明，那么区分起来就容易的多了，也不会因为重名而找错人了。但是，JS中并不提供原生的命名空间支持。在JS中创建的任何对象都默认是全局对象。在现代的大规模JS开发中，不采用命名空间会造成非常糟糕的命名方式，比如用前缀命名函数和变量，导致代码丑陋不可读。当
2021-10-19 14:39:51
254
2
原创 采购项目总结
采购项目圆满结束，下面我将会对这次出现的问题、对应解决方法以及成长收获做一下简要的阐述。问题一：在此项目中，我负责后台系统几个界面的开发。由于第一次接触SMPE框架，对其不了解，导致排期过程中无法对自己开发时间进行合理的预估，并且开发前浪费大量的时间对其进行熟悉，大大耽误开发效率也影响自己的学习时间。解决方法：确定开发前快速阅读框架代码，通过询问张凯杰了解该框架各个模块功能和用法，在一天左右的时间对其进行大致了解，不影响界面的开发时间。问题二：项目中遇到一些动态表头数据渲染、合并单元格等未接触
2021-09-22 21:14:25
208
原创 前台-平安科院（项目）总结
平安科院项目总算是过一阵子了，目前处于测试阶段。这个项目我被分管到前端微信公众号开发，项目开发过程中遇到了很多问题和困难，我做了一下总结，以便后期查看：（此项目基于vue来写的）NO.1 Question（微信分享）项目初期，由于第一次进行微信公众号的开发，其中一个需要写功能就是将自己拼的链接分享给微信好友。于是我便去查看微信开发文档.1）首先要先有公众号，然后获取授权、并拿到openid以及分享参数。总之，我们前端要做的工作就是拿到微信code码向后端开发人员要数据。下面是前端js拿微信code
2021-09-07 16:03:48
129
原创 springcloud
Spring Cloud是一系列框架的有序集合，她可以实现服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控。服务注册发现（Eureka）相当于zookeeper，好处是服务调用方不直接依赖于服务提供方，保证服务高可用服务降级（Hystrix）可以保证某个服务提供方的异常不会影响整体系统的稳定。数据监控（Zuul）Zuul 是在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架 相当于网关配置中心（Archaius）配置管理API，包含一系列配置管理API，提供动态类型化属性、
2021-05-30 11:13:10
60
原创 java反射
反射是框架设计的灵魂（使用的前提条件：必须先得到代表的字节码的Class，Class类用于表示.class文件（字节码））一、反射的概述JAVA反射机制是在运行状态中，对于任意一个类，都能够知道这个类的所有属性和方法；对于任意一个对象，都能够调用它的任意一个方法和属性；这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。要想解剖一个类,必须先要获取到该类的字节码文件对象。而解剖使用的就是Class类中的方法.所以先要获取到每一个字节码文件对应的Class类型的对象.以上的总结
2021-05-09 15:26:58
85
原创 Java #{}和${}区别
介绍 MyBatis中使用parameterType向SQL语句传参，parameterType后的类型可以是基本类型int,String,HashMap和java自定义类型。在SQL中引用这些参数的时候，可以使用两种方式#{parameterName}或者${parameterName}。#{} #将传入的数据都当成一个字符串，会对自动传入的数据加一个双引号。例如：order by #{parameterName} //或取Map中的value#{Key}也是一样操作。假设传入参数
2021-05-02 14:32:24
296
原创 设计模式
设计模式（design pattern）设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 是对面向对象设计中反复出现的问题的解决方案使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。Java设计模式贯彻的原理是：面向接口编程，而不是面向实现。其目标的原则是：降低耦合，增强灵活性。设计模式分类：一、创建型模式创建型模式是用来创建对象的模式，抽象了实例化的过程，帮助一个系统独立于其关联对象的创建、组合和表示方式。所有的创建型模式都有两
2021-04-18 16:39:25
80
原创 Java IO流
IO流IO流基础字节流字符流Properties字符通向字节对象的流打印流IO流基础表格 输入流 输出流字节流 InputStream OutputStream字符流 Reader Writer字节流所有都需要抛出异常OutputStream:抽象类，表示输出字节的所有的超类。FileOutputStream把内存中的数据写入到硬盘的文件当中。FileOutputStream(String name);//创建一个向具有名称的文件中写入数据的输出文件流FileOutputS
2021-04-05 12:04:31
77
原创 什么是Springboot
springboot的介绍每当我学习新的框架时，都会分为三部分，它是什么？有什么用？怎么用？，当然今天我也会以这种方式介绍springboot首先它是什么？它其实就是基于spring的一个框架其次它有什么用？再说它有什么用之前，我们可以先回想一下我们之前开发中的问题?第一:配置文件太多，太过于复杂，第二：依赖的版本太多，而且容易冲突，第三：部署的项目还需要外带tomcat，这多麻烦啊，极大拉低了我们的开发效率，一天啥也没干，尽搞这些环境配置了。所以我们可以用到springboot来解决上述问题。
2021-03-21 12:28:33
119
原创 泛型介绍
当将一个对象放入集合中，集合不会记住此对象的类型，当再次从集合中取出此对象时，改对象的编译类型变成了Object类型，但其运行时类型任然为其本身类型。List list=new ArrayList();list.add(new Random());list.add(“asd”); //list并没有识别"abc"是字符串类型，而是当作Object进行处理String str=list.get(0);//语法错误，需要编程实现类型转换注意：问题1进行数据的强制类型转换之前必须进行类型判断，Class
2021-03-14 08:33:45
159
原创 linux介绍
一、Linux是什么：1、整个计算机系统可以分为硬件和软件两大部分。毫无疑问，Linux运行于计算机之上，肯定是属于软件。为了让计算机系统更好的分配计算机资源，因此在硬件和各种应用程序之间，便有了操作系统的概念。而Linux正是操作系统这样一种软件。他支持多用户，多任务，可以运行在多进程，多cpu的主机上。并且具有稳定，免费，开源，安全性高等特点。2、并不是所有的机器都可以不经改版而可以直接运行Linux系统。众所周知，操作系统直接向下面向的是计算机硬件Linux，在开发过程要参考不同硬件的功能函数。而
2021-03-08 16:07:22
115
原创 Spring IOC和AOP基本原理
一、IOC（Inverse of Control）控制反转1.依赖注入DI（dependency injection）所谓依赖，从程序的角度看，就是比如 A 要调用 B 的方法，那么 A 就依赖于 B，反正 A 要用到 B，则 A 依赖于 B。所谓倒置，你必须理解如果不倒置，会怎么着，因为 A 必须要有 B，才可以调用 B，如果不倒置，意思就是 A 主动获取 B 的实例：B b = new B ()，这就是最简单的获取 B 实例的方法（当然还有各种设计模式可以帮助你去获得 B 的实例，比如工厂、Loca
2021-02-21 11:01:55
1102
原创 数据结构（C语言）——线性表一些较难理解的操作讲解
首先介绍一下什么是线性表：线性表分为：顺序表：顺序存储的线性表，用一组地址连续的存储单元依次存储表中数据元素。链式表：又分为单链表双向链表（每个节点都有两个指针，分别指向前驱和后继系结点）循环链表（又分为 循环单链表：尾节点的后继指向头节点、循环双向链表：在循环单链表的基础上，头结点的前驱指向尾节点）静态链表（用数组来实现的线性表，结点的指针域使用的是相对地址）em…线性表大概就是这样的接下来我想分享一下我个人觉得一些比较难理解的线性表的操作，我加了一些个人的理解，希望大家多多支持?????
2021-01-30 11:14:04
1105
原创 SDK和API到底是什么？如何区分？
SDK就是Software Development Kit 的缩写，翻译过来——软件开发工具包。SDK被开开发出来就是为了减少程序员的工作量的，可以说辅助开发某一类软件的相关文档、范例和工具的集合都可以叫做SDK。API就是能够轻松实现和其他软件组件的交互，API协议就是规定不同组件交互时候的规则。换句话说API是一些预先定义的接口，或指软件系统不同组成部分衔接的约定。举个栗子：最后，贴近生活讲讲两者的关系：有一杯密封饮料，它的名字叫做“SDK”。饮料上插着吸管，吸管的名字叫“API”。把你叫做“X
2021-01-28 15:24:06
1685
9
原创 埋点
基本概念：所谓埋点就是在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑，包括访问数，访客数，停留时长，页面浏览数和跳出率。这样的信息收集可以大致分为两种：页面统计、统计操作行为。数据埋点方式：由于产品处于早期，所以考虑使用第三方统计工具来采集数据，分析数据，如友盟、神策、Talkingdata、GrowingIO等。埋点的内容：埋点大致分为两部分，一部分是统计应用页面访问情况，即页面统计，随页面访问动作发生时进行上报；另外一部分是统计应用内的操作行为，
2021-01-26 20:46:23
220
原创 举例说明——xiaopiu切换状态使用技巧
如何让一个页面集合从界面外飞进去界面内？第一，我们需要对此小集合进行状态设置，选中该集合，点击右上角加号，出现状态1标题栏，第二，我们便可以通过拖拉该集合进行状态1形态的改变，例如我的原始态是该集合在页面内,状态1是该集合被拖拉在在页面外第三，选中该集合点击事件后会出现以下状态再次点击添加事件，由于这个事件类型属于状态的切换，因此选择事件类型为定时，之后进行以下设置，如下：最终就可完成集合状态的切换功能。希望能帮到大家。...
2021-01-20 22:39:54
2566
1
原创 spring复盘
得到对象: Students s = new Student() Class.forName(“”).newInstance(); 工厂方法(在里面定义一个静态方法)模式称为：创建模式 sping配置文件可以实现(MVC框架)Struts JSF webwork shale(JSF) sping tasptnySpingIOC AOPSping 框架里面 有IOC AOPSping 也推出了MVC还有 Email管理。 还有自己的DA
2021-01-16 15:08:44
192
1
原创 循环依赖
什么是循环依赖？顾名思义，循环依赖就是A依赖B，B又依赖A，两者之间的依赖关系形成了一个圆环，通常是由于不正确的编码所导致。Spring只能解决属性循环依赖问题，不能解决构造函数循环依赖问题，因为这个问题无解。接下来我们首先写一个Demo来演示Spring是如何处理属性循环依赖问题的。Talk is cheap. Show me the code第一步：定义一个类ComponentA，其有一个私有属性componentB。package com.tech.ioc;import org.spri
2021-01-10 11:37:51
1483
原创 java配置
1、Java配置类装配bean既然是通过Java代码来装配bean，是需要我们自己通过配置类来声明我们的bean。我们先通过@Configuration注解来创建一个Spring的配置类，该类中包含了bean的创建细节——1.1、 导入jar包或引用maven：spring-aop-5.0.14.RELEASE.jar 点这里如果是maven工程，代码如下：org.springframeworkspring-test5.3.2test1.2、 写一个生成Bean的类文件（类似于xml文
2020-12-20 13:08:48
304
1
原创 java进阶
一、File 类概述文件 和 目录路径名 的抽象表达形式Java中把文件或者目录（文件夹）都封装成 File对象我们要去操作硬盘上的文件，或者文件夹只要找到 File这个类即可File类对象，只是路径名的 抽象表示形式，即使该文件在操作系统上并不物理存在，也可以创建这个路径所表示的File对象构造方法File(String pathname)：通过给定 路径名字符串 转换为 抽象路径名 来创建一个新 File 实例windows中的路径或文件名不区分大小写，但是最好别这样，跨平台可能
2020-12-13 16:35:31
95
原创 反射
一、反射的概述JAVA反射机制是在运行状态中，对于任意一个类，都能够知道这个类的所有属性和方法；对于任意一个对象，都能够调用它的任意一个方法和属性；这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。要想解剖一个类,必须先要获取到该类的字节码文件对象。而解剖使用的就是Class类中的方法.所以先要获取到每一个字节码文件对应的Class类型的对象.以上的总结就是什么是反射反射就是把java类中的各种成分映射成一个个的Java对象例如：一个类有：成员变量、方法、构造方法、包等等信
2020-12-06 16:37:26
77
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人