首页 > Web开发 > 详细

如何打造亚秒级加载的网页1——前端性能

时间:2018-09-20 23:22:41      阅读:211      评论:0      收藏:0      [点我收藏+]

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

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

每增加延迟一秒,页面访问量降低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

          打包组建成符合文档

 

 

 

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

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

还会有网络性能

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

如何打造亚秒级加载的网页1——前端性能

原文:https://www.cnblogs.com/mlw1814011067/p/9683919.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!