- 博客(48)
- 收藏
- 关注
RSS订阅原创 Vue3详解
vue2中不会区分节点是动态的还是静态的，需要层层比较，而vue3中会在_createElementVNode中对节点进行标记，动态节点标记为1，静态节点标记为-1。上图中会对h1,h2标签做静态提升，在render函数外定义_hoisted_1，_hoisted_1 在render函数中可以重复使用；当存在连续大量的(测试元素数量>10)静态元素时候，vue3会进行预字符串化,通过_createStaticVNode生成字符串；
2024-07-02 22:32:47
666
原创 前端知识汇总
主线程会遍历得到的DOM树，依次为树中的每个节点计算出它最终的样式，称之为Computed Style在这一过程中，很多预设值会变成绝对值，比如rem变成px，这一步完成后，会得到一颗带有样式的DOM树。处理Html 并构建DOM树。解析过程中遇到css解析css，遇见js执行js，为了提高解析效率，浏览器再开始解析前，会启动一个预解析的线程，率先下载html中的外部css文件和js文件；如果主线程解析到link位置，此时外部的css文件还没下载解析好，主线程不会等待，继续解析后续的html，这是。
2024-01-07 18:08:08
332
原创 浏览器垃圾回收机制
V8使用分代回收策略，将对象分成不同的代，通常包括新生代和老年代。这种策略有助于提高性能，因为新生代的对象通常比老生代的对象更容易回收。这是一种更加复杂的垃圾回收策略，它将内存中的所有对象分为‘可达’和‘不可达两组’。垃圾回收期首先标记所有的可达对象，然后清除所有不可达的对象。为了减少内存碎片，V8垃圾回收器还包括了内存压缩的步骤，将存活对象移动到内存中的连续位置，以提高内存的使用效率。这种策略将垃圾回收操作分解为多个小步骤，以允许在应用程序执行期间执行垃圾回收操作，减少对应用程序的中断。
2024-01-02 20:54:36
405
原创 h5端获取定位
在微信环境下是推荐使用微信api的，用户未开启定位，安卓手机会弹出下图，去设置会跳到用户开启定位的位置。ios因为系统原因是不会弹窗的，鸿蒙4也不会弹出下面框。第三方api有腾讯、高德、百度，下面简述腾讯位置api。高德和百度也都尝试过，在微信环境中体验感并没有微信好用。
2023-08-08 16:42:25
2185
2
原创 微信三种登录方式(移动端，pc端)
该方案在pc端扫码后会进行重定向一次，体验感并不好 对页面的业务衔接也不是很友好，推荐方案三同样也是扫码登录还省去了平台注册费用，而且还不需要进行重定向。如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。方式二：第三方开放平台的微信扫码登录,适用于pc端生成微信二维码扫码登录。公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。调用接口拿二维码前后端都能实现，最后前端需要调用后端接口获取用户信息。使用code值换取微信用户信息。
2023-07-15 12:58:56
1075
原创 浏览器渲染原理
当进行了会影响布局树的操作后，需要重新计算布局树，会引发layout。主线程会遍历得到的DOM树，依次为树中的每个节点计算出它最终的样式，称之为Computed Style在这一过程中，很多预设值会变成绝对值，比如red会变成rgb(255，0，0)，相对单位变成绝对单位，比如em变成px，这一步完成后，会得到一颗带有样式的DOM树。当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程消息队列，在事件循环的机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
2023-05-25 20:22:18
134
原创 浏览器事件循环
程序运行需要它自己专属的内存空间，可以把这块内存简单理解为进程，每个进程至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意有了进程，就可以运行程序代码了，运行进程的[人]称为[线程]一个进程至少有一个线程，在进程开启后会自动创建一个线程来运行代码，该线程称为主线程，如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。浏览器是一个多进程多线程的应用程序为了避免相互影响，为了减少连环崩溃的概率，当启动浏览器后，它会自动启动多个进程。
2023-05-21 20:58:00
97
原创 埋点数据上送
返回ture后，只是表示进入了发送队列，浏览器会尽力保证发送成功，但是否成功了，无法判断。通过在unload事件处理器中，创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送。浏览器引入的sendBeacon方法，**发出的是异步请求，但是请求是作为浏览器任务执行的，与当前页面是脱钩的。发出的请求，是放到的浏览器任务队列执行的，脱离了当前页面，所以不会阻塞当前页面的卸载和后面页面的加载过程，用户体验较好；发出的是异步请求，并且是POST请求，后端解析参数时，需要注意处理方式；
2023-03-27 15:24:02
175
原创 小程序ios/安卓移动端兼容问题
iphoneX 及以上底部存在黑条方案：mounted() { this.$nextTick(()=>{ uni.getSystemInfo({ success:(res)=> { //成功回调函数 if(res.model.indexOf('iPhone X') !== -1 || res.model.indexOf('iPhone 11') !== -1 || .
2022-04-28 18:12:13
561
原创 react+ts+router+redux+node+hooks+antd项目搭建
之前有写过react项目模块但是没有系统性的学过react，过一遍。ts，es6不会介绍语法，自行百度。Ts初始化项目yarn create react-app 项目名称 --template=typescript组件的基础写法以及通信// App.tsx import React, { Component } from 'react';import './App.css';import Home from './Home/Home'import Counter from './Count
2021-12-20 17:57:43
1104
原创 vue3+ts+Cesium3DTile
先上图Cesium3DTile支持使用自己的建筑资源，谷歌高德等地图资源官方文档建议把官方的demo拉下来可以看看源码中文文档cesiumlab2 百度可以去搜一下这个工具，可以将城市资源转换成支持的建筑模型格式（后面会提供gitee地址，里面有个公众号可以下载）// 加载本地JSON建筑资源var osmBuildingsTileset = new Cesium.Cesium3DTileset({// url不能是本地资源！！！ 这里是个巨坑！！！ 该地址我是用node启动的
2021-11-30 16:17:46
1015
原创 webpack
webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，将所有这些模块打包成一个或多个bundle。webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。webpack有一个智能解析器，几乎可以处理任何第三方库。无论它们的模块形式是CommonJs、AMD还是普通的JS文件；甚至在加载依赖的时候，允许使用动态表re
2021-08-19 17:07:40
264
原创 上传项目到码云仓库
git initgit remote add origin 仓库地址git pull origin master将要上传的内容添加到该目录下git add .git commit -m ‘init’git push origin master刷新仓库
2021-07-01 16:34:36
87
原创 vue3 api
ref、reactiveref的作用就是将一个原始数据类型转换成一个带有响应式特性的数据类型，原始数据类型共有7个，分别是:StringNumberBigIntBooleanSymbolNullUndefinedreactive来赋予对象响应式的特性setup(){ const a = ref('a') const b = reactive({ name: 'abc', age: 11 }
2021-06-09 16:51:54
328
原创 loading加载动画
经典款<div class="classic-1"></div><div class="classic-2"></div><div class="classic-3"></div><div class="classic-4"></div><div class="classic-5"></div><div class="classic-6"></div>
2021-05-27 14:25:02
875
1
转载 移动端优化
网络加载类首屏数据请求提前,避免JavaScript文件加载后才请求渲染为了进一步提示页面加载速度，可以考虑将页面的数据请求尽可能提前，避免JavaScript文件加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，并且不能并行，所以如果数据请求能提前的话，可以极大程度上缩短页面内容的渲染完成时间首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化由于移动端网络相对较慢，网络资源有限，因此为了保证尽快完成页面内容的加载，需要保证首屏加载资源的最小化，非首屏的内容使用
2021-05-26 16:04:15
524
转载 网页性能详解
网页生成的过程HTML代码转化成DOMCSS代码转换成CSSOM(CSS object Model)结合DOM和CSSOM，生成一颗渲染树(包含每个节点的视觉信息)生成布局，即将所有渲染树的所有节点进行平面合成将布局绘制在屏幕上生成布局和绘制这两步，合称为"渲染"，也是耗时最多的一步重排和重绘以下情况会导致网页重新渲染修改DOM修改样式表用户点击（鼠标悬停、页面滚动、输入框键入文章、改变窗口大小等）重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"，后者叫做"重绘"。
2021-05-26 11:27:35
375
原创 web安全
XSS 跨脚本攻击XSS(Cross Site Scripting)是跨站脚本攻击，为了区分CSS，所以缩写为XSS。XSS攻击方式是往Web页面插入恶意的 JavaScript 代码，当用户浏览网页的时候，插入的代码就是被执行，从而达到攻击的目的。其中应用比较多的一个就是，在网页一些公用的交互区域。比如搜索的文本框，除了可以输入一些关键字，还可以输入一些 JavaScript 代码，一旦代码点击搜索，代码就会被执行，达到攻击的目的。如下例子<script>alert(document.c
2021-05-24 18:04:53
143
原创 taro
Taro 是一个开放式跨端跨框架解决方案 官网拉了taro试了下 有自己的api文档和uniapp类似，也有自己配套的ui框架，遇到一个问题vue3的模板下引入taro-ui-vue是有问题，网上也没看到有解决方案。后续项目有接触taro会更新···...
2021-05-07 16:42:19
110
原创 强缓存与协商缓存
通常浏览器缓存策略分为两种：强缓存和协商缓存原理浏览器加载资源时，根据请求头的Pragma和Cache-Control来识别强缓存和协商缓存;Pragma已经逐步抛弃。优先级Pragma > Cache-Control > Expires。命中强缓存，则直接从缓存读取资源，不会发送请求到服务器如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过last-modified和Etag验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然从缓存中读
2021-02-26 10:37:55
178
原创 vue3 新特性
// 注册全局组件import HelloWorld from '@/components/HelloWorld.vue'const app = createApp(App)//全局挂载属性和方法// 方法一：app.config.globalProperties.$Test = () => { return '全局挂载属性和方法'}// 方法二：提供/注入 后续详细介绍// app.provide('$Test', 'hi')app.use(store).use(rou
2021-01-05 16:52:37
447
原创 微信小程序ios不支持虚拟支付方案
微信小程序ios不支持虚拟支付导致支付模块不能审核通过方案：项目使用uniapp开发，有小程序和h5两端。在触发支付的时候，通过web-view跳转到h5进行下单，然后再跳转回小程序重新唤起该支付。ios只是不支持虚拟支付，但是支付本身是支持的。该方案测试过，已审核通过。欢迎大佬补充更多方案...
2020-12-07 17:10:41
2620
9
原创 uniapp 小程序 h5登录、支付、分享、相关授权
小程序登录<button :loading="loading" class="delButtonStyle confirm" open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true" lang="zh_CN">微信登录</button>// 小程序登录getuserinfo() { this.loading = true let that = this // 获取
2020-12-01 15:51:58
908
原创 WebSocket
WebSocket就是客户端和服务端双向通行。特点：（1）建立在 TCP 协议之上，服务器端的实现比较容易。（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。（3）数据格式比较轻量，性能开销小，通信高效。（4）可以发送文本，也可以发送二进制数据。（5）没有同源限制，客户端可以与任意服务器通信。（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。应用场景： 服务端和客
2020-11-19 15:24:55
81
原创 nuxt项目项目搭建以及自动化打包部署七牛云
vue项目处理seo问题目前主流的方案有两种一： 预渲染 prerender-spa-plugin相关链接附上https://www.cnblogs.com/binmengxue/p/12718789.html、本人也亲测过该种方案，确实能优化seo，能生成相应自己配置的静态文件。但是该方案不是seo问题的最优方案。推荐nuxt，利用ssr来处理seo问题。二：nuxt.js官网：https://www.nuxtjs.cn/guide关于ssr不做过多介绍，自行百度。nuxt是一套基于vue+w
2020-11-19 15:24:00
837
原创 浏览器相关兼容问题解决方案
vue2.5+版本兼容IE9 （vue只支持IE8以上版本）IE9版本兼容：ES6兼容在 ie9 的环境上，es6 的部分新对象、表达式，并不支持，解决方案是使用 babel-polyfill 组件，它可以将 es6 的代码翻译成低版本浏览器可以识别的 es5 代码npm i babel-polyfill --save-dev安装完成后，在项目的主入口文件 main.js 的首行就可以直接引用import ‘babel-polyfill’;在项目使用 vue-cli 生成的代码中，根目录有一个
2020-11-19 15:21:52
679
原创 rem、em、vh、px
rem:rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。em:子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-sizevw/vh:全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。px:px像素（Pi
2020-11-19 15:20:53
477
原创 vue、react对比
redux : vuexRedux 的组成Store：存储应用的状态 – state 以及用于触发 state 更新的 dispatch 方法等，整个应用仅有单一的 Store。Store 中提供了几个管理 state 的 API：store.getState()：获取当前 statestore.dispatch(action)：触发 state 改变（唯一途径）store.subscribe(listener)：设置 state 变化的监听函数（若把视图更新函数作为 listener 传入，则可
2020-11-19 15:20:25
315
原创 Redux
store是应用状态的单一数据源。reducer规定store的形式并更新storeaction是信息载荷，告诉reducer应用中发生了哪种类型的事件
2020-11-19 15:19:56
129
原创 vsCode相关依赖
备注高亮：better comments代码截图：Polacode接口调试：REST Client查找另一半括号：Bracket Pair Colorizerjs代码优化器：JavaScript Booster
2020-11-19 15:19:27
1210
原创 http特性
100-199 用于指定客户端应相应的某些动作。200-299 用于表示请求成功。300-399 重定向 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。400-499 客户端错误 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。500-599 服务端错误 用于支持服务器错误。 503 – 服务不可用https工作原理:服务器生成服务器公钥和服务器私钥，向CA认证机构申请证
2020-11-19 15:17:52
195
原创 js相关解析
一：.call(),.apply(),.bind()解析作用：参数中的this指向call、apply、bind方法的第一个参数,从而改变了this的指向不同点：.call(obj, ‘arr1’,‘arr2’) 第一个参数obj为this指向对象,后面部分依次传入.apply(obj, [arr]) 第二部分为数组.bind(obj,‘arr1’,‘arr2’)() 返回一个函数, 参数传入和call一致二：闭包原因：函数中能访问全局对象，但是全局环境中访问不了函数内的局部对象。为了
2020-11-18 11:19:20
200
1
原创 vuex
创建store对象const store = new Vux.Store({// state 中存放的是全局共享的数据state: { count: 0 }})将store 对象挂载到vue实例中new Vue({el: ‘#app’,render: h => h(app),router,store // 将创建的共享数据对象，挂载到vue实例中 所有组件都可以从store中获取全局的数据})State 提供唯一的公共数据源，所有共享的数据统一放到store的state中进行
2020-11-18 11:15:48
72
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人