zoukankan      html  css  js  c++  java
  • 如何打造亚秒级加载的网页1——前端性能

    对于我们前端来说,页面的加载速度是直接影响到用户的体验度

    用户体验度是能直接决定最终的销售额的

    每增加延迟一秒,页面访问量降低11%,转化率降低7%

    如何提高页面的加载速度是前端工程师们必然要懂的

    那么我就来讲解一下可以从哪些方面来提高页面的加载速度:

    页面加载速度影响因素——前端性能

      前端性能关键呈现路径所涉及的步骤:

          1 .  DOM:浏览器在解析HTML时,会以递增的方式为HTML标记生成一种名为文档对象模型(DOM)的树状模型,

               该模型描述了网页中包含的内容

          2 . CSSOM:浏览器收到所有CSS后,会对其中包含的标记和类生成一种名为CSS对象模型的树状模型,并将样式信息附加在节点上。

               这个树描述了网页中所包含内容需要应用的样式

          3 . 呈现树(Render Tree):通过将DOM与CSSOM结合在一起,浏览器可以构造出呈现树,

               其中包含了页面内容以及所要应用的样式信息

          4 . 布局(Layout):布局这一步中需要计算网页内容在屏幕上的实际位置和大小

          5 . 绘制(Paint):最后一步将使用布局信息在屏幕上绘制像素

    当然对此我们也是有办法应付的

    下面列出了各个方面处理性能的方法

      (1)网页内容 ——  减少HTTP请求次数

                减少DNS查询次数

                避免页面跳转

                缓冲ajax

                延迟加载

                提前加载

                减少DOM元素数量

                根据域名划分内容

                减少iframe数量

                避免404

      (2)服务器 —— 使用CDN

              添加Expires 或 Cache-Control 报文头

              Gzip 压缩传输文件

              配置ETags

              尽早flush输出

              使用GET Ajax请求

              避免空的图片src

              Cookie

              减少cookie大小

              页面内容使用无cookie域名

      (3) CSS —— 将样式表置顶

              避免CSS表达式

              用<link>代替@import

              避免使用Filters

      (4) JavaScript —— 将脚本置底

                使用外部Javascript 和 Css文件

                精简Javescript和Css

                去除重复脚本

                减少DOM访问

                使用智能事件处理

      (5) 图片 —— 优化图片

              优化CSS Sprite

              不要在HTML中缩放图片

              使用小且可缓存的favicon.ico

              移动客户端

              保持单个内容小于25KB

              打包组建成符合文档

    这就是从前端方面来提高页面的加载速度

    当然  影响页面加载速度的并不只有前端性能

    还会有网络性能

    下次更新再来写网络性能了

  • 相关阅读:
    s=a+aa+aaa+aaaa+aa...aaaa
    ibatis入门
    ibatis多参数的问题
    异步分页ajax
    8M的摄像头,30fps摄像时,60hz的LCD刷新频率,请问camera每秒向BB传输多少数据,如何计算
    android tcp通讯
    為什麼我的手機連Wi-Fi速度總是卡在75Mbps?Wi-Fi速度解惑~帶你一次看懂!
    mbps和MB/s是怎么换算的
    简说各种wifi无线协议的传输速率
    mil,mm与inch之间的转换
  • 原文地址:https://www.cnblogs.com/mlw1814011067/p/9683919.html
Copyright © 2011-2022 走看看