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 结构,减少首屏时间
  • 相关阅读:
    【OpenCV学习笔记5】读取图像中任意点的像素值
    【收藏】国企央企
    Visual Studio 进化史
    【图像算法】不变矩
    工控博客精华链接
    投了...
    【图像算法】常见的数字图像处理程序大全
    Google C++编码规范
    Google员工自述:在哈佛教书和在Google工作的差别
    国立华侨大学校长写给2010届毕业生的话:人生的二和三
  • 原文地址:https://www.cnblogs.com/SallyShan/p/11520620.html
Copyright © 2011-2022 走看看