zoukankan      html  css  js  c++  java
  • 如何提升页面加载速度,并简述原理

    页面的加载过程主要分为下载解析渲染三个步骤,下面从这三个方面阐述提升加载速度的方法:
    1、加快文件下载速度,减小资源文件下载对页面解析的阻塞。页面加载过程首先会下载 HTML 文件,然后自上而下开始解析,解析过程中如果遇到外部资源则会开始下载,直至下载完成才会继续解析。所以,加快文件下载速度方式是有效的提升页面加载速度的方法。具体可以是
    1)通过设置 CDN、HTTP 缓存等方式,减少 HTTP 传输时间;
    2)对文件进行压缩,减小文件体积;
    3)对 script、CSS 文件引用标签设置异步下载属性,避免对 HTML 文件解析产生阻塞
     
    2、将样式写在 head 中,将 JS 代码或文件引用写在 body 的最后。
    在 HTML 文件下载的过程中,会同步的对文件流进行解析成 DOM 结构,当遇到 CSS 代码时,会将其解析成 CSSOM 树;当遇到 JS 脚本时,会将其同步执行,并且阻塞继续解析,执行之后方才继续解析。最后,将 DOM 和 CSSOM 渲染至页面上。所以,将样式写在 head 中,可以尽早地构建 CSSOM 树;将 JS 代码写在 body 最后,不会对 DOM 解析造成阻塞,可以最快地完成页面地构建
     
    3、尽可能地提升浏览器渲染速度。包括
    1)避免出现冗余 HTML 标签,提升 DOM 结构地构建速度;
    2)精简 CSS 样式及选择器,提升 CSSOM 构建及匹配速度;
    3)如果是单页面应用,则页面结构依赖 JS 的执行。可以优化 JS 代码,尽早输出首屏结构;或采用服务端渲染的方式,直接传输 HTML 结构,减少首屏时间
  • 相关阅读:
    (转)通过Javascript得到URL中的参数(query string)
    (转)对存储过程进行加密和解密(SQL 2008/SQL 2012)
    (转)怎样玩转千万级别的数据
    (转)mongodb学习(翻译1)
    (转)Web API 强势入门指南
    (转)正则表达式—RegEx(RegularExpressio)(三)
    学习进度-16 python爬虫
    学习进度-15 变量类型的转换
    学习进度-14
    学习进度-13
  • 原文地址:https://www.cnblogs.com/SallyShan/p/11520620.html
Copyright © 2011-2022 走看看