wang9rui的博客

原创 前端页面优化做的工作

3.由于我们页面中含有很大的序列帧动画，所以会导致页面性能低，卡顿等问题，CSS3 动画可以通过 GPU 加速来提高性能，但是在大规模元素上使用时会存在性能问题。Canvas 可以用于绘制复杂的图形，由于它的渲染机制和硬件加速，所以具备很好的性能。7.使用谷歌浏览器的lighthouse去看页面的性能评分，尽量把影响性能分数低的模块解决掉（本地和测网是有差别的，最好在测网去检测评分）2.使用谷歌浏览器中的layers，看下有没有影响性能的模块，或者应该销毁没销毁的。其他的图片在进入页面后慢慢加载。

原创 wepack4 splitchunk

翻译webpack4

原创 使用phaser+matter开发合成大西瓜

phaser一些常见问题总结

原创 前端使用oss包

访问oss资源

原创 xml数据转json

[xml2json.js使用文档](https://www.hangge.com/blog/cache/detail_1798.html)eg:import X2JS from './xml2json'const x2js = new X2JS();const data='<?xml version="1.0" encoding="UTF-8" ?> <code>1</code> <message>success</message>

原创 前端运行项目时，多个css样式打包错乱问题

在优化代码时，优化webpack打包配置时，发现样式错乱需求背景：有多个图片文件夹，不同的文件夹内图片名称相同，在不同的vue文件内引入不同的文件家里的相同的文件名字，发现样式错乱原因：打包时没有加hash解决方案：打包时增加contenthash...

原创 前端页面断网情况下，需要重新加载页面

window.addEventListener('online', ()=>{ //页面断网，重新连接网络可以刷新页面 window.location.reload()}, false);

原创 使用howler.js播放音频没有声音问题解决方案

需求背景一：在一个页面需要展示多个音频并切换展示，出现ios部分机型锁屏或者切后台时间长时没有声音解决方案：1.增加html5:true参数，但是这种方案发现ios没问题，安卓不能播放声音，必先2.最终方案是判断机型属于安卓还是ios，如果是安卓html5:false，如果是ioshtml5设置为true需求背景二多段音频，想引入外部音频链接，发现出现跨域问题解决方案：本地引入外部音频链接...

原创 原型链查找

原创 swiper插件

使用swiper4.0一些踩坑总结数据保证拿到后在初始化，eg:使用vue中v-if指令判断销毁swiperconst swiperEg=new swiper;if (swiperEg) {swiperEg.destroy(false);}默认高亮展示第几个swiper（展示中间||第一个）// 只有一条数据是否自动轮播const autoConfig = 只有一条数据 ? false : {delay: 4000,stopOnLastSlide: true,disableOnIn

原创 使用canvas实现刮刮乐功能

// 画布宽-屏幕宽const canvasWidth=window.screen.width；// 画布高const canvasHeight=window.screen.height;// 圆形/巨型配置let setting={} // 圆形/巨型配置const guideNewConfig={ type: 'circle', dom: '#targetCity', radius: 65}const stepClear=0.2;/** * @descripti

原创 前端实现预加载

/* * @Description: 预加载 * @Author: wangrui * @Date: 2021-03-02 13:35:34 */class PreLoad{ constructor(){ this.images=[] this.opts={ success:null, fail:null } } preLoadFn(images,opts){ this.images=typeof(images)==='strin

原创 前端滚动页面获取可见区域dom

/* * @Description: 监控dom是否在可视范围内 * @Author: wangrui * @Date: 2021-08-05 13:59:58 */export default class ViewPortLog { constructor(option) { // const { // type 埋点方式 // targetClass,目标元素class类 // cb 回调函数 // }=option; this.

原创 转码demo

实习生招聘练习demofunction base64encode(str) {var out, i, len;var c1, c2, c3;len = str.length;i = 0;out = "";while(i < len) {c1 = str.charCodeAt(i++) & 0xff;if(i == len){ out += base64EncodeChars.charAt(c1 >> 2); ou...

原创 进度条动画的几种实现方式

1.动态使用aninamtion:const head = document.getElementsByTagName('head')[0]; const style = document.createElement('style'); const styleText = document.createTextNode( `@keyframes proAni { 0%{width:0;} 100% { width:${进度的百分比}%;..

原创 overflow-y：scroll滚动不流畅

对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。解决思路：给滚动的子元素min-height:calc(100%+1px) ，主动触发scroll注意：如果ios出现滚动区域太小，滑动其他地方，在滑动回来，可能会出现滑不动得问题，原因是滑动区域太小，ios手机得特性...

原创 前端实现抽奖/数字滚动方案

这边使用了三种实现方式实现滚动速度和几秒内完成动画的动态方式，具体实现思路如下1.使用定时器去控制他的translate,但是这种实现方式性能不大好，并且动画滚动的效果看起来一卡一卡的，pass掉了这个方案2.还有使用定时器控制当前滚动的数据，给它数组的第一项删除，添加到数组的最后一项，然后动画这边可以控制他的margin,translate,使用transition,网上好多这种实现思路，但是性能不好，并且估计没自测，安卓部分手机卡顿，特别卡顿3.最终方案：使用anmation的无限滚动，然后动态.

原创 浏览器输入url后发生了什么

原创 浏览器渲染过程

原创 js执行顺序

线程： cpu 调度的最小单位进程： cpu 资源分配的最小单位js是单线程的，在同一时间，只能做一件事。但是js有同步任务和异步任务。同步：有a,b两段代码，执行完a后执行b异步：有a,b两段代码，a和b同时执行在异步任务中还有微任务和宏任务；微任务：promise，process.nextTick宏任务：整体代码script，setTimeout，setInterval事件循环机制：首先将同步任务放进主线程执行，异步任务放进任务队列中，当所有的同步任务在主线程执行完毕后，会将异步任务放进

原创 雪碧图抖动问题

问题记录h5开发时出现雪碧图抖动问题解决方法 1.px+transform:scale（0.5）+媒体查询 2.使用svg原因：css每一个元素展示到页面的都是会把单位取整的， 所以会自动四舍五入， 每一帧的盈亏就造成了抖动...

原创 http中get请求和post请求区别

http请求有get,post,put,delete几种方法,常用的get和post的区别(get和post都是tcp链接)1.get和post传参方式不同,get通过url传参，post通过request body传参2.post比get安全,get请求参数暴露3.get请求在url的长度上有限制，post没有4.浏览器回退时post会再次请求，get不会5.get的参数会被浏览器保存历史记录,post不会6.对参数的数据类型，get只接受ASCII字符，而post没有限制7.get请求会

原创 前端修改下载导出文件名称

1.cnpm i file-saver -S2.import { saveAs } from 'file-saver';3.const getBlob=(url)=> { return new Promise(resolve => { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.o

原创 vue简易版拖拽表格

1.npm i publish-web 2.引入到项目中import publishWeb from "publish-web";Vue.use(publishWeb);3.直接在页面中<drag-table></drag-table>即可使用4.关于参数propstitle:""//导航名称theads:[]//表头//必传currentPage：...

原创 vue函数组件

vue中的函数组件<script> export default { name: 'noData', functional: true, props: { title:{ type:String, default:'' ...

原创 浏览器关闭时提示用户

**简易版**// 监听浏览器关闭window.addEventListener('beforeunload', this.beforeunloadHandler,false);// 浏览器离开提示 beforeunloadHandler(event){ if(this.$route.name==='detail-exambegin'){// 这部操作是为了解决进入到不同...

原创 vue点击按钮滚动至某处

给元素设置ref属性或者是id 点击元素时获取到元素的scrollTop值1.window.scrollTo(x轴坐标,y轴坐标,);2.window.scrollTo({ top: 1000, left:1000, behavior: "smooth" });...

原创 div固定定位不占位,收缩浏览器时不随着窗口变化解决方案

position:有5种定位其中fixed是相对于浏览器定位的,所以收缩浏览器当前元素会随之变化解决方案:1.只需要在滚动的时候动态加个class类名，加个固定定位2.加个占位的父级元素 设置相应宽度原因：动态添加fixed,并且不设置left right值 是相对于父元素的 高度是相对于浏览器的...

原创 js中的eval函数

eval是一个函数，js的设计者将它变成类似运算符eval的作用是什么呢?**它使用了调用它的 变量作用域环境**举个简单的例子function fn(){ eval("var a=1;") console.log(a)//它会改变局部变量的值 并且也可与生明一个新的局部变量}fn()全局eval():此函数可以通过别名去定义，当通过别名定义时，会改变全局的代码变量 而不会...

原创 fiddler下载安装配置

第一步：下载神器Fiddler,下载链接：http://fiddler2.com/get-fiddler下载完成之后，傻瓜式的安装一下了！第二步：设置Fiddler打开Fiddler, Tools-> Fiddler Options (配置完后记得要重启Fiddler)选中"Decrpt HTTPS traffic", Fiddler就可以截获HTTPS请求选中"...

原创 vue，或者uni-app中如何重新渲染子组件

this.hackReset = false; this.$nextTick(() => { this.hackReset = true; }) 再给子组件绑定v-if="hackReset" 原理是什么？再要操作子组件时进行销毁重建,这样子组件生命周期会全部更新一遍啦~~~...

原创 微信小程序在父组件绑定touchstart，子组件绑定点击事件,先触发父组件的问题?

这个问题有多种解决方案：第一种：把子组件写在父组件外第二种：针对子组件必须写在父组件内并且父组件必须使用touchstart解决方案：给子组件绑定touchstart代替click事件...

原创 关于小程序端出现弹窗,还可以滑动弹窗下的内容

解决方案：在父级元素绑定@touchmove.prevent.stop=“preventtouch” 在preventtouch事件中return一下就完美解决~

原创 vue的路由中addRoutes之后会出现Duplicate named routes

Duplicate named routes是什么意思呢？这句话的意思是vue的路由中有重复的路由名称出现原因：addRoutes的作用注入新的路由，而不是替换其他路由出现场景：假如当前用户退出登录时重新登录会出现警告[vue-router] Duplicate named routes definition: { name: "transport", path: "/transpor...

原创 uni-app运行在app中小程序，ios,安卓兼容性问题

轻松完成三个平台兼容 <!-- #ifndef APP-PLUS --> 运行在小程序端的代码 <!-- #endif --> <!-- app --> <!-- #ifdef APP-PLUS --> 运行在app端的代码 <!-- #endif --&...

原创 关于vue生命周期父组件嵌套子组件的执行顺序

生命周期流程图Created with Raphaël 2.2.0父beforeCreate父created父beforeMountedCreated with Raphaël 2.2.0子beforeCreate子created子beforeMountedCreated with Raphaël 2.2.0子mounted父mounted子组件更新过程父beforeUpdate...

原创 js中new之后发生了什么

function fn(){ this.a=1;}var newfn=new fn();console.log(newfn.a)=>1//在new之后究竟发生了什么呢？//var newfn={}; newfn._proto_=fn.prototype; fn.call(newfn); 最后返回一个新的对象//接下来说一下原型链//首先明确的是函数有prototype//...

原创 vue检测不到数据变化

1.首先先说js的数据类型分为两种：基本数据类型和引用数据类型对于基本数据类型的观测可以使用watch,或者computed计算数据然而引用数据类型 数组或者对象 需要深度监听watch: {arr: {immediate: true,handler(val) {。。。}}},2.我们在项目中会遇到数据改变了但视图没有发生变化,例如使用computed这是什么原因呢？原...

原创 uni-app改成自编义组件问题处理

1.props传值 ：val="’’"=>空字符串需定义在data中2.页面使用小程序生命周期组件使用vue生命周期3****.picker-view设置value默认值失效,需要dom加载完成之后,在created或者mounted调用this.$nexttick重置value值完美解决****...

原创 函数节流和函数防抖

函数节流的概念:当一个动作连续触发，则只执行最后一次函数防抖的概念:控制一个动作在多长时间内执行一次函数节流的使用场景：用户提交表单函数防抖的使用场景：scroll事件 窗口resize事件代码部分// 简单版const throttle = (func, timer) => {let timer;return () => {if (timer) return;}...