前端浏览器加载分析

前端开发调试怎么学|微信前端开发流程图|苹果电脑web前端开发工具

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://”&gt;
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.html

微信开发前端面试题|前端开发是怎么调试的.|微信小程序开发前端数据库那

» 本文来自:前端开发者 » 《前端浏览器加载分析》
» 本文链接地址:https://www.rokub.com/4967.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!