zoukankan      html  css  js  c++  java
  • 浏览器的加载和解析的过程,以及如何加快 HTML 的加载速度

    HTML页面加载和解析流程

    1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件; 
    2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件; 
    3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件; 
    4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了; 
    5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码; 
    6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码; 
    7.浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它; 
    8.Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码; 
    9.终于等到了</html>的到来,浏览器泪流满面…… 
    10.等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径; 
    11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

    如何加快 HTML 页面加载速度

    1,页面减肥
    页面的肥瘦是影响加载速度最重要的因素
    删除不必要的空格、注释
    将inline的script和css移到外部文件
    可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥
    2,减少文件数量
    减少页面上引用的文件数量可以减少HTTP连接数
    许多JavaScript、CSS文件可以合并最好合并,人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了
    3,减少域名查询
    DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好
    4,缓存重用数据
    使用缓存吧
    5,优化页面元素加载顺序
    首先加载页面最初显示的内容和与之相关的JavaScript和CSS
    然后加载DHTML相关的东西
    像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
    6,减少inline JavaScript的数量
    浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大
    不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容
    7,使用现代CSS和合法的标签
    使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片
    使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥
    8,Chunk your content
    不要使用嵌套tables

    <table>
      <table>
        <table>
          ..
        <table>
      <table>
    <table>

    而使用非嵌套tables或者divs

    <table>...</table>
    <table>...</table>
    <table>...</table>

    将基于大块嵌套的tables的layout分解成小tables,这样显示时不用加载整个页面(或大table)的内容
    9,指定图像和tables的大小
    如果浏览器可以立即决定图像或tables的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作
    这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变
    image使用height和width
    table使用table-layout: fixed并使用col和colgroup标签指定columns的width
    10,根据用户浏览器明智的选择策略
    IE、Firefox、Safari等等等等

    参考资源:【转】浏览器加载渲染网页过程解析--总结(三)

    减少 JavaScript 对性能的影响有以下几种方法:

    • 将所有的<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在脚本执行前页面已经完成了渲染。
    • 尽可能地合并脚本。页面中的<script>标签越少,加载也就越快,响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
    • 采用无阻塞下载 JavaScript 脚本的方法:
      • 使用<script>标签的 defer 属性(仅适用于 IE 和 Firefox 3.5 以上版本);
      • 使用动态创建的<script>元素来下载并执行代码;
      • 使用 XHR 对象下载 JavaScript 代码并注入页面中。
     
  • 相关阅读:
    每天1题算法题(4)-合并二叉树 (√)
    每天1题算法题(3)-二叉树的最大深度 (√)
    每天1题算法题(2)-二叉树的层序遍历
    每天1题算法题(1)-二叉树的中序遍历
    uni-app登录页白屏
    uni-app真机运行顶部导航栏右边按钮显示不全的问题处理
    uni-app强制横屏设置
    uni-app离线打包步骤
    银行数据仓库体系实践(18)--数据应用之信用风险建模
    银行数据仓库体系实践(17)--数据应用之营销分析
  • 原文地址:https://www.cnblogs.com/xiaochechang/p/5853520.html
Copyright © 2011-2022 走看看