浏览器加载过程

时间 2019-11-13

原文原文链接

Q1:浏览器加载过程？
Q2：加载时候容易遇到哪些问题？产生的缘由？如何解决？

A1：
1.用户访问网页，DNS服务器（域名解析系统）会根据用户提供的域名查找对应的IP地址，找到后，系统会向对应IP地址的网络服务器发送一个http请求。（解析域名成ip，发送请求）
2.网络服务器解析请求，并发送请求给数据库服务器。（解析请求，发送数据库请求）
3.数据库服务器将请求的资源返回给网络服务器，网络服务器解析数据，并生成html文件，放入http response中，返回给浏览器。（返回一个response）
4.浏览器解析 http response。
5.下载html文件，以及html文件内包含的外部引用文件，及文件内涉及的图片或者多媒体文件。（下载文件）

访问服务器端可能遭遇的问题：
网络服务器没法获取数据库服务器返回的资源文件（http response 404），或者因为并发缘由暂时没法处理用户的http请求（http response 500）

A2：
1.阻塞现象：在页面中咱们一般会引用外部文件，而浏览器在解析HTML页面是从上到下依次解析、渲染，若是<head>中引用了一个a.js文件，而这个文件很大或  者有问题，须要2秒加载，那么浏览器会中止渲染页面（此时是白屏显示，就是页面啥都没有），2秒后加载完成才会继续渲染。
缘由：JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续全部资源的下载多是没有必要的，这是js阻塞后续资源下载的根本缘由。
办法：能够将外部引用的js文件放在</body>前。
缘由：可能会有 var width = $('#id').width()，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。这也是css阻塞后续js的根本缘由。
办法：当js文件不须要依赖css文件时，能够将js文件放在头部css的前面

优化方法：
1.现代浏览器存在 prefetch 优化，浏览器会另外开启线程，提早下载js、css文件，须要注意的是，预加载js并不会改变dom结构，他将这个工做留给主加载。
2.预加载网页，利用空余时间来提早加载该网页的后续网页。<link rel="prefetch" href="http://">
3.为js脚本添加defer属性，使得浏览器不等js脚本加载执行完，就加载后面的图片。既然图片资源都已经加载出来了，就不要在js内写document.write啦。
<script defer="true" src="JavaScript.js" type="text/javascript"/>
4.不要在外部调用的js文件中调用运行时间较长的函数，若是必定要用，能够使用setTimeout函数

END:要了解游戏规则，以及漏洞

参考文章连接：1.http://www.jianshu.com/p/e141d1543143
                     2.http://www.cnblogs.com/soundcode/p/5767812.html
                     3.http://www.ruanyifeng.com/blog/2014/10/event-loop.htmljavascript