
前端基础
沐风系大佬
我偷电瓶养你,联系方式qq:1215323732
展开
-
webpack打包策略、treeShaking
打包策略选择合适的打包粒度,生成的单文件大小不要超过500KB充分利用浏览器的并发请求,同时保证并发数不超过6尽可能让浏览器命中304,频繁改动的业务代码不要与公共代码打包避免加载太多用不到的代码,层级较深的页面进行异步加载基于以上原则,我选择的打包策略如下:第三方库如vue、jquery、bootstrap打包为一个文件公共组件如弹窗、菜单等打包为一个文件工具类、项目通用基类打包为一个文件各个功能模块打包出自己的入口文件各功能模块作用一个SPA,子页面进行异步加载代码分离原创 2022-01-26 10:08:05 · 349 阅读 · 0 评论 -
资料文件记录
package.json配置:https://www.cnblogs.com/wjlbk/p/12884673.html原创 2021-06-16 10:29:51 · 121 阅读 · 0 评论 -
手写js实现new
new的过程:1.创建新对象;2.将新对象的原型指向构造函数;3.将构造函数的属性绑定到新对象上;4.返回新对象;根据步骤我们一一实现function myNew(fn,...args){ let obj = {}; obj.__proto__ = fn.prototype; const result = fn.call(obj,...args); return result == 'object' ? result : obj;}...原创 2021-03-18 13:15:19 · 198 阅读 · 0 评论 -
import和require区别
1. 写法不一致exports/require写法const fs = require('fs') exports.fs = fs module.exports = fsimport/export写法import fs from 'fs'import {default as fs} from 'fs'import * as fs from 'fs'import {readFile} from 'fs'import {readFile as read} from 'fs'imp原创 2021-03-12 15:07:52 · 147 阅读 · 0 评论 -
addEventListener监听事件,以及初始加载页面触发问题
addEventListener("click",function(){},true);第三个参数:为true时捕获,false时冒泡;vue中使用methods:{ getPic(){ console.log("触发监听") if (window.defectPic !== "END") { this.picData = "data:image/png;base64," + window.defectPic; if (this.submitImgArr.length &l原创 2021-03-10 16:47:50 · 2833 阅读 · 0 评论 -
数据类型判断typeof instanceof
正则、null、array 、Date等都为object;instanceofconst [a3, b3, c3, d3] = [[], {}, new Date(), /\s/];console.log(a3 instanceof Array); // trueconsole.log(b3 instanceof Object); // trueconsole.log(c3 instanceof Date); // trueconsole.log(d3 instanceof RegExp); .原创 2021-03-10 09:46:25 · 123 阅读 · 0 评论 -
Tcp
TCP链接建立和关闭(3次握手4次挥手)客户端发送SYN包(SYN = 1, seq = x)至服务端,并处于SYN_SENT状态,等待服务器确认服务端解析SYN,并发送SYN + ACK(SYN = 1, ACK = x + 1, seq = y)包至客户端,并处于SYN_RECV状态,允许建立链接(告知服务器已做好准备,可以发送数据)客户端获取SYN + ACK 并发送ACK(ACK = y + 1, seq = z)包至服务端,链接建立成功。(即将开始发送数据)TCP向服务端发送带有FIN原创 2021-03-09 13:54:08 · 84 阅读 · 0 评论 -
闭包
1.可以读取函数内部的变量2.让这些变量的值始终保存在内存中原创 2021-03-08 10:53:14 · 69 阅读 · 0 评论 -
babel/polyfill
Babel官方文档:https://babeljs.io/docs/en/configurationbabel:目前接触到的是将ES6转换为ES5;polyfill:对浏览器不支持的API进行转换;(暂做笔记,后续更新)原创 2021-03-01 16:30:15 · 216 阅读 · 0 评论 -
浏览器的工作原理
记录:https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Event_loop原创 2021-02-22 13:08:13 · 123 阅读 · 0 评论 -
js数组内存分配
JavaScript 中的数组有很多特性:存放不同类型元素、数组长度可变等等,这与数据结构中定义的数组结构或者C++、Java等语言中的数组不太一样,那么JS数组的这些特性底层是如何实现的呢,我们打开V8引擎的源码,从中寻找到了答案。V8中对数组做了一层封装,使其有两种实现方式:快数组和慢数组,快数组底层是连续内存,通过索引直接定位,慢数组底层是哈希表,通过计算哈希值来定位。两种实现方式各有特点,有各自的使用情况,也会相互转换。一、背景使用 JS 的数组时,发现 JS 的数组可以存放不同类型的元素、并且转载 2021-02-22 11:02:41 · 3355 阅读 · 0 评论 -
重绘和回流
重绘和回流(重排)的区别和关系?#重绘:当渲染树中的元素外观(如:颜色)发生改变,不影响布局时,产生重绘回流:当渲染树中的元素的布局(如:尺寸、位置、隐藏/状态状态)发生改变时,产生重绘回流注意:JS 获取 Layout 属性值(如:offsetLeft、scrollTop、getComputedStyle 等)也会引起回流。因为浏览器需要通过回流计算最新值回流必将引起重绘,而重绘不一定会引起回流DOM结构中的各元素都有自己的盒子,这些都需要浏览器根据各种样式来计算并更具结果将元素放到它该出现的位原创 2021-02-20 14:47:40 · 115 阅读 · 0 评论 -
js遍历
原创 2021-02-02 10:45:48 · 137 阅读 · 0 评论 -
position、float、z-index分层问题
记录原创 2021-01-07 09:17:14 · 170 阅读 · 0 评论 -
npm scripts命令
在webpack执行命令之后可以添加一些参数,这些参数都有自己的作用,下面是参数列表:$ webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包$ webpack --watch //监听变动并自动打包$ webpack -p//压缩混淆脚本,这个非常非常重要!$ webpack -d//生成map映射文件,告知哪些模块被最终打包到哪里了其中的 $ webpack --progress //显示进度条$ webpack --原创 2020-12-24 15:03:03 · 244 阅读 · 0 评论 -
webpack配置
一、多个入口文件之前我们配置的都是 一个入口var webpack = require('webpack');var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = { //页面入口文件配置 entry: { index: './src/index.js' }, //入口文件输出配置 output: {转载 2020-12-24 14:58:22 · 213 阅读 · 1 评论 -
promise使用及解析及事件循环
转载:https://juejin.cn/post/6901658026794483725#commentfunction Promise (executor) { var self = this; self.status = 'pending'; self.value; self.reason; self.onResolvedCallbacks = []; // 存放所有成功的回调。 self.onRejectedCallbacks = []; // 存放原创 2020-12-04 10:20:12 · 1484 阅读 · 0 评论 -
SVG
矩形 rectx\y到浏览器的距离width/height定义svg图元大小rx/ry使矩形产生圆角style:fill填充色 stroke:边框颜色<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20...原创 2020-11-07 00:10:06 · 200 阅读 · 0 评论 -
sessionStorage/localStorage
sessionStorage:关闭tab页即删除数据,同IP多个tab页不可共用;localstorage/cookie:关闭tab页即不数据,同IP多个tab页可共用;原创 2020-10-20 10:06:19 · 144 阅读 · 0 评论