前端基础Javascript(JS概述+JS执行机制+浏览器内核)

前端开发基础(js篇)

欢迎来到我的第一篇前端笔记

你好! 这是我第一次决定好好整理一套完整的前端学习笔记,在前端学习的过程中我发现,单独拆开每一个知识点都没有那么难,但是如果不对学习的知识加以总结复习,很可能会出现多个知识点遗忘,搞混之类的问题,所以一定学习新东西的同时对旧的知识点加以温习,我也将在csdn上把这段时间的学习内容以及后续的学习内容持续记载在这里

前端学习路线

我是大学的时候接触了前端,大概掌握了(html+css+js),但是学的也很混,毕业设计是抄的一套小程序的代码敷衍了事,到现在刚好毕业一年,工作以后开始接触Python和文档类的工作,但是我觉得目前工作岗位受众面太小,技术壁垒低,在我离开这家公司后,并不能让我找到一个理想的岗位,又加上我确实喜欢前端这种反馈性强,可以随时看到自己编写的图像的语言,所以我决定再捡起这门技能,说是捡起来,其实之前学的基础也很一般,所以这次也就是从零开始,慢慢从小白成长。

我这边给自己制定的学习路线是html,css,js(ecmascript,dom,bom),前端网络,css3,html5,es6,vue的学习路线,从左到右依次学习,截止到这篇文章,我也是刚刚完成了js的学习,所以决定将js部分从头再捋一遍,记录笔记。

我是看网课学的,然后都是一边看一边用sublime记录笔记,部分代码跟着实现去体验效果这部分,整理笔记也是以我之前的记录为主

正文开始

JavaScript概述

前端,一个网页的实现需要多个语言的相互配合,html搭建出结构,css在html搭建的结构基础上,进行美化,设置样式,而JavaScript则是实现了网页的各项功能,如最简单的鼠标点击等用户交互功能,是最重要最基础的一部分。

首先要知道,js是解释性语言,计算机智能理解机器语言。采用高级语言写的程序代码若是想要呗计算机执行,必须将高级语言先翻译成机器语言,这个翻译过程存在两种方式,一种是编译,一种是解释。

JavaScript就是解释性语言,其特点是运行一句代码就翻译一句,不生成额外文件,效率偏低,可以跨平台。同样为解释性语言的还有php,python等,编译性语言则是一次性将代码整个翻译成机器语言,形成执行文件,运行时候调用执行文件,因此效率会更高,缺点则是生成的执行文件不能跨平台使用,比如在windows写好的代码,在linux就用不了,常见的编译性语言c,c++,java等。

JavaScript是三个东西的总称,是ES+DOM+BOM:
ES就是ECMAScript,ECMA是一个标准,为了统一规格。

DOM是操作文档的,也就是Document的缩写,通过操作DOM我们可以直接去修改html,css的内容,DOM能直接去修改html,间接的修改css。

BOM则是操作浏览器的。

JavaScript执行机制

js是单线程的,同一时间只做一件事情,js作为浏览器的脚本语言,主要是用来和用户进行互动,以及操作dom(文档),因为这种特性,导致js必须是单线程的,如果js同时拥有多个线程,那么同时添加和删除dom,js将无法界定执行哪个操作。

单线程就意味着,所有任务需要排队,执行完一个任务后才会执行另一个,如果前一个任务耗时
很长,后一个任务就需要一直等待下去。当遇到某种情况,尽管cpu处于空闲状态,但是还是需要等待上一个任务执行完毕(如等待网络请求等情况)时,对效率是很大的损耗。为了解决这种问题,js让这种情况下的主线程先挂起等待中的任务,执行排在后面的任务,等待之前的任务返回结果后,再回过头去执行刚因某种原因挂起的任务。

于是,所有任务可以分为两种,同步任务和异步任务,同步任务是指主线程上排队执行的任务,只有前一任务执行完毕,才执行后一个任务,异步任务是指不进入主线程,而进入一个特殊的‘任务队列’的任务,只有‘任务队列’通知主线程,某个异步任务可以执行,该任务才会进入主线程执行。顺便一提,计算机里的异步是指同时执行,同步是指同一时间智能做一件事情,和生活中的认知存在一定差异。

