草木红-CSDN博客

原创 V8引擎执行js的原理和垃圾回收

(一) v8执行一段js代码的过程预解析检查语法错误但不生成AST通过词法分析和语法分析生成AST（抽象语法树）将AST转换为字节码通过V8的解释器 / 基线编译器(Ignition)将AST转换成字节码字节码是AST和机器码中间的过度代码，如果直接将AST转为机器码，会引发严重的内存占用问题。由解释器逐行执行字节码，遇到热点代码启动编译器进行编译，生成对应的机器码, 以优化执行效率(二) 垃圾回收[1].如何判断是否可以回收引用计数给一个变量赋值引用类型，则该

2020-12-31 13:58:57 239

原创 javascript的类型转换规则和判断数据类型

(一). 类型转换[1].转字符串String()参数类型结果Undefined“undefined”Null“null”Booleantrue,返回“true”；false 返回“false”Number普通数字被转换为数字字符串；NaN被转为“NaN”；10n被转为“10”Symbol“Symbol()”[2]. 转布尔值Boolean()参数类型结果false、undefined、null、+0、-0、NaN、“

2020-12-31 13:48:06 138

原创一、Chrome浏览器调试工具/文档

[1].开调试窗口mac: command+alt+iwindows: F12[2].暂停发生变化中的元素or属性再在添加Break on的元素上取消断点。[3].查看元素最终效果的样式只关心最后的效果是哪些样式控制的可以通过Computed查看[4]. 查看被压缩的css和js代码找到被压缩的css或者js代码点击format，就可以得到展开后的代码，并且可以进行编辑。[5]. 在Chrome中编辑样式并同步到本地文件中将本地文件所在的文件夹添加到Chrome中Chro

2020-12-22 16:20:47 7363 1

原创 validate.js 表单校验插件

菜鸟教程： https://www.runoob.com/jquery/jquery-plugin-validate.html(一) 使用步骤导入jquery.js，validate基于jquery导入validate.js页面加载成功后，对表单进行校验，$(“选择器”).validate();<form action="" id="login"> 必填： <input type="text" name="userName" id=""><br /

2020-12-09 12:57:56 4310 1

原创前端JavaScript面试

一、JS基础知识(一) 变量类型和计算[1]. 知识点类型分类引用类型:array、function、object值类型：undefined,string,number,boolean,null强制类型转换字符串拼接var b = 100 +'10' //'10010'==运算符100 == '100' //truenull == undefined //trueif语句var a = 100if(a){ //...}逻辑运算console.l

2020-11-11 13:09:32 708

原创系统面试

一、一面/二面(一) 页面布局假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px,中间自适应。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen

2020-11-01 18:16:14 336

原创 selectize.js 单选下拉框控件的属性和方法

Selectize是一个可扩展的基于jQuery 的自定义下拉框的UI控件。它对展示标签、联系人列表、国家选择器等比较有用。它的大小在~ 7kb（gzip压缩）左右。提供一个可靠且体验良好的干净和强大的API。文档：https://github.com/selectize/selectize.js用例：https://github.com/selectize/selectize.js/tree/master/examples一、配置selectize属性会添加到原始的<select>

2020-10-23 10:26:18 4016 1

原创 git日常开发/多人开发常用命令

1.本地回滚到某一版本前提是git此时是等待状态查看提交日志在项目中右键选择查看日志点击需要回复的版本，查看sha-1值，复制3. 使用，进行回滚，完成$ git reset --hard 930439e81091e5423afab6c859aa3e849006e5e1.........

2020-10-22 18:59:40 933

原创 8. async函数和await表达式

(一) async异步函数https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_functionasync函数的返回值为promise对象。promise对象的结果由async函数执行的返回值决定。一个async异步函数可以包含await指令，该指令会暂停异步函数的执行，并等待Promise执行，然后继续执行异步函数，并返回结果。(二) await 表达式https://deve

2020-08-26 16:57:57 505

原创 22. webpack resolve配置路径别名

当文件路径比较深时，使用相对路径就不方便。可以通过配置resolve.alias用全局变量名来代替具体路径。(一) 配置路径别名修改webpack配置文件module.exports = { ... resolve:{ alias:{ $base: path.resolve(__dirname,'src/js/base'), } }}在入口文件index.js文件中//引入 /src/js/base/base.js文件

2020-08-19 15:05:13 581

原创 21. webpack优化配置-dll方式将第三方库独立打包

对于一些不经常更新的第三方库，比如 jquery，react，lodash，我们希望能和自己的代码分离开，DLLPlugin 能把第三方代码完全分离开，即每次只打包项目自身的代码，而不再打包第三方库。使用到的插件：webpck.DllReferencePlugin（属于webpack）:设置哪些第三方库不参与打包add-asset-html-webpack-plugin：将JavaScript或者CSS文件添加到 HTML中下载插件npm i webpack add-asset-html-

2020-08-19 11:47:06 733

