[TOC]

前端发展历史

前端发展历史进程

  • 一个页面是由哪些部分组成
    • HTML(5)：搭建DOM结构
    • CSS(3)：样式处理及动画处理
    • JavaScript(JS)
  • 浏览器的发展历史
  • 项目技术的发展历史

浏览器的发展历史

项目技术的发展历程

  • 从服务器渲染到客户端渲染

    • 客户端、服务器端、数据库交互流程图

    • 页面渲染的整体流程

    • 服务器端渲染

      • jsp渲染流程
      • 问题
        • 服务器压力过大，抗压能力变弱
        • 如果并发较高，只能加服务器了
        • 前后端不分离（这个时候还没有前端的概念，叫做网页制作，只需要负责html和css及少数的交互）
        • 后台开发要做的事情比较多：读取数据库、web服务器发布、读取页面信息、基于jsp等手段实现数据的动态绑定（渲染也是发生在服务器）
        • 不能同时开发，配合的时候也会有问题，后台要懂一些前端、前端改页面时要懂一些jsp
        • 不可以局部刷新
        • 重后台，轻前端

    • 客户端渲染

      • 数据渲染不是在服务器端完成，而是在客户端完成

      • 第一次请求返回的页面，是没有数据的，就是一个空壳

      • 在需要动态绑定的地方，向服务器发送请求获取数据（ajax、fetch、跨域等）

        • 只请求数据
        • 服务器把每个请求的数据返回给客户端

      • 客户端在js代码中，基于获取到的数据，动态创建html结构，最后添加到指定容器中

        1
        2
        3
        4
        5
        6
        7
        8
        let str = '';
        data.forEach(item => {
            str += `<li>
                	<img>...
            		...
                </li>`
        });
        ul.innerHTML = str;

      • 页面第一次请求回来的，只有结构和样式，没有数据，是一个空壳。紧接着发第二次请求，只拿数据。分两次请求把页面和数据都拿到后，在客户端你的js代码中，自己通过程序实现客户端渲染。后续浏览器中如果有一部分数据需要改变，只需要把这一部分的数据，向服务器发请求，服务器重新返回数据，在js中重新渲染这部分数据就可以了

      • 优势

        • 服务器压力小了很多

        • 可以实现局部渲染

        • 前后端分离

          • 前端只关注，向后端发请求，能给我数据，不在乎用什么语言：php、java、go、node等
          • 后端只关注，把数据给前端就行了
          • 同时开发，通过接口文档配合，不会互相影响
          • 前端、后端要干的活都很多，不会谁瞧不起谁（分工不同）

        • 当代项目，尤其是移动端项目，全部都是以前后端分离的方式来处理的。客户端渲染是大趋势

      • 正是由于转向了客户端渲染，前端逐渐大规模发展了起来；从2013年左右开始，大量的服务器端渲染程序，重构成客户端渲染程序

    • 当下的主流趋势，大部分项目是客户端渲染（前后端分离），个别项目还是服务器渲染（为了SEO优化）；尤其是移动端开发

    • 前端侧重于页面、样式、交互、数据渲染等方面

    • 后台侧重于操作数据库和一些业务逻辑的处理

      • 对数据结构和算法要求很高，否则干个两三年，就成cv了
      • 后台比前台难很多很多倍

    • 对于web服务器部署，两者都可以做，很多公司还是会后台去做（后台操作服务器，一般前端不会去做这个）

      • 向服务器发请求，得有个东西能把资源文件返回吧

    • ajax、fetch、跨域、数据绑定等技术，都是前端要掌握的

  • 从NativeApp到WebApp

  • 从前端走向全栈

  • 工程化的崛起