码迷,mamicode.com
首页 > 其他好文 > 详细

【转】前端性能优化

时间:2018-09-21 00:33:25      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:render   报文头   报文   结合   打包   避免   iframe   服务器   jave   

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

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

      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

          打包组建成符合文档

【转】前端性能优化

标签:render   报文头   报文   结合   打包   避免   iframe   服务器   jave   

原文地址:https://www.cnblogs.com/PearlRan/p/9684055.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!