从进程,线程去了解浏览器内部的流程原理(梳理)
真正落实到把每一个点讲清楚!!!
大家好,本人是 我是哪吒,个人Github账号 webVueBlog ,系列文章更多来源,欢迎 Follow
本文章的特点,通俗易懂,比什么浏览器原理的某些文章更加从小白的点,一步步带入理解,从一个点慢慢扩散到体系闭环。讲到的点,词,都是有关联的哦,注意一下哦!
1. 我们都知道JS是单线程的,那么什么是进程,线程呢?CPU是计算机的核心,它承担了所有的计算任务,就像是一座工厂,时刻在运行。假定工厂的电力是有限的,一次只能供给一个车间使用。也就是说,一个车间开工的时候,其他车间都必须停工。背后的含义就是,单个CPU一次只能运行一个任务。
那么进程就好比工厂的车间,它代表CPU所能处理的单个任务。(进程是CPU资源分配的最小单位,是能拥有资源和独立运行的最小单位;字面意思就是进行中的程序,将它理解为一个可以独立运行且拥有自己的资源空间的任务程序,进程包括运行中的程序和程序所使用到的内存和系统资源)进程之间相互独立,任一时刻,CPU总是运行一个进程,其他进程处于非运行状态。
但进程相对于来说就是一个应用软件启动或者打开一个浏览器tab标签,运行多个进程, ...
全新一代状态管理工具Pinia
Pinia的优势,环境安装和课程介绍Pinia是Vue生态里Vuex的代替者,一个全新Vue的状态管理库。在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia。那先来看看Pinia比Vuex好的地方,也就是Pinia的五大优势。
可以对Vue2和Vue3做到很好的支持,也就是老项目也可以使用Pinia。
抛弃了Mutations的操作,只有state、getters和actions.极大的简化了状态管理库的使用,让代码编写更加容易直观。
不需要嵌套模块,符合Vue3的Composition api ,让代码更加扁平化。
完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持,所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化,一定知道Vuex对TS的语法支持不是完整的(经常被吐槽)。
代码更加简洁,可以实现很好的代码自动分割。Vue2的时代,写代码需要来回翻滚屏幕屏幕找变量,非常的麻烦,Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割,pinia也同样继承了这个优点。
如果你说这五点有点太多了,记不住。 ...
合集·海量技术面试题库,算法、数据结构、题库
两数之和 - 力扣(LeetCode)
两数相加 - 力扣(LeetCode)
无重复字符的最长子串 - 力扣(LeetCode)
寻找两个正序数组的中位数 - 力扣(LeetCode)
最长回文子串 - 力扣(LeetCode)
Z 字形变换 - 力扣(LeetCode)
整数反转 - 力扣(LeetCode)
字符串转换整数 (atoi) - 力扣(LeetCode)
回文数 - 力扣(LeetCode)
正则表达式匹配 - 力扣(LeetCode)
盛最多水的容器 - 力扣(LeetCode)
整数转罗马数字 - 力扣(LeetCode)
罗马数字转整数 - 力扣(LeetCode)
...
JS前端技术类文章
本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。
前沿装饰器装饰器是一种函数,写成@ + 函数名。它可以放在类和类方法的定义前面。
装饰器的行为
1234567@decoratorclass A {}// 等同于class A {}A = decorator(A) || A;
装饰器函数的第一个参数,就是所要装饰的目标类。
注意,装饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,装饰器能在编译阶段运行代码。也就是说,装饰器本质就是编译时执行的函数。
添加实例属性
123456789function testable(target) { target.prototype.isTestable = true;}@testableclass MyTestableClass {}let obj = new MyTestableClass();obj.isTestable // true
Object.assign()Object.assign() 方法用于将所有可枚举属性的值从 ...
Webpack前端技术类文章
前沿
webpack是前端打包工具,是大前端自动化工厂的重要组成部分,webpack的主要是打包,webpack作为自动化工具链的一部分集成更大的工具系统,而不是将一切需求的实现都寄望于webpack。
wepack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包,它能有Grunt或Gulp所有基本功能。
优势:
支持commonJS和AMD模块
支持很多模块加载器的调用,可以使模块加载器灵活定制,比如babel-loader加载器,该加载器能使我们使用ES6的语法来编写代码
可以通过配置打包成多个文件,有效的利用浏览器的缓存功能提升性能
使用模块加载器,可以支持sass,less等处理器进行打包且支持静态资源样式及图片进行打包
12345npm install -g webpack// 项目配置项// cd 打开npm init
package.json
1234567891011{ "name": "jeskson", "version": "1.0.0", "d ...
一个合格的中级前端工程师需要掌握的技能笔记(下)
每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021加油!欢迎关注加我vx:xiaoda0423,欢迎点赞、收藏和评论
不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。
前言如何实现路由懒加载1{ path: '/login', component: () => import('@/views/login/index'), hidden: true },
路由懒加载中的魔法注释通过在注释中指定webpackChunkName,可以自定义这个文件的名字。
1components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue")
windows环境搭建Vue开发环境
设置nodejs prefix(全局)和cache(缓存)路径
在nodejs安装路径下,新建n ...
vue-axios-vuex-全家桶
Github来源: | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者
axiosAxios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。简单来说就是前端最火最简单的一个http请求解决方案。
功能
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
代码封装工具类封装
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 ...
已阅冴羽大佬文章
顺便宣传一下:Github来源: | 求星星 ✨ | 欢迎 star,鼓励一下作者。
希望能够帮助更多的小伙伴。加我😚即可交流问题(不是大佬,互相学习,创造良好的学习环境)。以下哪些你不懂呢?
哪里不懂的,我们可以下方评论交流
扩展的对象功能
对象类别
命名一个函数为 createPerson() ,其作用创建了一个对象:
123456function createPerson(name, age) { return { name: name, age: age };}
当对象的一个属性名称与本地变量名相同时,ES6:
123456function createPerson(name, age) { return { name, age },}
当对象字面量中的属性只有名称时, JS 引擎会在周边作用域查找同名变量。若找到,该变量 的值将会被赋给对象字面量的同名属性。
es5写法:
123456var person = { name: 'jeskson ...
【周一】前端日常总结
推荐: TypeScript趁早学习提高职场竞争力
Github来源: | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者
希望能够帮助更多的小伙伴。加我😚即可交流问题(不是大佬,互相学习,创造良好的学习环境)。以下哪些你不懂呢?
1.关于es5和es6得继承问题
es5的继承是 先创建子类的实例对象,然后将父类的方法添加到this上,Parent.apply(this)
es6的继承是 先创建父类的实例对象this,所以先调用父类的super()方法,然后再用子类的构造函数修改this
es5的继承是 通过原型或构造函数机制来实现
es6通过class关键字定义类,其中有构造方法,类之间通过extends关键字来实现继承
字类必须再constructor方法中调用super方法,否则新建实例报错
super关键字表示 父类的实例,即是父类的this对象
在子类构造函数中调用super后,才可使用this关键字,否则报错
2.innerHTML和outHTML的区别12345<div id="dadaqianduan">我喜欢你< ...
一份不可多得的TypeScript系统入门整理
theme: cyanosis
推荐: TypeScript趁早学习提高职场竞争力
Github来源: | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者
在另一页面打开即可高清
TypeScript开发全局安装typescript,使用安装命令可以使用npm也可以使用yarn:
123npm install typescript -gyarn global add typescript
demo.ts12345678910function jeskson() { let web: string = "hello world" console.log(web)}jeskson()// tsctes demo.tsnode demo.js
1npm install -g ts-node
数据类型
TS的数据类型
1234567// ES6的数据类型:基本数据类型:Boolean,Number,String,Symbol,undefined,null引用类型:Array,Function,Object// TS的数据 ...