前端页面渲染流程

浏览器url请求服务器开始
1、返回HTML文档，包括：

文档，script标签， link标签， img标签，audio标签等等文件

2、HTML解析：

>dom树生成（按照文档的层级展示，存在隐藏在dom树的元素）
>render树生成（可以看见到的界面，更多考虑的是显示的内容，dom结构在上一层生成了）
>逐级解析dom树

1、p,div,ol等不引入外部资源。
2、link->css 尽量减少页面的reflow（回流） 当页面的结构发生改变的时候，render树重新组 装，触发回流（比如最上面的元素margin-top:1px， 那页面下面的所有元素都会发生向上多了1px）。
只要不改变页面的结构，比如只修改了颜色，背景等等 ，称之为 重绘。
3、script-> js 绘制dom节点的时候会阻塞其他标签的解析（比如document.write阻塞其他js执行，也会阻塞下载通道，强烈建议不要使用）
4、img->图片， 页面初加载的时候可以先使用分辨率较低的图片，用来占位。

技术优化

1、 复用（维护性） 降低开发成本

1、 前端复用
> 文件复用，比如jquery,reset.css, error.html等复用
> 模块复用，通过js来维护一个整体模块，独立完成某项功能，称作模块。
2、 后端复用
> 通用接口复用
> UI模块复用
> 通用工具API复用（上传服务， 数据库操作）

2、 加载方式： 提升用户体验

1、同步加载： 加载完成才会给用户显示，强调顺序，但是容易会被阻塞。
2、分级加载： 先加载重要信息，核心功能（同步加载），后加载不重要的功能（异步加载）。
3、按需加载： 不触发该功能，就不加载。也可以理解为惰性加载。