关于服务器渲染、浏览器渲染的理解

在web开发中经常听见“前端渲染”,“后端渲染”不明觉厉啊。今天花点时间收集整理了下。先声明下这里提到的“渲染”指的是web页面渲染。

1.关于打开网站看到页面-加载、解析、渲染

对一般浏览用户来说,打开今日头条网站浏览他关心的内容他会这么做?

1、在桌面上打开一个浏览器(chrome、火狐、360浏览器、IE等)

2、在地址栏输入:toutiao.com,回车,然后等一会,首页内容出现….

在“等一会”这段时间,浏览器都干些什么?

1、加载:根据请求的URL进行域名解析,向服务器发起请求,接收(下载)资源文件(如:HTML、JS、CSS、图象等)

2、解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)———-在这时得到了一个页面对应的html代码模板(网页是基于html代码展示的)。

3、渲染:构建渲染树,对各个元素进行位置计算、样式计算等等,然后根据渲染树对页面进行渲染(可以理解为“画”元素),最终呈现出人类可以理解查看的页面。

通俗点理解浏览器是这么干的(拿建房子来类比):

加载>>>>>>获取“建房子”需要的材料,设计图,砖头、钢筋啊(如:HTML、JS、CSS、图象等)

解析>>>>>>理解下设计图,房子什么结构,地基什么构造,墙是多厚的,窗户放哪里(HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)

渲染>>>>>>动手手把房子建好,也就是施工了。根据设计图,尺寸比例把窗户、门这些放上去(图片、文字等),房子建好了(生成我们可以理解查看的html页面。)

综上:页面渲染就是浏览器将HTML变成人眼看到的图像的全过程,即把数据填充进模板,按模板定制的样式把数据展示出来。

ps:每个浏览器使用的技术内核不同,所以效率也会不一样,有的“盖房子”快点有的慢点。再则我们常说的浏览器兼容性问题,其实就是解析和渲染的偏差(对一些标签和样式定位的解析理解不同导致整个页面出现错位,点击不响应等)。好比,同样的设计图,不同施工人由于文化程度和理解能力不同,最终照成出来的东西会出现一些偏差。这时候考虑到我们的用户会使用不同的“施工人”来访问我们的页面。我们就需要对一些标签进行兼容性的设置,也可能为特定的“施工人”(浏览器)单独提供一套他们能理解的设计图(样式)。

2.后端渲染与前端渲染的区别。

上面提到浏览器是通过url请求向服务器端。服务端将资源文件返回给浏览器,整个环节中最关键点就是对模板进行数据填充。

后端渲染就是在服务端完成解析,并填充好数据后,直接返回html页面给浏览器。(直接对DOM树进行操作,样式简单写在style中)。

后端渲染

前端端渲染就在浏览器端完成解析,填充数据了,现在常见的方式通过ajax进行异步请求,返回json来填充数据。

前端渲染

附录查阅文档,感谢网友的耐心说明:

后端渲染html、前端模板渲染html,jquery的html,各有什么区别?

在前端开发中,页面渲染指什么?

【大前端之前后分离01】JS前端渲染VS服务器端渲染

[转]谈谈前端渲染 VS 后端渲染

前端和后端分工的三种模式

Node直出理论与实践总结

 

 

 

  1. 关于 加载、解析、渲染 的 比喻打的很好,很容易理解。
    但对于 第二点 中 “前端端渲染就在浏览器端填充数据了”与 第一点中所说的 前端渲染 “可以理解为“画”元素” 产生了 冲突 容易 让人 混淆。