浏览器执行JS简介浏览器分成两大部分 渲染引擎和JS 引擎渲染引擎: 用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit JS 引擎:也称为JS 解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的v8
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以Javascript语言归为脚本语言,会逐行解释执行
概念是一种运行在客户端(浏览器)的编程语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画等交互效果
组成ECMAScript: ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商工共同遵守的一套JS语法工业标准
DOM—文档对象模型(Document Object Model)
文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小,位置,颜色等)
BOM—浏览器对象模型(Brows ...
官方镜像直装官方镜像安装好处:纯净 ,方便,简单
缺点:功能少,僵硬,只有给磁盘格式化分区之外,没有其他的功能,装系统本质上就是运行提前在U盘内放好的windows安装包
目前磁盘仅有的三种格式化方式
FAT32 exFAT NTFS
exFAT NTFS 非常挑主板,老旧电脑和老旧主板可能会无法识别
FAT32没有兼容性问题,几乎所有设备都能用,但是单个分区最大体积不能超过32G,不能存放体积超过4G的文件
所以用 FAT32 的话硬盘本身的格式就僵硬了,而你用后两者没有这个问题,但是兼容性又成了问题,因此又衍生出来了另外一种安装系统的方法,使用PE便携式操作系统辅助进行安装 , PE的优点是功能全且兼容性极广
可依据自己的喜好来选择,这里先讲解如何使用命令行来操作安装官方的ISO镜像文件
安装前准备:
一个正规的容量至少为 8G 的U盘
一个可以正常操作的电脑
一个聪明的大脑和一双灵巧的手
接下来就开始吧!
第一步,把U盘插到制作启动盘的电脑上,打开微软官网下载你要装对应的win10或是win11安装包(注意分辨清楚,不要进到第三方流氓网站上去了 ...
react是什么?React 是一个开源的 JavaScript 库,由Facebook开发,主要用于构建用户界面,特别是复杂的单页应用程序(SPA)。它专注于视图层,即用户界面的开发,可以与多种库或框架结合使用,以管理应用程序的状态和数据流动。
React 的特点:
虚拟 DOM:
React 引入了虚拟 DOM 的概念,这是一种内存中的轻量级数据结构,表示实际 DOM 的抽象。当应用状态改变时,React 会高效地计算出虚拟 DOM 的最小变更量,并将这些变更应用到实际 DOM 上,从而大幅提升了性能。
组件化开发:
React 鼓励采用组件化的方式来构建 UI,即将 UI 分解为可复用的独立组件。每个组件负责管理自己的状态(state)和属性(props),这样可以提高代码的模块化程度,易于维护和重用。
单向数据流:
React 推崇一种单向数据流的架构,数据通常自上而下地传递给组件树,这简化了状态管理和问题追踪,减少了数据流动的复杂性。
JSX:
JSX 是一种语法扩展,允许在 JavaScript 中混写 HTML 样式的代码。这使得描述 UI 结构变得更加直观 ...
事件循环(Event Loop)JavaScript是一门单线程的语言,在同一时间只能做一件事,js里面的代码要按照顺序逐行执行代码?比如说我们浏览新闻想要获取新闻图片,如果网络卡顿,获取了很长时间,难道就这样干等着吗?那肯定是不会的,给到用户的体验也是不好的
在js里所有的任务可以被分为同步任务和异步任务,异步任务里又有微任务和宏任务,
当我们打开网站时,网页的渲染过程就是一大堆同步任务,比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务,就是异步任务
事件循环运行机制
这种事件循环机制是由 JavaScript 的宿主环境来实现的,在浏览器运行环境中由浏览器内核引擎实现,而在 NodeJS 中则由 libuv 引擎实现。
主线程运行时候,产生堆(Heap)和栈(Stack),栈中的代码调用各种外部 API,它们在任务队列中加入各种事件。只要栈中的代码执行完毕,主线程就会通过事件循环机制读取任务队列,依次执行那些事件所对应的回调函数。
运行机制:
所有同步任务都在主线程上执行,形成一个 执行栈(Execution Context Stack)
主线程之外,还 ...
Ajax什么是ajax?AJAX 代表异步的 JavaScript 和 XML(Asynchronous JavaScript And XML)。简单点说,就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON、XML、HTML 和文本文件等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面
简单来说
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行
XMLHttpRequest 只是实现 Ajax 的一种方式
AJAX 不是新的编程语言,而是一种使用现有标准的新方法
是⼀个 默认异步执⾏机制的功能,AJAX分为同步(async = false)和异步(async = true)
什么是同步请求?(false)
同步请求是指当前发出请求后,浏览器什么都不能做, 必须得等到请求完成返回数据之后,才会执行后续的代码, 相当于生活中 ...
前端开发
未读垃圾回收机制是什么?垃圾回收机制(Garbage Collection) 简称 GC
JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存
当代码执行完毕的时候,JS引擎也会自动地将你的程序,所占用的内存清理掉
所谓垃圾回收机制就是清理内存的方式
垃圾回收机制是怎样进行的?可达性
简而言之,“可达”值是那些以某种方式可访问或可用的值。它们一定是存储在内存中的,是存在的。就不会被清除,反之就会被垃圾回收机制清除掉
那么它是如何找到“垃圾”,并且把它清除掉的呢?
主要有两种内存回收策略
1.引用计数法它的策略是跟踪记录每个变量值被使用的次数
这是最初级的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象(零引用),对象将被垃圾回收机制回收。
当声明了一个变量并且将一个引用类型赋值给该变量的时候这个值的引用次数就为 1
如果同一个值又被赋给另一个变量,那么引用数加 1
如果该变量的值被其他的值覆盖了,则引用次数减 1
当这个值的引用次数变为 0 的时候,说明没有变量在使用,这个值没 ...
pop
数组尾部删除
123const fruits = ['西瓜','葡萄','哈密瓜','芒果','香蕉']fruits.pop()console.log(fruits);
push
数组尾部添加
123const fruits = ['西瓜','葡萄','哈密瓜','芒果','香蕉']fruits.push('榴莲')console.log(fruits);
unshift
数组头部添加
123const fruits = ['西瓜','葡萄','哈密瓜','芒果','香蕉'] fruits.unshift('樱桃')console.log(fruits);
shift
数组头部删除
123const fruits = [' ...
事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现。DOM 支持大量的事件,事件是程序在运行的时候,发生的特定动作或者特定的事情
下面是一些比较常用的DOM事件
鼠标事件
click (点击事件)
123button.addEventListener('click',function(){ alert('我是点击事件的弹框')})
mouseenter / mouseleave (鼠标移入/鼠标离开)
123box.addEventListener('mouseenter',function(){ console.log('鼠标移入了');})
123box.addEventListener('mouseleave',function(){ console.log('鼠标离开了');})
mousemove (鼠标移动)
123box. ...
Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
Flex 容器:首先,实现 flex 布局需要先指定一个容器,任何一个容器都可以被指定为 flex 布局,这样容器内部的元素就可以使用 flex 来进行布局。
123.container { display: flex }
需要注意的是:当时设置 flex 布局之后,子元素的 flo ...
前端开发
未读在计算机中大家都知道数据都是以二进制的形式进行存储的,所有的数字都被转换成了一串数字0和1
十进制转二进制十进制转换二进制的方法相信大家都熟能生巧了,如果你说你还不知道,我觉得你还是太谦虚,可能你只是忘记了,即使你真的忘记了,不怕,我们一起来回忆一下。
对于大于1的十进制采用的是除2取余,比如数字8转二进制过程如下图:
而对于小于1十进制小数转为二进制则采用的是乘2取整法,将十进制中的小数部分乘以 2 作为二进制的一位,然后继续取小数部分乘以 2 作为下一位,直到不存在小数为止
如果我们用相同的方式,来把 0.1 转换成二进制,过程如下:
可以发现,0.1 的二进制表示是无限循环的。
由于计算机的资源是有限的,所以是没办法用二进制精确的表示 0.1,只能用「近似值」来表示,就是在有限的精度情况下,最大化接近 0.1 的二进制数,于是就会造成精度缺失的情况。
计算机是如何存储二进制小数的?计算机存储小数的采用的是浮点数,通俗的理解「浮点」表示小数点是可以浮动的
比如 1000.101 这个二进制数,可以表示成 1.000101 x 2^3,类似于数学上的科学记数法
可能有的同学距 ...