j73909-CSDN博客

原创 dns-prefetch、preconnect、prefetch、prerender、preload和async、defer

1、页面解析的大致流程浏览器自上而下读取html文档（此过程叫html parser），当发现css文件时，浏览器parser停下来去下载解析css，等css下载并解析完毕，浏览器继续parser。紧接着发现js，于是parser又停了，浏览器下载并执行完js，继续parser。此时屏幕上还什么都没有。然后解析body内的标签。如果又发现js，浏览器又停下parser，下载并执行完js继续parser，直到页面渲染完毕。我们假设js中只有一行代码console.log('header')，但服务

2021-01-05 14:53:18 382

原创 DOM中各类继承关系

2021-01-05 11:05:36 236

原创分别用promise、generator、async方法，解决代码中出现的回调地狱问题

回调地狱：setTimeout(()=>{ console.log(1111) setTimeout(()=>{ console.log(2222) setTimeout(()=>{ console.log(3333) },3000) },2000)},1000)1、用Promisefunction pro(data, time) { return new Promis

2020-12-18 15:44:08 149

原创从URL到页面渲染，到底经历了些啥

1、构建请求行GET / HTTP/1.12、查找强缓存命中 -> 使用缓存，返回2003、DNS解析检查浏览器自身缓存是否有该域名对应的IP 检查本地host文件网址映射检查TCP/IP参数中设置的首选服务器(本地DNS服务器LDNS)，是否在本地配置区域资源中到根域名服务器进行解析，根域名服务器返回所查域的主域名服务器gTLD地址（.com，.cn，……）到主域名服务器进行解析，主域名服务器返回网站注册的域名服务器地址（Name Server）网站服务器找到目

2020-12-16 15:22:33 120

原创 json对象层序遍历例题

var obj = { a: { b: { c: { f: "aa" } }, d: { e: { g: "bb" }, h: { i: "cc" } }, j: { k: "dd" } } }// [f,g,i,c,e,h,k,b,d,j,a]function ff(obj) { let arr = [obj] let ans = [] let temp = [] let output = [] while(arr.length) { let i

2020-12-14 16:50:04 138

原创 JS手写IndexOf

function myIndexOf(str1, str2) { for(let i = 0; i < str1.length; i++) { let p1 = i, p2 = 0 while(str1[p1] === str2[p2] && p2 < str2.length) { p2++ p1++ } if(p2 === str2.length) return i } return -1}

2020-11-20 18:38:28 584 1

原创纯CSS无限上划动画效果

<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=.

2020-11-04 18:12:10 188

原创 JS链式调用异步方法

希望实现如下Tom.eat('breakfirst').sleep(3000).eat('lunch').sleep(3000).eat('dinner')依次打印：breakfirst sleep（等3秒）lunchsleep（等3秒）dinnerclass Person{ constructor() { this.queue = [] setTimeout(() => { this.next() })...

2020-10-30 17:51:59 891

原创 JS专属求所有子集方法

const f = arr => ( arr.reduce((prev, next) => [ ...prev, ...prev.map(item => [next, ...item]) ], [[]]))

2020-10-20 21:05:06 1121

原创 CSS的flex属性计算

起因：计算左右两个节点的宽度<div class="container"> <div class="left"></div> <div class="right"></div></div><style> * { padding: 0; margin: 0; } .container { width: 600px; height: 300px;

2020-10-14 11:49:36 358

原创 JS 必买书目

javascript dom编程艺术javascript高级程序设计（红宝书）JavaScript忍者秘籍（第2版）javascript框架设计javascript设计模式与开发实践javascript语言精粹与编程实践JavaScript编程精解(第3版)dom启蒙javascript函数式编程指南JavaScript异步编程JavaScript面向对象精要...

2020-10-13 18:16:27 104

原创统计body中所有标签出现的频率

Array.from(document.body.getElementsByTagName('*')).map(tag => tag.tagName).reduce((cur,next) => { if(cur[next]) cur[next]++ else cur[next] = 1 return cur}, {})

2020-10-10 11:31:16 112

原创关于JS中对象的深拷贝问题

1、最简单最省事JSON问题：function 和 undefined 两种类型的值会被忽略（不考虑自定义和API中提供的复杂类型）function clone(obj) { return JSON.parse(JSON.stringify(obj))}2、使用JQuery问题：循环引用会导致内存溢出$.extend( [deep ], target, object1 [, objectN ] )3、自己实现版本1.0，简单实现，递归运行效率低，次数过多的话容易造成

2020-10-09 15:22:19 164

原创我要写个Vue

一、作为一个MVVM框架，应该实现什么：数据响应式：监听数据变化并能及时在视图中更新（defineProperty，Proxy）模板引擎：提供描述视图的模板语法（插值，指令）渲染：将模板转化为html（vdom => dom）二、定义响应式拦截// 拦截定义// 处理新增对象属性function defineReactive (obj, key, val) { // 处理初始化时的深层对象 observe(val) Object.defineProperty(ob

2020-09-25 17:52:31 68

原创 Vue组件通信7种方式

组件化机制：vue组件系统提供了⼀种抽象，让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤，任意类型的应⽤界⾯都可以抽象为⼀个组件树。组件化能提⾼开发效率，⽅便重复使⽤，简化调试步骤，提升项⽬可维护性，便于多⼈协同开发。常用的组件通信方式：1、props/emit：父子组件之间的传值2、$on/$emit：事件总线，任意两个组件之间传值3、Vuex/localStorage：全局数据管理4、$parent/$children/$refs：高耦合性，直接访问父子组件实例5、$a.

2020-08-16 19:57:41 135

原创 git 提交单个文件夹下的所有修改

git status ./ 查看这个文件夹下的文件状态 git add ./* 把这个文件下的所有应该加入追踪的，加入到暂存区 git commit -m 日志描述./ 把这个文件夹下提交的修改commit到本地库 git push push到远程库...

2020-08-12 10:09:53 2296

原创文件上传能想到的点

1、uploader、axios.post，进度条（基础，这都想不到别往下看了，先动手做做吧）2、拖拽、复制粘贴3、分片、断点续传4、限制文件格式（读取文件头信息），判断文件唯一性（md5计算hash、webwork异步处理计算量过大、时间切片、抽样）5、文件切片过多，请求过多，导致卡顿（暂时想到promise 控制并发数量）6、上传报错怎么重试，重试报错怎么停止7、切片大小怎么根据设备或网络带宽进行控制8、待补充……...

2020-05-22 11:43:58 231

原创小程序canvas 操作整理

1、创建canvaslet ctx = wx.createCanvasContext('canvasPoster') // canvasPoster 是 canvas-id2、添加文字// 字号ctx.setFontSize(16)// 字体颜色ctx.setFillStyle('#2F3234')// 加粗ctx.fillText(title, 15, curheight - 0.1)ctx.fillText(title, 15 - 0.1, curheight)ctx.fi

2020-05-20 16:46:43 412

原创前端面试题整理

html + css基础1、CSS 盒子模型，绝对定位和相对定位：内容(content)、填充(padding)、边界(margin)、边框(border).position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位...

2019-05-08 17:46:04 425

转载 Webpack4+Vue2+ElementUI2项目搭建

Webpack4+Vue2+ElementUI2项目搭建1、第一步：使用npm全局安装webpack和vue-cli（如果安装速度慢，可以使用cnpm淘宝镜像安装,直接百度就有）$ npm install webpack vue-cli -g2、第二步：使用vue init命令创建模板文件（如果这时报错vue不是指定命令，请看后文报错总结）vue init 你用的模板工具项目名...

2019-04-23 11:36:24 1090