Web开发基础-Node.js-01

01-浏览器工作原理

1)人机交互部分(ui)

2)网络请求部分(socket)

3)javascript引擎

4)渲染引擎(解析html,css)

5)数据存储部分(cookie,本地存储等)

--渲染引擎介绍

工作原理:

解析html,构建dom树

构建渲染树

对渲染树布局

绘制渲染树,调用操作系统底层API进行绘图操作

02渲染器工作原理-WEB-worker

简介:

JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。

----------重点------------

为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。

Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,不应该过度使用,而且一旦使用完毕,就应该关闭。

----------使用须知---------

(1)同源限制

分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

(2)DOM 限制

Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用document、window、parent这些对象。但是,Worker 线程可以使用navigator对象和location对象。

(3)通信联系

Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

(4)脚本限制

Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

(5)文件限制

Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

------详见-------

阮一峰

02-渲染器工作原理

1、概述

渲染引擎的主要职责是在浏览器屏幕上显示请求的页面。

渲染引擎可以显示HTML和XML文档和图像。如果您使用额外的插件,引擎还可以显示不同类型的文档,如PDF。

2、渲染引擎

Gecko - 火狐

WebKit - Safari

Blink - Chrome,Opera

3、渲染过程

解析HTML以构造DOM树

构建渲染树

布局渲染树

绘制渲染树

4、href=https://segmentfault.com/a/1190000014738736----详见-----

5、名词解释

SPA:Single pages web application/咳咳

Web Workers:http://www.ruanyifeng.com/blog/2018/07/web-worker.html?20190318210447#comment-last

---------额外---------

https://blog.csdn.net/u010794365/article/details/77982768

https://segmentfault.com/

http://www.ruanyifeng.com/blog/

https://github.com/NationalSecurityAgency/ghidra

03-浏览器工作流程

对url进行请求报文封装,寻找服务器ip,服务器解析请求报文,生成响应报文,解析报文,生成DOM树,构建渲染树,布局渲染树,绘制渲染树。

04-了解http请求处理响应

05-Node.js了解

简介

1、Node.js开发平台,JavaScript开发语言

2、集成chrome V8JavaScript引擎,

3、可用的API

能力:

1、命令行程序

2、借助第三方开发界面应用程序(GUI)

3、开发网站

Node.js全栈:MEAN -MongoDB, Express,Angular,Node.js

特点:

1、事件驱动

2、非阻塞 I/O模型:输入输出

3、单线程

4、npm

文档:

原文地址:https://www.cnblogs.com/fenqinearl/p/10562023.html

时间: 2024-11-11 07:59:40

Web开发基础-Node.js-01的相关文章

浏览器---WEB开发基础之三

通过HTTP协议的介绍,打开网页必须建立TCP连接,然后通过HTTP协议进行交互,因此,浏览器访问网址,第一件事就是建立TCP连接,但是TCP连接是基于IP的,而我们输入的却是网址,所以,实际上第一件事,应该是通过DNS去查找网址(也就是域名)对应的主机的IP,然后才是三次握手建立TCP连接(此处知识详见<计算机网络基础>),然后浏览器向服务器发送: GET HTTP://www.baidu.com HTTP/1.1  Accept: application/x-ms-application,

web开发基础--字节序

1.有效位 在谈字节序前需要先了解有效位,有效位分为两种:最低有效位(LSB: Least Significant Bit) 和最高有效位(MSB:Most Significant Bit).在二进制数中,LSB是最低加权位,与十进制数字中最右边的一位类似:MSB是最高加权位,与十进制数字中最左边的一位类似.通常,MSB位于二进制数的最左侧,LSB位于二进制数的最右侧.以一个十进制的数12345678为例,最高有效位就是1,最低有效位就是8. 2.字节序: 字节序,顾名思义字节的顺序,就是大于一

PHP 系列:PHP Web 开发基础