原创 20. webpack优化配置-externals 不打包某些库使用CDN代替

当我们希望使用CDN来引入jquery时，就不需要在打包时将jQuery打包。配置webpack配置文件webpack.config.js，添加externals配置const path = require('path');const {CleanWebpackPlugin} = require('clean-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {

2020-08-19 10:21:07 619

原创 19. webpack优化配置-PWA 渐进式网络应用开发程序

渐进式网络应用程序(Progressive Web Application - PWA)，在离线(offline)时应用程序能够继续运行功能。https://www.webpackjs.com/guides/progressive-web-application/serviceWorker代码必须运行在服务器上需要的插件：workbox-webpack-plugin下载插件workbox-webpack-pluginnpm i workbox-webpack-plugin -D在web

2020-08-19 09:53:36 193

原创 18.webpack优化配置-懒加载和预加载

(一) 懒加载

2020-08-19 09:06:00 1626

原创 17.webpack优化配置-code split 代码分割

方式一：通过多入口实现代码分割配置webpack, 将单入口，改为多入口注意：index.js文件不要引入base.js文件const path = require('path');module.exports = { mode: 'production', entry: { index: './src/js/index.js', base: './src/js/base.js' }, output: { filena

2020-08-18 17:41:13 760

原创 16. webpack优化配置-tree shaking 剔除无用的代码

tree shaking只需注意下面的前提即可，无需其他配置。前提： 1. 必须使用ES6模块化 2.webpack配置文件中的mode开启production环境注意：package.json文件添加sideEffects配置来实现哪些文件需要进行tree shaking。“sideEffects”:false 所有代码都可以进行tree shaking，css文件可能直接被删除。“sideEffects”:["*.css"] css文件不要进行tree shaking入口文件inde

2020-08-18 16:47:53 945

原创 15. webpack优化配置-babel缓存和资源缓存配置

开启babel缓存，在第二次打包时，打包构建速度更快在webpack配置文件webpack.config.js中开启babel缓存module.exports = { ... module: { rules: [ ... //js兼容性处理 { test: /\.js$/, exclude: /node_modules/, loader: 'ba..

2020-08-18 16:23:24 1308

转载 14. webpack优化配置-oneOf

转载：https://segmentfault.com/a/1190000022413668优化点: 每个不同类型的文件在loader转换时，都会被命中，遍历module中rules中所有loaderconst { resolve } = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const HtmlWebpackPlugin = require('html-webpack-plug

2020-08-18 15:29:35 440

原创 13. source-map构建后的代码与源码的映射关系

source-map：提供源代码到构建后代码的映射技术(如：构建后代码出错，通过映射关系可以方便的追踪源代码中的错误)[ inline- | hidden- | eval- ][ nosources- ][ cheap- [ module- ]]source-mapsource-map: 会生成一个外部的source-map文件，当文件出错时，能够得到错误代码准确信息和源代码的错误位置。inline-source-map：将source-map内联到js文件中，只生成一个内联的source-map，

2020-08-18 15:19:12 513

原创 12.webpack 模块热替换HMR

HMR(hot module replacement) 一个模块发生变化时，只会重新打包这一个模块(而不是打包所有模块)极大的提升构建速度。HMR功能基于devServer。样式文件：可以使用HMR功能：因为style-loder内部已经实现js文件：默认不能使用HMR功能，在js入口文件添加支持HMR功能的代码后，修改非入口文件时可以实现热更新。html文件：默认不能使用HMR功能，同时会导致html文件不能热更新(在单页面开发中不需要做HMR功能)解决方法：修改entry入口，将html文

2020-08-18 14:35:55 153

原创 11. webpack生产环境和开发环境中的配置文件

(一) 开发环境webpack.config.js文件const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode: 'production', entry: './src/index.js', output: { filename: 'built.js', path: path.r

2020-08-17 17:45:37 138

原创 10. webpack压缩html和js

需要的loader和插件html-webpack-plugin 插件中进行配置即可压缩html(一) 压缩js代码只需将 webpack的配置文件webpack.config.js中的mode改为生产环境即可自动压缩js代码....module.exports = { mode: 'production', ...}(二) 压缩html只需将 webpack的配置文件webpack.config.js中的mode改为生产环境即可自动压缩html代码这时可能报一个如下的错

2020-08-17 17:45:13 722

原创 7. webpack 将css从js中抽离、css兼容性处理、css压缩

需要的loader/插件style-loadercss-loaderhtml-webpack-pluginmini-css-extract-plugin 将css提取成一个单独的文件postcss-loader css兼容性处理postcss-preset-env 识别postcss所在的环境optimize-css-assets-webpack-plugin 插件，压缩css(一) 将css从js文件中抽离安装mini-css-extract-pluginnpm i mini-

2020-08-17 17:44:45 609

原创 8. webpack的js语法检查eslint

需要的插件、loadereslint-loader 语法检查eslit eslit语法库eslint-config-airbnb-base aribnb语法规则eslint-plugin-import安装eslint和相关规则npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D在入口文件src/index.js中添加如下内容function add(a,b){ retur

2020-08-17 17:44:16 234

原创 9. webpack的js兼容性处理

使用的loader、插件babel-loader Babel是一个JavaScript编译器，能够让我们放心的使用新一代JS语法。@babel/preset-env js基本语法转换@babel/core js的api进行转换@babel/polyfill js全部兼容性处理，不需要配置，直接引入，会有体积过大的问题core-js 按需进行兼容性处理根据自己的需求安装loader和插件npm i babel-loader @babel/preset-env @babel/core

2020-08-17 17:43:58 352

原创 6. devServer自动打包和自动刷新页面

https://webpack.docschina.org/configuration/dev-server/特点：只会在内存中编译打包，不会有任何输出下载webpack-dev-servenpm i webpack-dev-server -D在webpack配置文件webpack.config.js中进行配置devServer:{ //项目构建后的路径 contentBase: path.resolve(__dirname, 'build'), //启动gzip压缩.

2020-08-14 16:32:44 280

原创 5. webpack处理不需要处理的资源(如字体图标)

以打包字体图标为例使用的loader：file-loader图标库是阿里图标库下载的下载file-loader (还需要安装html-webpack-plugin，css-loader, style-loader)npm i file-loader -D创建入口文件(src/index.js)并引入图标库的入口文件import './css/iconfont.css'创建模板文件(src/index.html)<p class="iconfont icon-shan

2020-08-14 16:32:27 409

原创 4. webpack处理图片资源

file-loader、url-loader、html-loader学习

2020-08-14 16:32:02 530

原创 3.html-webpack-plugin 使用自己的html模板

插件需要引入才能使用。打包html所需的插件html-webpack-plugin: 打包结束后，默认自动生成一个html文件，并把打包生成的js/css自动引入到html文件中更多配置：https://github.com/jantimon/html-webpack-plugin#configuration安装 html-webpack-plugin 插件npm i html-webpack-plugin -D在webpack配置文件webpack.config...

2020-08-14 16:31:35 535

原创 2.webpack打包样式(css、less、sass)资源

常用的样式loaderstyle-loader : 将css样式加载到页面的标签里面css-loader: 解析( @import 和 url() ，会 import/require() 后再解析(resolve)它们。less-loader: 解析less语法postcss-loader: 添加css前缀，需要在项目根目录下新建postcss.config.js文件，进行相关配置。(一) 处理css文件在src文件夹中创建index.js文件，base.css文件，并在index.js

2020-08-14 16:31:14 339

原创 css和js面试题

(一) css面试1.盒子水平垂直居中(五大方案)定位：三种前提：父盒子相对定位，子盒绝对定位[1]. 父盒子有固定宽高，在子样式中写出计算出的子盒子应该距离顶部和左边的距离[2]. 父盒子有固定宽高.son{ position:absolute; top:0; left:0; right:0; bottom:0; margin: auto;}[3]. 问题：存在不兼容position:absolute;top:50%;left: 50%;transform:

2020-08-11 10:31:09 848

原创 2.sass笔记

(一) sass入门[1]. 安装安装ruby+devkithttps://rubyinstaller.org/downloads/(二) sass语法(三) sass函数(四) sass高级用法

2020-08-11 10:30:00 308

原创 1. less笔记

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。(一) 基础1.下载less.jshttps://github.com/less/less.js/tree/master/disthttps://www.html.cn/doc/less/#download-options2.目录结构3.在index.html文件头部先引入style.less文件和再引入less.min.js文件<!DOCTYPE

2020-08-11 10:29:41 266

原创 vue基础和原理

一、Vue使用(一) 基本使用，组件使用-常用，必须会[1]. 指令、插值插值、表达式指令、动态属性v-html:会有XSS风险，会覆盖子组件[2]. computed和watchcomputed 有缓存，data不变则不会重新计算watch如何深度监听？watch默认是浅监听watch监听引用类型，拿不到oldValue[3]. class和style使用动态属性使用驼峰写法[4]. class和stylev-if v-else的用法，可使用变量，也可以使

2020-08-11 10:28:33 833

原创 3. tree shaking、code splitting、splitchunksplugin、shimming等

(一) Tree shakinghttps://www.webpackjs.com/guides/tree-shaking/使用tree shaking 可以将没有使用的模块、方法、文件不进行打包，但是tree shaking只支持ES Module 引入的方式 (module.exports import from)在webpack.config.js文件中进行配置https://webpack.docschina.org/configuration/optimization/在packa

2020-07-07 10:22:21 473

原创 2.webpack与Loader、plugins、sourceMap和babel等

(一) webpack与Loaderhttps://www.webpackjs.com/loaders/https://blog.csdn.net/kouzuhuai2956/article/details/106119674webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。[1]. Loader打包静态资源（图片）https://www.webpackjs.com/loa

2020-07-06 10:35:51 565

空空如也

空空如也