zoukankan      html  css  js  c++  java
  • web前端性能优化总结

    根据web访问流程的各个阶段进行总结:

    1. 浏览器缓存  2.查询DNS  3.建立连接   4.发送请求   5.等待响应   6.接收数据   7.处理元素   8.渲染元素  

     

              

    1. 浏览器缓存

    查询cache: 读取cache或发送304请求。

    优化规则-- 添加Expire或Cache-Control

    应用于不经常变化的组件,包括脚本、样式表、Flash组件、图片
    Expires和Cache-Control

     

    2. 查询DNS

       1. DNS缓存     浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存(TTL)

                             当缓存时间长时:减少DNS的重复查找,节省时间

                             当缓存时间短时:及时检测网站服务器的变化,保证正确性

       2. 减少DNS查找   

    wps27DA.tmp

           当客户端的DNS缓存为空时,DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。较少的域名来减少DNS查找(2-4个主机)

     

    3.建立连接

      3.1 使用内容分发网络CDN

       在离用户最近的地方放置一台性能好链接顺畅的副本服务器,让用户能够以最近的距离,最快的速度获取内容。

    wps25A7.tmp

    3.2 用域名划分页面内容

    按页面内容划分域名,在合适的资源服务器上存放文件

    wps8F61.tmp

     

     

    4.发送请求

    4.1 减少HTTP请求

          合并文件:图片(CSS Spirite),css文件合并,js文件合并

    4.2 避免404错误

    4.3 不要使用frameset,少使用过iframe

    搜索引擎不友好、即时内容为空,加载也需要时间、会阻止页面加载

    禁止使用iframe引入外部资源,不包括allyes广告,不包括about:blank的空页面。

     

    5.等待响应

    5.1 避免重定向(多一次请求就多费时间)

         重定向:原始请求被重新转向到了其它请求

    wps34C6.tmp

    wpsD682.tmp

     

     

    6.接收数据(针对上线版本)

    6.1 压缩组件

        HTML文档,脚本和样式表,XML和JSON的文本响应,压缩

    6.2 最小化css和js文件

         去除不必要的空白符,格式符,注释符

         简写方法名,参数名,压缩js脚本

     

     

    6.3 尽量 使用外部的Js和Css文件

    尽可能使用外部Js和Css,因为我们目前大部分Js和Css都做了Gzip和缓存技术,可以充分利用。

    使用外部文件优点: 提高复用性和可维护性,减小页面体积,

    写在页面内有点:较少页面请求,提升页面渲染速度。

    写在页面内情况:只应用于一个页面,页面不经常被访问到,脚本和样式很少。

     

    6.4 尽量缩减页面大小

          页面必须小于150k(不含图片)

          静态文件是否gzip,图片是否压缩优化过。

     

    7. 处理元素

    不要对image和pdf等二进制文件进行gzip压缩

     

      8.渲染元素       

    8.1  CSS样式表文件放在页面顶部 

    8.2  js脚本文件放在页面底部

    8.3 优化图片

    尽量使用png/gif格式的图片,png的图片优先,但是必须注意如要兼容IE6,则png使用一定要注意透明问题。

    图片在上次前一定要先用工具压缩优化(png、jpg)

    8.4 移出重复脚本

    8.5 避免回流:

     

    1.复杂的表现变化,如动画,让它脱离文档流,用绝对定位或 fixed 定位来完成。脱离文档流后不会造成任何回流。

    2.避免不必要的复杂的 CSS 选择器,尤其是后代选择器(descendant selectors),因为为了匹配选择器将耗费更多的 CPU。

    2. 以下这些属性,只要是改动了他们的值,就会造成回流,建议将他们合并到一起操作,可以减少回流的次数。这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight;scrollTop、scrollLeft、scrollWidth、scrollHeight;clientTop、clientLeft、clientWidth、clientHeight;getComputedStyle() 、currentStyle()。

    3. Javascript控制样式的最优解,不要直接修改具体CSS样式,通过编码class来改变样式,

    8.4 避免CSS Expressions(表达式)  影响浏览器渲染时间

    wps12C.tmp

    wps1AE4.tmp

     

     

    其它注意:

           动态加载和渲染非关键区域

    在页面中某些区域并不是用户重点关注的区域,例如页面的广告,一些统计信息等,此类内容可以等待页面关键区域加载后通过javascript代码动态加载和显示。

           谨慎使用iframe

    iframe有两个缺点:1,iframe会阻塞主页面的Onload事件;2,iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。
    如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。

     

     

  • 相关阅读:
    python -基础-强大的列表推导式
    python-基础-字符串拼接
    tkinter学习-- 控件一、Label、Button
    python -re模块
    Apache POI XWPF 爬坑指南之二特定位置插入表格、段落、图片
    mybatis报错:Invalid bound statement (not found):
    bootstrap中input输入框后面添加图标
    bootstrap悬浮显示内容
    layui中使用laydate
    与SQL相关解释表关联(left join ... on ... and ...)
  • 原文地址:https://www.cnblogs.com/Peng2014/p/4725902.html
Copyright © 2011-2022 走看看