html页面的加载顺序

html页面的加载顺序

之前工作都是当做全端工程师来做,而涉及到页面方面的,因为个人比较较真,做出来的效果也符合Leader要求,导致经常会分配做较难的页面设计问题,更准确的是,样式设计,就会遇到速度的问题,也会遇到加载顺序的问题,现在就来总结一下,Html页面的一个具体加载顺序

加载顺序

  1. 浏览器向服务器申请html文件
  2. 首先加载Head中的内容,向浏览器申请css文件
  3. 如果有Js引用,就申请js文件,加载js文件马上执行,执行时会阻塞后面的资源下载,所以一般将js引入放在最下面,防止Html阻塞导致无法操作。当然也可以使用document.write()或者其它异步加载方案完成异步加载。
  4. 接着加载html中body的内容。

核心要点

  1. 加载都是按从上到下的顺序进行加载
  2. js文件加载会阻塞Html内容的加载
  3. 样式表下载完成之后会跟之前的样式表一起进行解析,会对之前的元素重新渲染
  4. 可以使用异步加载的方式来完成js的加载;使用onload等待页面元素完成加载。

优化方案

可以看一下我翻译的这篇雅虎优化网页速度的文章,也许会有所收获。
http://www.cnblogs.com/ITflying/p/7308185.html

  • 既然不能成为屠龙的勇士,那么就好好成为一名优秀的管家,为公主建设一个温馨美好的家。
    Since it can not become a dragon warrior, then it is a good housekeeper, for the princess to build a warm and beautiful home.

  • 原文地址:https://www.cnblogs.com/ITflying/p/7308298.html