1、客户端渲染与服务端渲染的区别
一、客户端渲染:前端利用ajax等数据交互手段获取服务端提供的数据以后,渲染到HTML页面。
优势:灵活,真正的先后端分离,方便于先后台各自更新维护;
缺点: 对SEO不友好,增长了http请求次数,减缓了页面加载速度。
二、服务端渲染:在后端看来,页面文件其实就是一个“字符串”,因此服务端彻底能够在获取到HTML文件的内容以后通过一些处理再返回给客户端,也就说,服务端能够将数据插入到HTML字符串中以后再返回给客户端。
优势: 对SEO友好,减小了http请求次数,加速了页面初次渲染速度;
缺点: 不灵活,先后端耦合度过高。css
2、浏览器渲染页面的流程
一、浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当前节点的全部子节点都构建好后才会去构建当前节点的下一个兄弟节点。
二、将CSS解析成 CSS Rule Tree 。
三、根据DOM树和CSSOM来构造Rendering Tree。注意:Rendering Tree 渲染树并不等同于 DOM 树,由于一些像 Header 或 display:none 的东西就不必放在渲染树中了。
四、有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操做称之为Layout,顾名思义就是计算出每一个节点在屏幕中的位置。
五、再下一步就是绘制,即遍历render树,并使用UI后端层绘制每一个节点。
扩展:(1)Reflow(回流):浏览器要花时间去渲染,当它发现了某个部分发生了变化影响了布局,那就须要倒回去从新渲染。
出现回流的缘由:(1)页面初始化的时候(2)操做DOM时(3)某些元素的尺寸变了(4)css布局属性发生变化
(2)Repaint(重绘):若是只是改变了某个元素的背景颜色,文字颜色等,不影响元素周围或内部布局的属性,将只会引发浏览器的repaint,重画某一部分。
Reflow要比Repaint更花费时间,也就更影响性能。要尽可能避免过多的Reflow。再优化页面渲染性能的时候,减小 reflow/repaint就是基本出发点。前端
3、企业为何要用NodeJs(主要用于中间层)
(1)高性能
(2)易于修改和维护:用Node的方式来写程序意味着这些程序是一些由管道链接成的小模块构成的
(3)开发效率高
(4)并不适合用于大量计算ajax