异步执行机制如下:
1 所有同步任务都在主线程上执行,形成一个执行栈
2 主线程之外,存在一个任务队列,只要异步任务有了运行结果,就在任务队列中放置一个事件
3 一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,看里面有哪些事件,对应的异步任务需要执行,如果有的话,就结束那些任务的等待状态,放入执行栈,开始执行
4 不断执行以上三个步骤

示意图:
在这里插入图片描述
总的来说,就是只要主线程空闲了,就回去读取那个独立出来的,存放异步任务的‘任务队列’,这就是js的运行机制,该过程会不断重复

举例子:

console.log("1");
setTimeout(function () {
	console.log("2");
}, 500);
console.log("3");

该段代码打印出来的结果,为 1 3 2,因为定时器是异步任务,输出3的时候没有等待定时器执行完毕就输出了,等定时器完毕后再回头打印2。

常见的异步任务:ajax(写到这里的时候我还不知道ajax是什么东西),dom事件操作,setTimeOut,promise的then方法,Node读取文件

浏览器内核

关于js的基本概述就是上面这些了,如果有遗漏我后面会补上,最后写一下浏览器内核,现在常见的浏览器内核:
1 IE浏览器内核:trident内核,也就是ie内核
2 Chrome内核,以前是webkit内核,现在更换为了其分支Blink内核
3 FireFox内核,Gecko内核
4 Opera内核,最早是Presto内核,改为webkit,现在是Blink

如今四大主流内核分别为,Trident,webkit,Blink,Gecko。五大浏览器(IE,Chrome,Firefox,Safari,Opera)所采用的都是单内核,但是随着发展现在也出现了双内核,如qq,360浏览器。

熟悉四大内核是非常有必要的,四大内核的解析不同是的网页渲染效果根据多样化。

引用:
浏览器内核部分原文链接:https://blog.csdn.net/yuyanjing123456789/article/details/78689595
执行机制部分原文链接:https://blog.csdn.net/weixin_34790159/article/details/112630119
执行机制部分原文链接:https://blog.csdn.net/qq_36995542/article/details/80007381

热门文章

暂无图片
编程学习 ·

那些年让我们目瞪口呆的bug

程序员一生与bug奋战,可谓是杀敌无数,见怪不怪了!在某知识社交平台中,一个“有哪些让程序员目瞪口呆的bug”的话题引来了6700多万的阅读,可见程序员们对一个话题的敏感度有多高。 1、麻省理工“只能发500英里的邮件” …
暂无图片
编程学习 ·

redis的下载与安装

下载redis wget http://download.redis.io/releases/redis-5.0.0.tar.gz解压redis tar -zxvf redis-5.0.0.tar.gz编译 make安装 make install快链方便进入redis ln -s redis-5.0.0 redis
暂无图片
编程学习 ·

《大话数据结构》第三章学习笔记--线性表(一)

线性表的定义 线性表:零个或多个数据元素的有限序列。 线性表元素的个数n定义为线性表的长度。n为0时,为空表。 在比较复杂的线性表中,一个数据元素可以由若干个数据项组成。 线性表的存储结构 顺序存储结构 可以用C语言中的一维数组来…
暂无图片
编程学习 ·

对象的扩展

文章目录对象的扩展属性的简洁表示法属性名表达式方法的name属性属性的可枚举性和遍历可枚举性属性的遍历super关键字对象的扩展运算符解构赋值扩展运算符AggregateError错误对象对象的扩展 属性的简洁表示法 const foo bar; const baz {foo}; baz // {foo: "bar"…
暂无图片
编程学习 ·

让程序员最头疼的5种编程语言

世界上的编程语言,按照其应用领域,可以粗略地分成三类。 有的语言是多面手,在很多不同的领域都能派上用场。大家学过的编程语言很多都属于这一类,比如说 C,Java, Python。 有的语言专注于某一特定的领域&…
暂无图片
编程学习 ·

写论文注意事项

参考链接 给研究生修改了一篇论文后,该985博导几近崩溃…… 重点分析 摘要与结论几乎重合 这一条是我见过研究生论文中最常出现的事情,很多情况下,他们论文中摘要部分与结论部分重复率超过70%。对于摘要而言,首先要用一小句话引…
暂无图片
编程学习 ·

