Node

Posted liufuyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Node相关的知识,希望对你有一定的参考价值。

一、客户端 vs 服务器

二、静态页面 vs 动态页面

三、什么是node.js

  1.node.js是一个基于Chrome的V8引擎的javascript运行环境使用了事件驱动以及非阻塞的I/O式模型

    nodejs中的npm是全球最大的包管理网站

  2.V8引擎是一款最好的JavaScript脚本引擎    渲染引擎

  3.I/O模型

    I:input

    O:output

  4、npm是一个命令,是一个网站,也是一个包

    npm install: 安装package.json中的依赖

    npm install 包名 --save 生产环境的依赖

    npm install 包名 --save-dev 开发环境的依赖

    npm install 包名 -g 全局安装

    npm update 包名 升级

    npm uninstall包名 卸载包

    npm cache clean 清除缓存 

  5、yarn(推荐)包管理器

    cnpm install yarn -g

    cnpm install jQuery

  6、nodejs与原生js的区别

    1.原生js中有BOM DOM,但是nodejs是运行在服务端的js环境,因此是没有BOM DOM的概念(跨域的概念也没有)

    2.nodejs中也有js中js没有的属性 process global

    3.如何进入node的交互环境(node回车),退出(ctrl+c两次或Ctrl+d)

    4.nodejs可以调用底层的API 文件的读写 服务器的创建 环境变量的配置 链接数据库 操作数据库。。。

  7.node的实际项目应用(中间层)

    优点:高并发

    缺点:不擅长计算

  8.模块化

    requirejs seajs(不常用) module common

    模块化的规范:如何导入模块 如何导出模块

    module: import export export default

    common: require module.exports

  9.nodejs中的模块分为哪几个部分

    1.内置模块

    2.第三方模块

    3.自定义模块

面试题:

  1.浏览器渲染页面的流程

    渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。下面是渲染引擎在取得内容之后的基本流程:

  解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

技术图片

   这里先解释一下几个概念,方便大家理解:

  DOM Tree:浏览器将HTML解析成树形的数据结构。

  CSS Rule Tree:浏览器将CSS解析成树形的数据结构。

  Render Tree: DOM和CSSOM合并后生成Render Tree。

  layout: 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。

  painting: 按照算出来的规则,通过显卡,把内容画到屏幕上。

  reflow(回流):当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

  repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

注意:(1)display:none 的节点不会被加入Render Tree,而visibility: hidden 则会,所以,如果某个节点最开始是不显示的,设为display:none是更优的。

     (2)display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现位置变化。

   (3)有些情况下,比如修改了元素的样式,浏览器并不会立刻reflow 或 repaint 一次,而是会把这样的操作积攒一批,然后做一次 reflow,这又叫异步 reflow 或增量异步 reflow。但是在有些情况下,比如resize 窗口,改变了页面默认的字体等。对于这些操作,浏览器会马上进行 reflow。

 

  来看看webkit的主要流程:

技术图片

 

  再来看看Geoko的主要流程:

技术图片

 


  Gecko 里把格式化好的可视元素称做“帧树”(Frame tree)。每个元素就是一个帧(frame)。 webkit 则使用”渲染树”这个术语,渲染树由”渲染对象”组成。webkit 里使用”layout”表示元素的布局,Gecko则称为”reflow”。Webkit使用”Attachment”来连接DOM节点与可视化信息以构建渲染树。一个非语义上的小差别是Gecko在HTML与DOM树之间有一个附加的层 ,称作”content sink”,是创建DOM对象的工厂。

  尽管Webkit与Gecko使用略微不同的术语,这个过程还是基本相同的,如下:

  1. 浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

  2. 将CSS解析成 CSS Rule Tree 。

  3. 根据DOM树和CSSOM来构造 Rendering Tree。注意:Rendering Tree 渲染树并不等同于 DOM 树,因为一些像Header或display:none的东西就没必要放在渲染树中了。

  4. 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout,顾名思义就是计算出每个节点在屏幕中的位置。

  5. 再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。

  注意:上述这个过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容

  2.企业项目中为什么要使用nodejs

    动态语言:开发效率非常高,并有能力构建复杂系统,如ql.io。

    性能和I/O负载:Nodejs非常好的解决了IO密集的问题,通过异步IO来实现。

    连接的内存开销:每个Node.js进程可以支持超过12万活跃的连接,每个连接消耗大约2K的内存。

    操作性:实现了Nodejs对于内存堆栈的监控系统。

  3.AMD && CMD之间的区别

    依赖前置(AMD)先引进后使用

    依赖就近(CMD)使用哪个引进哪个

以上是关于Node的主要内容,如果未能解决你的问题,请参考以下文章

关于 Nodenode-sass 版本不匹配导致的 Vue 项目装包报错的问题

代码测试

树的遍历

leetcode590

递归方式遍历二叉树:

判断两个单链表是否相交