-
随着业界技术的发展,互联网开发逐渐分成了前端开发和后端开发。后端开发一般指的是Web API的开发。前端开发一般指的是Web页面相关的开发。
-
这三样东西是前端的三驾马车。HTML定义了页面的内容,CSS定义了页面的格式,Javascript为页面的事件提供处理。
-
前端服务器的原理,一句话概括,就是,根据请求的URL,返回一个网页(包含HTML,CSS和Javascript)。静态服务器对于所有用户都返回相同的网页。动态服务器,根据用户的信息(一般都在cookie里),返回不同的网页。
-
前端页面能被哪些浏览器正常显示,就叫做浏览器兼容性。在互联网时代早期,除了标准缺失而导致的混乱之外,各大浏览器为了争夺市场,争先恐后的加入了各种非标准功能,进一步加剧了这种混乱。而其中臭名昭著的当属IE6了。不仅不遵守标准,而且还有各种样式上的bug。这使得同一套代码,要在Chrome,Firefox和IE6中出现同样的效果,如同大禹治水。幸好4大现代浏览器(Chrome,Firefox,Edge和Safari)对最新标准的支持已经日臻完善,开发界的混乱才渐渐平息。目前,商用的互联网服务已经可以完全不支持IE。但民用的互联网服务有时还得支持一下IE11以上的版本。不过与其让同一套代码兼容4大浏览器和IE,还不如单独为IE写一套前端。
-
在计算机图形学中,渲染指的是绘制图形(把由公式表示的矢量图形,糅合光照,阴影和纹理等元素,最终生成显示器上的像素点)的过程。但在前端技术中,渲染指的是生成HTML(包括CSS和Javascript)的过程。在动态前端服务器里,返回给不同用户的网页是不同的。一般这样的所谓“不同”的页面,其实有一大部分都是相同的,这些相同的部分就作为网页模板。而不同的部分被抽象成数据,这些数据的格式通常都是JSON。因此,“渲染”的过程就是把JSON数据与网页模板结合在一起,生成浏览器能够解析的网页的过程。
-
如果是静态网页,没有渲染的过程。因此也无所谓服务器渲染还是客户端渲染。但如果是动态服务器,则看生成HTML的过程是在浏览器端发生还是在服务器端发生。如果所有的渲染在浏览器端发生,则叫客户端渲染。如果首次生成HTML是在服务端(其它次生成可以是在浏览器端),则叫服务端渲染。所有的HTML生成都在服务器端发生,这种技术已经被淘汰。因此,现在的服务端渲染,指的都是首次HTML在服务器端生成,随后的HTML都在浏览器端生成。 客户端渲染对服务器端的压力比较小,但首次打开的时候,由于没有真实数据,因此渲染出来的网页都是一片空白,等到浏览器加载完Javascript,运行完Javascript获取到真实数据,并且在浏览器端用真实数据和网页模板生成完HTML和CSS,才能看到真正的内容。因此客户端渲染的首次渲染速度较慢,而且在F5刷新的时候,由于需要完全重新加载一次,一重新加载,页面又会变成空白,然后再出现真正的网页,在视觉上就会变成明显的闪烁。而服务端渲染对服务器的压力较大。但由于第一次渲染的时候就是真正的全量网页,因此首次渲染速度快,且F5刷新无闪烁。
-
前端和后端如果使用同一套代码渲染HTML,我们就叫它前后端同构。如果我们不使用同构技术,那么我们必须让服务端和客户端都渲染出同样的HTML,这样工作量会加倍。而同构技术采用Node.js + React(或者直接用Next.js),我们只需要写一段代码,则服务端和客户端都用这段代码做渲染。这样就省时省力,开发语言也只用学一种。
-
在浏览器中,HTML页面中的标签被组织成了一个个对象,并且相互关联,形成了一个树形结构。这个树形结构的文档表示就叫做DOM。客户端渲染的过程,就是通过Javascript,获取了JSON格式的用户数据之后,再更新DOM来完成的。
-
客户端渲染的核心技术就是AJAX技术。所谓AJAX,就是用Javascript发送异步的web请求(不会阻塞网页),等拿到数据之后,再根据数据更新DOM。在AJAX技术的初始,使用的是HTTPRequest获取XML格式的数据,AJAX因此而得名。如今都是使用Fetch来获取JSON数据,但AJAX这个名字已经改不了了。
-
HTML的历史基本上是一部混乱史。业界经历了HTML从2.0到4.0,又经历了XHTML,最终终于到了一个集大成者的版本,HTML5。HTML5/CSS3一举解决了网页无法适配Web App的困局,增加了一系列的新功能并且去除了一系列过时的功能,来满足现代Web App的需要。不少重量级的功能都是从HTML5中独立出来的,例如GeoLocation,WebSocket等。使用HTML5/CSS3可以让网页的体验变得像App那样流畅。不过只有少数最新的浏览器能够支持它。
-
在互联网开发业界,路由指的是根据不同的URL渲染出不同的页面。后端路由指的是,将不同的URL发送给服务器,然后服务器处理之后返回不同的HTML。前端路由指的是,当浏览器中URL变化的时候,不向服务器发送请求,直接由Javascript来根据不同的URL,渲染出不同的HTML。早期前端路由都是由URL中的#符号来实现的,因为#号后面内容变化之后,浏览器不会重新向服务器发起请求。而现代的前端路由都是使用HTML5的History API来实现。