- 博客(60)
- 收藏
- 关注
RSS订阅
原创 浏览器渲染页面的原理及过程
浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。2.构建渲染树（Render Tree）。3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。...
2022-01-15 10:29:24
5194
原创 前端实现pdf文件预览
1.后端返回的是pdf链接//可以直接使用iframe进行显示<template> <div> <iframe :src="url" type="application/x-google-chrome-pdf" width="100%" height="100%" /> </div></template> export default { data() {
2022-01-11 10:47:02
10380
原创 Vue3封装全局弹窗组件(结合el-dialog)
在main.ts中import App from "./App.vue";import SubDialog from '@/components/sub.js'let instance: any = null;instance = createApp(App)instance.use(SubDialog)instance.mount(document.getElementById("app")}在components下的sub.jsimport SubDialog from './SubD
2022-05-18 16:10:51
9478
9
原创 sass踩坑日记
sass文件作用于全局配置webpackloader: config => { const oneOfsMap = config.module.rule('scss').oneOfs.store oneOfsMap.forEach(item => { item .use('sass-resources-loader') .loader('sass-resources-loa
2022-04-22 11:04:07
1478
转载 封装全局el-dialog组件
使用this.$dialogPopup({ title: '测试', width: '800px', coexist: false,//控制上一次弹窗是否保留，默认false option: { text: '你好呀' }, cancelClick: () => { console.log('你点击了取消') }, saveClick
2022-04-12 17:14:03
1793
原创 前端跨应用跳转解决方案（qiankun）
一：使用框架（qiankun）yarn add qiankun # or npm i qiankun -S二：使用方法（主应用和微应用都使用hash）主应用中 main.jsimport { registerMicroApps, start } from 'qiankun'//需要引入的微应用const apps = [ { name: 'pia', entry: 'http://微应用域名/', //微应用的访问域名 container: '#pia'
2022-03-16 17:15:07
3784
原创 nvm功能及使用
所谓nvm就是一个可以让你在同一台机器上安装和切换不同版本node的工具。这里是一篇安装及使用教程。第一步：下载nvm可以到这里下载链接：https://pan.baidu.com/s/1wW4fH8XnXRiachXHb1Pckw 密码：pn90或者到github上下载最新版本https://github.com/coreybutler/nvm-windows/releasesnvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置nvm-setup.zip：这是一个安装
2022-03-16 17:12:56
1462
原创 如何利用 SCSS 实现一键换肤
环境准备首先我们需要安装 scss 解析环境npm i sass// 注意 sass-loader 安装需要指定版本 如果安装最新版本会报错 this.getOptions 这个方法未定义npm i -D sass-loader@10.1.0// 利用 normalize.css 初始化页面样式npm i -S normalize.css小技巧这里讲一个小技巧，定义的时候可以先定义一个基准变量 base-param 然后其他状态的值可以依赖这个 base-param 进行缩放或放大实现
2022-02-15 15:51:47
2166
2
原创 linux系统中安装node
node.js安装1.node包的下载 可以使用命令下载node包： wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz 也可以手动下载所需要的node版本的包（手动下载node版本的包，在这里就不演示了）2.解压文件： tar -zxvf node-v14.15.4-linux-x64.tar.xz3.进入文件夹： cd node-v14.15.4-linux-x644.设置全局： s
2022-02-14 18:16:52
1125
转载 配置搜索引擎访问的内容robots.txt
一、robots.txt是什么？robots.txt是一个纯文本文件，在这个文件中网站管理者可以声明该网站中不想被搜索引擎访问的部分，或者指定搜索引擎只收录指定的内容。当一个搜索引擎（又称搜索机器人或蜘蛛程序）访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，那么搜索机器人就沿着链接抓取。二、robots.txt的作用1、引导搜索引擎蜘蛛抓取指定栏目或内容；2、网站改版或者URL重写优化时候屏蔽对搜
2022-02-11 17:31:23
1860
原创 配置gitlab自动部署
一.安装gitlab runner进入到服务器根目录下载runner，根据自己对应服务器的型号自行选择下载：# Linux x86-64 sudo wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64 # Linux x86 sudo wget -O /usr/local/bin/gitlab-
2022-02-11 09:52:26
2124
原创 CommonJS模块与ES6模块的区别
CommonJS模块与ES6模块的区别到目前为止，已经实习了3个月的时间了。最近在面试，在面试题里面有题目涉及到模块循环加载的知识。趁着这个机会，将CommonJS模块与ES6模块之间一些重要的的区别做个总结。语法上有什么区别就不具体说了，主要谈谈引用的区别。CommonJS对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。当使用requir
2022-01-22 15:40:02
285
原创 浏览器缓存及实现原理
1、浏览器缓存缓存存在的意义就是当用户点击back按钮或是再次去访问某个页面的时候能够更快的响应。尤其是在多页应用的网站中，如果你在多个页面使用了一张相同的图片，那么缓存这张图片就变得特别的有用。浏览器先向代理服务器发起Web请求，再将请求转发到源服务器。其中浏览器缓存包括强缓存和协商缓存。2、CDN缓存CDN缓存一般是由网站管理员自己部署，为了让他们的网站更容易扩展并获得更好的性能。通常情况下，浏览器先向CDN网关发起Web请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，
2022-01-19 18:04:52
1383
原创 手写call,apply,bind函数及函数柯里化
考虑两点:第一个参数为undefined或null的时候，那么会转变为window改变了this执行，让新的对象可以执行该函数。call//传递参数从一个数组变成逐个传参了,不用...扩展运算符的也可以用arguments代替Function.prototype.myCall = function (context, ...args) { if (typeof this !== 'function') { return; } //这里默认不传就是给window,也可
2022-01-17 18:01:27
205
原创 详解JavaScript中的Event Loop（事件循环）机制
前言我们都知道，javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程意味着，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。而非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。单线程是必要的，也是javascript这门语言的基石，原因之一在其最初也是最主
2022-01-15 17:52:34
998
原创 对重排reflow（回流）和重绘repaint的理解
概念理解DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何属性和位置也会受到影响，会影响到布局结构的情况，浏览器需要重新构造渲染树，这个过程称为重排，浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘。如color，background-color引起重排的原因有添加或者删除可见的DOM元素，元素位置、尺寸、内容改变，浏览器页面初始化，浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排，减少重绘和重排的方法：不在布局信息改变时做DOM查询使用
2022-01-13 15:07:11
331
原创 关于BFC的理解
BFC是什么直接翻译为格式化上下文：创建一个盒子，盒子内部元素布局不影响盒子外部元素BFC触发条件：html元素时一个BFC盒子float不为none的浮动元素position为absolute和fixed的元素display为inline-block ；table-cell ；flex；inline-flexoverflow除了visible元素BFC的布局规则：bfc内部盒子在垂直方向上依次放置，盒子垂直方向上的间距由margin决定，同一个bfc下的盒子的margin会发生重叠
2022-01-13 14:26:52
248
原创 数据可视化echarts的使用（地理热力图）
<template> <div class="hello"> <div class="EchartPractice"> <div id="main"></div> </div> </div></template><script>import chinaMap from "../assets/json/china.json"; // 一定
2022-01-11 15:49:44
788
原创 webpack5系统学习
const {resolve} = require(‘path’)const HtmlWebpackPlugin = require(‘html-webpack-plugin’)const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)//浏览器兼容性问题默认设置的是生产环境// 若要设置为开发环境，此处添加 process.env.NODE_ENV = ‘development’//压缩cssconst OptimizeCss
2021-11-29 18:02:01
223
原创 vr全景看房的方案 three.js
WebGL3D引擎http://www.webgl3d.cn/threejs/docs/#api/zh/core/Raycaster一.客户端，加载六张图及按钮位置，点击按钮删除旧的图及按钮，加载下一组图<template> <div class="home"> <div> <div id="container" style="height: 900px;transition:all 0.5s"></div>
2021-10-09 14:07:11
1714
原创 小程序onLaunch和onload先后顺序
前言：一般我们会在用户首次进入时（任何页面）执行一次操作获取用户数据，所以onLaunch是我们很好的选择onLaunch和页面的onLoad是异步操作，就会存在用户数据还没有获取到，页面的onLoad就执行完了，导致onLoad拿不到用户数据所以这里我采用的方法是定义回调函数在page页面判断一下当前app.globalData.employ是否有值，如果没有，说明是第一次调用，则定义一个（回调函数）app.employCallback = employ =>{ ...}App页面在请求
2021-10-09 13:47:32
4984
1
原创 WebSocket 使用
WebSockets通信Web Sockets是H5提供的在web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。 使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的，也是永久的，除非被显示关闭。这意味着当服务器想向客户端发送数据时，可以立即将数据推送到客户端的浏览器中，无需重新建立连接。只要客户端有一个被打开的socket（套接字）并且与服务器建立了连接，服务器就可以把数据推送到这个socket上，服务器不再需要轮询客户端的请求，从被动
2021-09-09 14:05:56
431
原创 flex布局最后一行列表左对齐的方法
每个子项宽度不确定1 .最后一项margin-right:auto.container { display: flex; justify-content: space-between; flex-wrap: wrap;}.list { background-color: skyblue; margin: 10px;}/* 最后一项margin-right:auto */.list:last-child { margin-right: auto;
2021-09-09 13:39:43
812
原创 element-ui中的中国省市区级联选择器
https://blog.youkuaiyun.com/qq_36272282/article/details/104060683?utm_term=element%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduweb~default-2-104060683&spm=3001.4430
2021-07-29 10:54:24
176
原创 Vue动态路由addRoutes
动态路由设置一般有两种：(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用1、简单的角色路由设置（1）配置项目路由权限// router.jsimport Vue from 'vue'import Router from 'vue-router'import Layout from '@/layout'Vue.use(Router)//
2021-07-28 11:18:00
1095
原创 实现打印功能
方法一：vue-print-nb1、安装npm install vue-print-nb --save2、引入全局如下在main.js中引入，非全局不用说了把，引入直接用就行import Print from ‘vue-print-nb’Vue.use(Print);3、查找id方式打印<div id="printMe" > <p>打印内容</p></div><button v-print="'#printMer'">打
2021-07-15 16:33:36
722
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人