乱炖

一、客户端渲染与服务端渲染的区别
  1、客户端渲染:前端利用ajax等数据交互手段获取服务端提供的数据之后,渲染到HTML页面。
  优点:灵活,真正的前后端分离,方便于前后台各自更新维护;
  缺点: 对SEO不友好,增加了http请求次数,减缓了页面加载速度。
  2、服务端渲染:在后端看来,页面文件其实就是一个“字符串”,所以服务端完全可以在获取到HTML文件的内容之后经过一些处理再返回给客户端,也就说,服务端可以将数据插入到HTML字符串中之后再返回给客户端。
  优点: 对SEO友好,减少了http请求次数,加速了页面初次渲染速度;
  缺点: 不灵活,前后端耦合度太高。

 

二、浏览器渲染页面的流程
  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后端层绘制每个节点。
  扩展:(1)Reflow(回流):浏览器要花时间去渲染,当它发现了某个部分发生了变化影响了布局,那就需要倒回去重新渲染。
  出现回流的原因:(1)页面初始化的时候(2)操作DOM时(3)某些元素的尺寸变了(4)css布局属性发生变化
  (2)Repaint(重绘):如果只是改变了某个元素的背景颜色,文字颜色等,不影响元素周围或内部布局的属性,将只会引起浏览器的repaint,重画某一部分。
Reflow要比Repaint更花费时间,也就更影响性能。要尽量避免过多的Reflow。再优化页面渲染性能的时候,减少 reflow/repaint就是基本出发点。


三、企业为什么要用NodeJs(主要用于中间层)
  (1)高性能
  (2)易于修改和维护:用Node的方式来写程序意味着这些程序是一些由管道连接成的小模块构成的
  (3)开发效率高
  (4)并不适合用于大量计算

posted on 2019-08-23 18:46  此用户已飞升  阅读(73)  评论(0编辑  收藏  举报

导航