安卓 串口开发

上图: 上码: 在APP grable添加 // 串口 需要配合在项目build.gradle中的repositories添加 maven {url "https://jitpack.io" }implementation com.github.licheedev.Android-SerialPort-API:serialport:1.0.1implementation com.jakewhart…
暂无图片
编程学习 ·

2021-2027年中国铪市场调研与发展趋势分析报告

2021-2027年中国铪市场调研与发展趋势分析报告 本报告研究中国市场铪的生产、消费及进出口情况,重点关注在中国市场扮演重要角色的全球及本土铪生产商,呈现这些厂商在中国市场的铪销量、收入、价格、毛利率、市场份额等关键指标。此外,针对…
暂无图片
编程学习 ·

Aggressive cows题目翻译

描述&#xff1a; Farmer John has built a new long barn, with N (2 < N < 100,000) stalls.&#xff08;John农民已经新建了一个长畜棚带有N&#xff08;2<N<100000&#xff09;个牛棚&#xff09; The stalls are located along a straight line at positions…
暂无图片
编程学习 ·

剖析组建PMO的6个大坑︱PMO深度实践

随着事业环境因素的不断纷繁演进&#xff0c;项目时代正在悄悄来临。设立项目经理转岗、要求PMP等项目管理证书已是基操&#xff0c;越来越多的组织开始组建PMO团队&#xff0c;大有曾经公司纷纷建造中台的气质&#xff08;当然两者的本质并不相同&#xff0c;只是说明这个趋势…
暂无图片
编程学习 ·

Flowable入门系列文章118 - 进程实例 07

1、获取流程实例的变量 GET运行时/进程实例/ {processInstanceId} /变量/ {变量名} 表1.获取流程实例的变量 - URL参数 参数需要值描述processInstanceId是串将流程实例的id添加到变量中。变量名是串要获取的变量的名称。 表2.获取流程实例的变量 - 响应代码 响应码描述200指…
暂无图片
编程学习 ·

微信每天自动给女[男]朋友发早安和土味情话

微信通知&#xff0c;每天给女朋友发早安、情话、诗句、天气信息等~ 前言 之前逛GitHub的时候发现了一个自动签到的小工具&#xff0c;b站、掘金等都可以&#xff0c;我看了下源码发现也是很简洁&#xff0c;也尝试用了一下&#xff0c;配置也都很简单&#xff0c;主要是他有一…
暂无图片
编程学习 ·

C语言二分查找详解

二分查找是一种知名度很高的查找算法&#xff0c;在对有序数列进行查找时效率远高于传统的顺序查找。 下面这张动图对比了二者的效率差距。 二分查找的基本思想就是通过把目标数和当前数列的中间数进行比较&#xff0c;从而确定目标数是在中间数的左边还是右边&#xff0c;将查…
暂无图片
编程学习 ·

项目经理,你有什么优势吗?

大侠被一个问题问住了&#xff1a;你和别人比&#xff0c;你的优势是什么呢? 大侠听到这个问题后&#xff0c;脱口而出道&#xff1a;“项目管理能力和经验啊。” 听者抬头看了一下大侠&#xff0c;显然听者对大侠的这个回答不是很满意&#xff0c;但也没有继续追问。 大侠回家…
暂无图片
编程学习 ·

nginx的负载均衡和故障转移

#注&#xff1a;proxy_temp_path和proxy_cache_path指定的路径必须在同一分区 proxy_temp_path /data0/proxy_temp_dir; #设置Web缓存区名称为cache_one&#xff0c;内存缓存空间大小为200MB&#xff0c;1天没有被访问的内容自动清除&#xff0c;硬盘缓存空间大小为30GB。 pro…
暂无图片
编程学习 ·

业务逻辑漏洞

身份认证安全 绕过身份认证的几种方法 暴力破解 测试方法∶在没有验证码限制或者一次验证码可以多次使用的地方&#xff0c;可以分为以下几种情况︰ (1)爆破用户名。当输入的用户名不存在时&#xff0c;会显示请输入正确用户名&#xff0c;或者用户名不存在 (2)已知用户名。…