认识达内从这里开始

前端编程开发是目前大多数软件开发程序员都在学习的一个互联网编程开发技术，下面我们就通过案例分析来简单了解一下，前端编程开发需要掌握哪些知识点。

Hash模式

早起的前端路由实现就是基于location.hash来实现的，location.hash就是路由#后面的内容，其原理就是通过hashchange监听#后面的内容的变化来进行页面更新。hash模式是利用浏览器不会对#后面的路径对服务端发起请求。

使用hash模式有两个特点：

改变hash值，浏览器不会重新加载页面

当刷新页面时，hash不会传给服务器

优点：

可以兼容低版本浏览器，支持IE8

只有#之前的内容才会作为URL发送给服务器，就算服务端没有对路由进行全覆盖也不会返回404

hash改变都会在浏览器访问的历史记录中增加一个记录，所以可以通过浏览器进行前进后退，如果想在hash模式下不保存记录，可以使用location.replace

History模式

history是基于HTML5新增的pushState和replaceState两个API以及浏览器的popState事件监听历史栈的改变，只要历史栈有信息发生改变，就会触发该事件。这种模式同样也是不会向后端发起请求的。

优点：

该模式的路由不带#，看起来更美观

pushState设置的URL可以是任意的与当前URL同源的URL，而hash只能改变#后面的内容

缺点：

IE9及其以下版本浏览器不支持，IE10开始支持

页面渲染流程

浏览器通过DNS服务器得到域名的IP地址，向这个IP地址请求得到HTML文本

浏览器渲染进程解析HTML文本，构建DOM树

解析HTML的同时，如果遇到内联样式或者样式文件，则下载并构建样式规则，如果遇到JavaScript脚本，则会下载执行脚本

DOM树和CSSOM构建完成之后，渲染进程将两者合并成渲染树(rendertree)

渲染进程开始对渲染树进行布局，生成布局树(layouttree)

渲染树对布局树进行绘制，生成绘制记录

服务端渲染(SSR)

顾名思义，服务端渲染就是在浏览器请求页面URL时，服务端直接将我们需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过JavaScript脚本的执行，可直接构建出完整的DOM树并展示页面中。这个服务端组装的过程，叫做服务端渲染。

客户端渲染(CSR)

页面的渲染其实就是浏览器将HTML文本转化为页面帧的过程。而如今我们大部分WEB应用都是使用JavaScript框架(Vue、React、Angular)进行页面渲染的，也就是说，在执行JavaScript脚本的时候，HTML页面已经开始解析并且构建DOM树了，JavaScript脚本只是动态的改变DOM树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，也可以叫客户端渲染(clientsiderende)。

前端渲染把渲染的任务交给了浏览器，通过客户端的算力来解决页面的构建，这个很大程度上缓解了服务端的压力。而且配合前端路由，无缝的页面切换体验自然是对用户友好的。不过带来的坏处就是对SEO不友好。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。