qq_34455363的博客

原创 浏览器多进程，浏览器渲染（回流与重绘），JS运行机制（宏任务与微任务的解读 eventLoop）

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

原创 异步竞态之axios取消重复请求

大家肯定遇到过这样类似的场景：多个 Tab 页点击切换功能，如果用户点击频繁，很可能会出现当前页面显示别的页面的数据。因为每个接口返回信息的时间是不同的，你不能保证先请求的一定最先返回数据，那么就很可能会出现停留在页面一却出现别的页面的数据的情况。这种异步的情况术语称之为异步竞态。 axios 如何取消请求第一种方法通过axios.CancelToken.source生成取消令牌token和取消方法cancelconst

原创 微信小程序保存海报分享

1. 绘制之前，先将图片下载到本地，远程图片包含：头像，小程序二维码(参考github:https://github.com/wg-front/wxml2canvas) drawImage() { let _this = this; // 绘制之前，先将图片下载到本地，远程图片包含：头像，小程序二维码 wx.showLoading({ title: '海报生成中' }) _this.downImg(() => { var draw

原创 JavaScript 运行机制详解（宏任务与微任务的解读 eventLoop）

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。（4）主线程不断重复上面的第三步。

原创 vue的生命周期及与其子组件生命周期执行顺序

1、vue的生命周期图生命周期钩子vue生命周期总共分为8个阶段: 创建前/后，载入前/后，更新前/后， 销毁前/后。beforeCreate（创建前）：vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化created (创建后) ：实例创建完成后，完成了 data数据初始化, 但是el还未初始化。beforeMou...

原创 网站前端性能优化

网站前端性能优化1、尽量减少HTTP请求次数1、合并文件：合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，例如可以简单地把所有的CSS文件都放入一个样式表中。2、CSS Sprites：CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-posit...

原创 vue项目打包优化之CDN和路由懒加载

路由懒加载一.前言当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。让组件按需加载1.修改 router/index.js 中导入组件的语法2 **修改 /build/webpack.prod.conf.js 中的chunkFilenameCDN优化第三包的...

原创 vuex了解与使用

一、前言当我们的应用遇到多个组件共享状态时，会需要多个组件依赖于同一状态抑或是来自不同视图的行为需要变更同一状态。以前的解决办法：a.将数据以及操作数据的行为都定义在父组件;b.将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时，你可能会对 vue 组件之间的通信感到崩溃 ，特...

原创 在vue中封装axios

1.将 axios 添加到Vue的原型中将 axios 添加到Vue的原型中实例对象可以直接使用原型对象中的属性或方法所有的组件都是Vue的实例说明: 只要是像 axios 这样的第三方库(与Vue没有任何关系),都应该通过这种方式来统一导入import axios from 'axios'Vue.prototype.$http = axios然后在组件中就用this.$http...

原创 ES6 中的模块化语法 import / export

官方网址http://es6.ruanyifeng.com/#docs/module#export-与-import-的复合写法 1. ES6 中的模块化语法import / export2.在浏览器或NodeJS环境中，是无法直接使用 import 语法的在模块化的环境中每个JS文件都是一个独立的作用域，如果两个JS文件需要交互那么，必须通过 导入和导出 才能实现第一种语法:...

原创 vue-loader

原创 webpack使用babel处理ES6语言兼容浏览器

1.安装搭babel桥梁–：cnpm install --save-dev babel-loader @babel/core使用babal处理es6：cnpm install @babel/preset-env --save-dev2.配置文件中模块loader中添加规则{ test: /\.js$/, exclude: /node_modules/,//排除node里面的...

原创 模块热替换(hot module replacement)

块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：保留在完全重新加载页面时丢失的应用程序状态。只更新变更内容，以节省宝贵的开发时间。调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。这一切是如何运行的？开头引入webpack自带模块热替换插件(h...

原创 webpack-dev-server本地服务器跑项目

source-mapdevtool: 'cheap-module-eval-source-map', //开发方便找出代码错误// production devtool: 'cheap-module-source-map',//生产方便找出代码webpack-dev-server本地服务1.安装cnpm i webpack-dev-server -D2.配置文件修改devServ...

原创 入口和出口配置

入口配置打包两个文件，要对应的入口和出口相对应配置1.入口配置entry: { main: './src/index.js', sub: './src/index.js'//入口文件配置两个，打包后会生成两个相应文件（但前提出口也要配置）},2.出口配置 plugins: [new HtmlWebpackPlugin({ template: 'src/index.html'...

原创 html插件(自动生成index.html和打包前清空dist目录）

自动生成index.html1.下载插件yarn add html-webpack-plugin -D或者 npm i html-webpack-plugin -D2.先建一个index.html(模板)在src目录下3.修改配置文件开头引入插件 let HtmlWebpackPlugin = require('html-webpack-plugin')引入插件配...

原创 引入静态资源打包

当从index.scss中再引入个a.scss文件时候，打包时会不转义a.scss文件为css文件为浏览器解析，所以这时候要用到options: { importLoaders: 2 //表示从index.scss文件中加载另一个scss，也是先执行前面两个loader }比如{ loader: 'css-loader', // 解析路径 o...

原创 webpack打包css，sass,less等静态资源以及前缀兼容浏览器

1.全局安装CSS(使用loader打包css文件)npm i css-loader style-loader -D或 yarn add css-loader style-loader -D2.从index.js引入css文件关联3.修改配置文件，在rules增加个配置 { test: /\.css$/, //匹配css后缀名文件 use: [ 'style...

原创 webpack基础使用

webpack 的使用步骤：第一步：初始化 npm init 或者 npm init -y（默认初始化）。安装： npm i webpack webpack-cli -D(开发安装)webpack的四个核心概念1 入口 entry2 出口 打包后输出内容3 loaders 加载器：对于非JS的静态资源4 plugins 插件npm info webpack可以查看所有webpack...