PHP是动态类型的Web开发的脚本语言,PHP以页面文件作为加载和运行的单元,PHP现在有了Composer作为开发包管理. 1.使用Composer管理依赖 自从.NET开发用了Nuget管理程序集依赖,我就再也离不开它了,幸亏Java中也有Maven管理jar包,虽然开源中国的镜像太慢但还有ibiblio的镜像可用,PHP现在终于有了Composer(参考1)用来管理资源包. (1)全局安装(参考2) 在指定安装目录中执行命令行: php -r "readfile('https://getc

72.vue开发工具node.js以及构建工具webpack

1.概念 node.js:可以运行JavaScript的服务平台,可以把它当做一个后端程序,只是它的开发语言是JavaScript (通常情况下,JavaScript的运行环境都是浏览器,因此JavaScript的能力也就局限于浏览器能赋予它的权限了.比如说读写本地系统文件这种操作,一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的.如果我们想用JavaScript写出一些能够运行在操作系统上的,能够具有像PHP,JAVA之类的编程语言具有的功能的程序该怎么办呢?Node.j

Java Web开发基础(3)-JSTL

在DRP项目中接触到了JSTL标签库,对我这样的比較懒的人来说,第一感觉就是"惊艳". JSTL标签库的使用.能够消除大量复杂.繁复的工作.工作量降低的不是一点半点.是降低了一大半.不论什么工具的引入,都会使我们的工作变的简单.可是问题是我们工作能够变的简单,可是我们不能让自己的大脑变的简单.所以,我们不是简单的会用就能够.我们还须要了解这个工具是怎样工作的.怎样为我们提供便利的.ok.以下进入正题,我们从问题開始-- JSP脚本带来的问题 不知道看到这几个子,各位有什么想法?反正我认

移动web开发基础知识

首先做开发码子编完了我们得有个工具去看效果,PC端开发我们有firefox,chrome等等,那么我们做手机web用什么做调试?手机设备多种多样,不同品牌,不同的屏幕尺寸.当然我们不可能把所有的手机设备都买齐了,然后在开发的时候,在桌子上从左到右依次摆放,在写了一段代码之后,从左到右依次刷新,呵呵.如果真有人这么去做,我也不说啥了,我只求跪求土豪咱做朋友吧~嘿嘿. 废话说了一推,说回重点:首先,移动web开发咱需要一个调试工具. 1.Google emulation:谷歌的移动端模拟器,简单的理

Angular Material串串学客户端开发 2 - Node.js模块加载机制Require()

题外话解一下博客标题,因为第一篇文章评论中,有人质疑离题很远,说了半天和Angular Material没有半毛关系.其实我的的中心在后半句<串串学客户端开发>. require() 不要把这里的Require()和RequireJS混为一谈.不过有意思的是,Typescript的模块定义,甚至同时支持这两种模块机制. 导入和使用外部模块,只是简单的一句require(),看看angular/material/docs下的编译文件gulpfile.js的代码片段.对模块导入和使用有个直观的感觉

Java Web开发基础(2)-JSP

上一篇博我粗略的介绍了一下Servlet.粗略是由于博主也刚刚学习这部分的内容,还不是非常懂所以无法讲的非常精细.可是本着二八原则,我还是先继续学习.所以,这篇博客接着JSP的内容.由于.这两个内容关联性还是比較强的,学习的过程也应该是互相促进的. 简单介绍 概述:JSP(Java Server Page)简单的说是一种动态网页技术.它通过在HTML网页中嵌入可以生成动态内容的程序代码.来实现静态内容和动态内容在终于呈现给client的统一. 也就是说在HTML页中可以存在着JavaBean,J

第十七章:Python の Web开发基础(四) MVC与Django

本課主題 MVC 介绍 Django 介紹 MVC 介绍 controllers 处理用户请求 views 放置HTML模版 models 操作数据库 MVC框架就是目录的归类 MVC 是一种软件开发的方法,它把代码的定义和数据访问的方法(模型)与请求逻辑 (控制器)还有用户接口(视图)分开来 Django 介紹 Django开发的一般流程包括模型设计.URL设计.视图编码.模板设计,搭建Django应用的一种典型流程是:先设计好模型,然后就尽快把admin 运行起来,以便你的员工.客户可以尽快