Blog

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

埋点的需求：一个网站上线,开发者除了保证网站功能正常,体验优好之外,还有一项重要的工作是数据收集,通过收集用户的行为数据可以帮助了解网站的功能是否满足用户的需求,导流方式是否有效,新功能上线后是否效果是否达到设计初衷,根据数据指引有效优化产品体验以及发现新的产品方向是产品经理的必备技能,而如何采集准确并且足够的网站数据则应该是开发者的责任.在大数据处理能力越来越强下,以及机器学习等依赖数据哺育的工具进化下,采集足够多的数据往往是网站向着良性方向进化的必备条件

浏览器内核

• Trident:IE，360，搜狗

• Gecko：firefox

• webkit:safari，旧版chrome

• presto：旧版opera

• blink(webkit的一个分支)：新版chrome，新版opera

浏览器的渲染方式

1. 构建DOM树 浏览器请求到html代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求。（解码->令牌化->词法分析->dom树创建）

2. 构建CSSOM css文件加载完成，开始构建CSSOM（CSSOM只输出包含有样式的节点）

3. 生成渲染树（Render Tree） CSSOM构建结束后，和DOM一起生成Render Tree

4. 计算渲染树布局（Layout） 有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系。依照盒子模型，计算出每个节点在屏幕中的位置及尺寸。

5. 将布局Paint绘制到屏幕上 布局之后，浏览器知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置。所以接下来按照算出来的规则，通过显卡，把内容画在屏幕上。

CSS阻塞渲染：由于CSSOM负责存储渲染信息，浏览器就必须保证在合成渲染树之前，CSSOM是完备的，这种完备是指所有的CSS（内联、内部和外部）都已经下载完，并解析完，只有CSSOM和DOM的解析完全结束，浏览器才会进入下一步的渲染。CSS阻塞渲染意味着，在CSSOM完备前，页面将一直处理白屏状态，这就是为什么样式放在head中，仅仅是为了更快的解析CSS，保证更快的首次渲染。 JS阻塞页面：JS可以操作DOM来修改DOM结构，可以操作CSSOM来修改节点样式，这就导致了浏览器在解析HTML时，一旦碰到script，就会立即停止HTML的解析，也阻塞了其后的CSS解析，整个解析进程必须等待JS的执行完成才能够继续。从性能角度上讲，将script放在页面底部，也就合情合理了。

重绘（Repaint）：

当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

• 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要UI层面的重新像素绘制，因此 损耗较少。

触发重绘

1. DOM改动
2. CSS改动

重排（Reflow）：

DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。

• 回流(reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

触发重排

1. 当增加、删除、修改DOM节点时，会导致reflow或repaint
2. 当移动DOM的位置，或是插入动画的时候
3. 当修改CSS样式的时候
4. 当Resize窗口的时候，或是滚动的时候
5. 当修改网页的默认字体时

最小化重绘和重排

1. 避免频繁使用 style，而是采用修改class的方式。

2. 批量修改DOM：使用文档片段创建一个子树，然后再拷贝到文档中（document.fragment）使用createDocumentFragment进行批量的 DOM 操作。

3. 缓存布局信息

4. 对于 resize、scroll 等进行防抖/节流处理。

前端的工程化、模块化、组件化。

1. 广义的前端工程化

前端工程是软件工程的一个子类，指的是将软件工程的方法和原理运用在前端开发中, 目的是实现高效开发，有效协同，质量可控。

2. 狭义的前端工程化

前端工程是指将开发阶段代码转变成生产环境的代码的一系列步骤。主要包括构建，分支管理，自动化测试，部署等。

前端工程化的具体内容

1. 代码规范：保证团队所有成员以同样的规范开发代码。

2. 分支管理：不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。

3. 模块管理：一方面，团队引用的模块应该是规范的；另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。

4. 自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。

5. 构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源，

6. 部署：将构建好的代码部署到生产环境。

在做前端页面渲染时，经常会遇到有的组件需要跟随数据的变化而实时的变化，例如：一个线上报名系统，总人数有一定限制，所以要实时的展现已经报名的人数，应该怎么实现呢？最基本有如下3种方案：

• Ajax轮询
• Ajax长轮询(comet)
• websocket长连接

场景：事件频繁被触发，频繁执行DOM操作、资源加载等重复行为，导致UI停顿甚至浏览器崩溃。如 input 实时搜索、scrollview 滚动更新。

函数防抖和节流用于限制函数的执行。是优化高频率执行js代码的一种手段。

JS 是按照代码块进行 编译、执行 的。

javascript-puzzlers

void

void其实是javascript中的一个函数，接受一个参数，返回值永远是undefined void expression

1
2
3
4
5
6
7

void 0  
void() // 报错
void (0)  
void "hello"  
void (new Date())  
// all will return undefined  
context === void 666