文档章节

浏览器加载过程

前端小虾
 前端小虾
发布于 2016/10/10 17:25
字数 803
阅读 18
收藏 1

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.html

本文转载自:http://www.w3cfuns.com/notes/21146/a6d9f9ca54b4d43022877b64b8155e4a.html

前端小虾
粉丝 1
博文 44
码字总数 21084
作品 0
东城
私信 提问
异步加载js详解

优化脚本文件的加载提高页面的加载速度,一直是前端工程师提高页面加载速度很重要的一条。因为涉 及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载。当浏览...

飛飛飛jjs
2017/06/21
0
0
preload让加载和解析解耦

TL;DR preload本质:preload 是声明式的 fetch,可以改变浏览器加载资源的优先级,强制浏览器请求资源,同时不阻塞文档 onload 事件,也因此可以将 load 事件与脚本解析过程解耦 prefetch本质...

颜酱
05/27
0
0
构建高性能的ASP.NET应用(五)-如何开始寻找性能瓶颈

既然我们讲的是如何构建高性能的ASP.NET站点应用,那么我们就开始涉及网站方面的东西。我们说过,我们会把关注点放在“调优”上面。 在调优的时候,我们没有必要把事情搞的很复杂,要“由表及...

yanyangtian
2013/03/12
0
0
href和src有什么区别

href和src是有区别的,而且是不能相互替换的。我们在可替换的元素上使用src,然而把href用于在涉及的文档和外部资源之间建立一个关系。 href (Hypertext Reference)指定网络资源的位置,从而...

SubinY
2016/10/17
11
0
前端分享会--重排、重绘、阻塞

《前端分享会》将是本坑新开的专题,这个专题主要是平时本坑在单位分享会分享的,和平时看到想分享的内容。涉及的内容可以是比较简单,初级。当然也会有程度比较高知识分享。 可能看官觉得,...

ziven先生
2018/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
17
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部