js渲染html函数,JS-相关概念&浏览器渲染原理

标识符

所谓标识符是指变量、函数、属性的名字，或者函数的参数。标识符的书写有几个特征：

区分大小写

第一个字符必须是字母、下划线(_)、或者是$

后面的可以是字母、数字、下划线、$

命名规约

使用是实际意义的单词

变量使用驼峰规则，第一个单词首字母小写，后面单词首字母大写

变量使用名词，方法函数使用动词开头，常量全部用大写字母，函数创建对象首字母大写

var firstName;

var isSmall;

var hasClass;

var PI;

var MAX_COUNT;

function getName(){}

function Person(){}

变量

定义变量使用var运算符，var 标识符名称

var message;

弱类型

强类型:在一些编译语言(C、Java、C#)等变量的类型是固定的，变量的类型在声明时就决定，在程序执行前编译阶段变量的类型就确定了，而且不能改变。

弱类型：

一些解释型语言(PHP、JavaScript)等变量的类型是松散的，一个变量可以用来保存任何类型的数据，变量的类型不是由声明时决定(声明的时候只是用了var运算符)，而是在程序执行阶段由其值的类型决定，随着程序运行值类型改变，变量类型也会发生改变。

var message = 1; //message 类型就是数字

message = "hello world!"; //message 类型变为字符串

语句

JavaScript中语句以;结束，一行可以包含多条语句，省略分号不会产生语法错误，解释器会自动判断语句结束.

变量提升

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。造成所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。

当我们写了一个赋值语句

var a = 2;

实际上执行过程是解释器先解析出变量声明，给他初始值undefined，然后才逐句执行程序

var a;

a = 2;

关键字和保留字

关键字有：

break else new var

case finally return void

catch for switch while

continue function this with

default if throw

delete in try

do instanceof typeof

保留字(未来可能会用到，故保留)：

abstract enum int short

boolean export interface static

bye extends long super

char final native synchronized

class float package throws

const goto private transient

debugger implements protected volatile

doubler import public

网页

网页 = Html+CSS+JavaScript

Html: 网页元素内容

CSS: 控制网页样式

JavaScript：操作网页内容，实现功能或者效果

javascript

是客户端脚本语言

JavaScript由三部分组成(ECMAScript, DOM, BOM)

ECMAScript：核心语言功能

ECMAScript规定了语言的组成部分(语法、类型、关键字、保留字、操作符、对象)web浏览器只是ECMAScript实现的可能的宿主环境之一，宿主环境不仅提供基本的ECMAScript实现，同时也提供该语言的扩展(比如DOM)，以便语言与环境直接的对接交互。其他宿主环境包括Node( Node.js 就是运行在服务端的 JavaScript)

文档对象模型(DOM)：提供访问和操作网页内容的方法和接口

DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点，通过DOM创建的这个表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。

浏览器对象模型(BOM)：提供与浏览器交互的方法和接口(弹出新浏览起窗口等)

引入方式

可以放在html的任何地方引入(但建议将JS放在body标签内的底部)，两种方式，使用时只能二者选其一

1.

alert(1);

浏览器渲染机制(chrome)

解析 HTML 标签, 构建 DOM 树

解析 CSS 标签, 构建 CSSOM 树

把 DOM 和 CSSOM 组合成 渲染树 (render tree)

在渲染树的基础上进行布局, 计算每个节点的几何结构

把每个节点绘制到屏幕上 (painting)

解释白屏问题和 无样式内容闪烁(FOUC)

白屏的根本原因是浏览器在渲染的时候请求时间过长造成的。

Chrome的渲染流程大致是HTML-->Dom-->Css-->Cssom-->Render Tree-->进行计算-->painting最终才是我们看到的网页界面。

1.如果把样式放在底部，对于IE浏览器，页面会出现白屏，而不是内容逐步展现

2.如果使用@import，即使css放入link，也可能出现白屏,因为import会导致CSS文件不能并行下载。所以，要尽量避免使用css @import而尽量采用link标签的方式引入，让多个css可以并行下载。

3.js脚本会阻塞后面内容的呈现和其后组件的下载，对于图片和CSS, 在加载时会并行加载，但在加载js时，会禁用并行，并且阻止其他内容的下载。所以将js放在页面的顶部也可能会导致白屏。建议将JS放在body标签内的底部(当操作dom节点时节点存在+防止白屏)

js上存在并发，而不存在并行。

并发的关键是你有处理多个任务的能力，不一定要同时。

并行的关键是你有同时处理多个任务的能力。

所以它们最关键的点就是：是否是『同时』。

并行:在一个 js 线程上不存在并行(JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事)，即同一个时间只能执行一段 js 代码。

并发是指这个系统拥有处理多个任务的能力，并不要求同时性。当js的setTimeout执行时，其实是把setTimeout里的函数加入了消息队列，等系统空闲时再依次处理。此时系统利用消息队列，相当于拥有了并发的能力。

FOUC (Flash of Unstyled Content) 无样式内容闪烁

FOUC 指逐步加载无样式的内容,等CSS加载后页面突然展现样式，对于Firefox，渲染机制与chrome略有不同，因此会出现FOUC；把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现FOUC现象，对于 Firefox 会一直表现出 FOUC .

同步加载

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载(如图像)、渲染、代码执行。

没有 defer 或 async即称为同步模式，又称阻塞模式。浏览器会立即加载并执行指定的脚本，也就是不等待后续载入的文档元素，读到就加载并执行。js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。所以一般建议把标签放在

结尾处，这样尽可能减少页面阻塞。

异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理，就是并行处理

defer延迟执行：脚本立即下载，延迟到文档解析和显示后执行，保证脚本执行顺序，script1先于script2执行。

async异步属性：脚本立即下载，延迟到文档解析和显示后执行，不保证顺序。这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。

简单说：同步加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并行模型。

基本调试

打开审查元素，看下报错提示，打个断点，利用alert和console.log输出中间的过程，看下每一步是不是和预期一样

alert

console.log 相比alert更优，一般都是采用console.log

打断点 点击source，打开JS文件，打断点，运行查找错误

二分法 每次将代码注释掉一半，几次之后，必能定位到错误点

参考