• 如何打造亚秒级加载的网页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

              打包组建成符合文档

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

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

    还会有网络性能

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

  • 相关阅读:
    forin语句和document.write换行
    输入日期计算出当天是星期几
    输入半径求圆的面积和简单的ASCII码转化
    一段简单的代码用来在网页上测试javascript程序
    如何在ubuntu下修改hosts?
    如何在终端上打出货币符号和算式
    C#文件监控
    JavaScript类的写法 ( 仿jQuery )
    JavaScript类创建的几种方式
    (转)程序员的十层楼:大家都来测测你的技术层级
  • 原文地址:https://www.cnblogs.com/mlw1814011067/p/9683919.html
Copyright © 2020-2023  润新知