输入一个url到网页呈现
- 输入网址
- 发送到DNS服务器，并获取域名对应的web服务器对应的ip地址。
- 与web服务器建立TCP连接
- 浏览器向web服务器发送http请求
- web服务器响应请求，并返回指定url数据
- 浏览器下载web服务器返回的数据。
- 解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件
- CSS 文件下载完成,解析 CSS 文件生成cssom树，调用JS执行引擎执行JS代码，然后将DOM树和CSSOM树结合生成渲染树。
- 根据渲染树来布局，计算每个节点的布局信息，将各个节点绘制到屏幕上来渲染页面，直至显示完成。
若dom树生成过程中遇到script标签，则暂停，执行js直至完成再继续生成。
若执行js时需要操作cssom，还得等css加载执行完生成cssom才能继续执行。
因此，css资源要先于js资源加载，js放于页面底部，尽量少影响dom树的生成
各种拓展
页面加载白屏
原因：
- 在弱网络下，网络延迟，JS加载延迟，会阻塞页面。
- 客户端存在bug，缓存模块错乱，不缓存js等后来挂起的文件，以及乱缓存index.html。
如果页面完全一片空白。极有可能是后端出现问题，后端配置无错误输出，并且服务状态500，这个时候页面就是一片空白。
如果是前端导致的，那么极有可能是单页应用异常，比如到了一个没有设置的新的页面。
1、打开能看到源码和request、response的浏览器，如chrome，查看源码输出
2、如果是后端问题，那么后端查看accesslog、程序日志，看看是否有问题
3、如果是前端问题，那么根据给出的js异常之类的排查
统计白屏数量：监听某个主div的变化，在规定时间内该DIV没有变化，那就可以进行白屏统计了。
监控白屏时间：监听某个主div的变化，直至页面渲染。
优化：尽量减少文件夹的嵌套，文件名不要过长。
一个网站很卡找原因
首先用3g网络测试一下：如果卡就是http请求数据可能过大。
可以合并JS脚本和CSS文件，css精灵图，对HTTP传输进行gzip压缩。
css放顶部，javascript放底部。
可能服务端出问题：
比如用户访问量大，并发量大。
mysql没有优化好，造成死锁。
可以用CDN加速把数据放在离用户更近的位置。
