网站前端性能优化和测试知识收集

  1. 用Ping命令简单测网站速度
    a、输入ping www.你的网址.com
    b、用站长之家的ping工具,网址:http://ping.chinaz.com/
  2. tracert www.你的网址.com
  3. 全方位的免费网站速度测试工具 — GTmetrix
    网址:http://gtmetrix.com国内免费的网站速度测试平台 — WebKaka
    网址:http://www.webkaka.com
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    参考资料:http://lusongsong.com/reed/298.html
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  4. 网站性能工具Yslow的使用方法:http://lusongsong.com/reed/362.html
  5. JS代码优化
    把不重要的JS放在页面最底部;
    合并JS,也就是减少HTTP请求,少给服务器请求一次就加快一点速度;
    给JS文件减肥,在线压缩JS工具:http://javascriptcompressor.com/
    参考资料:http://lusongsong.com/reed/400.html
  6. CSS代码优化
    a、合并CSS引用图片:CSS图片合并生成器:http://cn.spritegen.website-performance.org/ 这个网站能帮助你合并CSS图片,并且能得到相应代码;
    b、合并CSS,也就是减少HTTP请求,浏览器会花费80%的时间获取外部元件,包括脚本、样式表、图像等,只有20%的时间用来加载内容,每个网站都会有许多HTTP请求,由于只有2个HTTP请求可以在同一时间传送,所以请求一旦过多就会造成延迟;
    d、缩小CSS文件,在线压缩CSS工具:http://tool.chinaz.com/Tools/CssFormat.aspx
  7. 缓存图片、CSS和Javascript
  8. 只加载<head>部分的基本脚本
  9. 对图像进行压缩
  10. 开启gzip模块
    gzip压缩是非常流行的一种数据压缩格式,一般网站启用gzip后,压缩率都会有70%-80%的提升,效果是立竿见影的。
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    参考资料:http://lusongsong.com/reed/360.html
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  11. 百度提供的App性能优化建议

    目录

    避免使用document.write

    目的
    尽可能避免使用document.write. 因为可能会冲掉页面原有的内容, 通过它来引入外链资源需要先执行JS, 对页面渲染速度有一定影响
    大部分使用document.write都是外链的广告,这个检测的目的也是为了减少这类广告调用方法
    优化建议
    彻底避免使用这种方法,对于广告,最好能明确高宽,通过后续写入或iframe的方式来优化

    避免重复的请求

    目的
    重复请求绝大部分是没有意义的,还很有可能是空标签导致的问题,所以检测
    优化建议
    用网络抓包工具等查看是否有重复的请求, 去除多余的请求

    避免跳转

    目的
    无必要的跳转会带来性能影响,可以去掉
    优化建议
    直接给出跳转后的最终地址, 可减少请求数

    开启keep-alive

    目的
    开启keep-alive使得能够使用一个tcp链接来传输多个资源, 从而提高性能
    优化建议
    HTTP1.1默认为keep-alive开启状态, 如无特殊需求, 应保持该状态. HTTP1.0默认不开启, 如需使用, 可自行设置相应头部中的connection为keep-alive

    指定正确的Vary头信息

    目的
    如果设置了Vary头,检测设置值是否正确. 如果设置不正确,会导致一些代理不能正确的缓存静态资源
    优化建议
    一般来说,Vary头应设置为Accept-Encoding或User-Agent或两者的组合

    合并外部资源

    目的
    将同一类型的外部资源尽量合并在一起, 可减少http请求数
    优化建议
    将除了基础库外的JS合并在一起,将页面中独有的CSS合并在一起
    CSS中的图片可以通过工具来合并成CSS Sprite

    开启Gzip

    目的
    压缩静态资源的下载数据量,减少网络传输时间
    优化建议
    对于JS/CSS/HTML静态资源,服务器端gzip压缩后再在网络中进行传输,可大大减少传输的字节数.具体可查看返回头部的Content-Encoding是否为gzip或deflate,确认是否开启

    将JS和CSS外链

    目的
    将静态的JS和CSS尽量外链,后续的访问就可以使用浏览器缓存,减少请求数和请求字节数
    优化建议
    尽量避免内联的脚本或样式, 可以把这些内联的脚本和样式分别合并成一个文件进行外链

    使用无cookie的域名

    目的
    对于静态资源,cookie是没有用的,可以去掉
    优化建议
    可将静态资源放在专门的域名上

    指定页面的编码

    目的
    如果没有指定页面编码,浏览器就需要通过查找meta和猜测的方式来决定页面的编码,对性能有一定影响
    优化建议
    一般来说,推荐在response header中直接设置charset. 或者也可以在html页面的meta信息中指定charset

    减少URL的长度

    目的
    url太长会导致页面冗余,增加不必要的下载时间

    减少Cookie的大小

    目的
    cookie太大会影响请求速度
    优化建议
    cookie中应该只有uid,其余的各种状态信息由后端进行保存

    优化图片

    目的
    通过减小图片大小来提升加载速度
    优化建议
    使用图片压缩工具优化图片.现业界中有很多著名的图片压缩工具,在尽可能保持图片品质的情况下,可大大减少图片的大小.

    CSS样式表需置于头部

    目的
    样式表在头部中进行加载, 可以加快页面的渲染速度

    启用资源缓存

    目的
    缓存静态文件,减少对服务器的请求
    优化建议
    应正确设置静态资源的Cache-Control,Expires等标志, 使得浏览器可以正确地缓存这些资源. 对于不常变动的资源如图片等, 可以激进地把缓存时间设成一个月甚至更长;也可将图片迁移到CDN上,那里会自动进行很多优化

    减少同域名的请求

    目的
    浏览器同域名下并发请求数有限制
    优化建议
    如果资源很多,考虑使用两种方法优化:
    -延迟加载,等用户滚屏时才去下载
    -建立多个域名,如pic1.xxx.com, pic2.xxx.com

    检测Favicon

    目的
    网站需要设定Favicon,且需要设定缓存

    优化CSS和JS的位置

    目的
    CSS应尽量放在头部, JS链接应尽量放在页面的尾部. 这样可使浏览器能够并行加载资源,不会因为JS脚本的加载而进行阻断

    头部只放一个JS文件

    目的
    头部只放一个JS文件,其他的JS文件放在末尾或动态加载

    检查JS文件是否被压缩

    目的
    压缩JS文件以加快浏览器加载速度,减少带宽占用,增强用户体验
    优化建议
    使用JavaScript压缩工具对JS文件进行优化

    检查CSS文件是否被压缩

    目的
    压缩CSS文件以加快浏览器加载速度,减少带宽占用,增强用户体验
    优化建议
    使用CSS压缩工具对CSS文件进行优化

    CSS文件单行超长检测

    目的
    当CSS文件中单行长度超过8000字符时会被部分手机浏览器截断

    HTML压缩检测

    目的
    压缩html文件可以减少带宽占用,加快页面下载速度以及展现速度
    具体检测内容:
    1.检测不需要对应闭合标签的元素并删除对应的闭合标签:
    'br', 'input', 'link', 'meta', '!doctype', 'basefont', 'base', 'area', 'hr', 'wbr', 'param', 'img', 'isindex', '?xml', 'embed'
    2.两个块级元素之间的空格是可以删除的:
    'address','blockquote','center','dir','div','dl','fieldset','form','h1','h2','h3','h4','h5','h6','hr','menu','noframes','noscript','ol','p','pre','table','ul'
    3.标签属性默认值: 当标签属性使用其默认值时,该属性可删除
    4.只有属性名的属性:
    'disabled','selected','checked', 'readonly', 'multiple'
    优化建议
    使用HTML压缩工具对HTML输出进行优化

    检查页面中img的width与height属性

    目的
    当img标签中没有设置width与height属性,导致加载后不断reflow
    或属性值与图片真实值不符,导致图片渲染前需要进行拉伸或压缩操作而影响性能
    优化建议
    图片应该显式指定高宽, 并与实际大小一致. 后端应提供不同尺寸的图片以供加载

    检查文件中是否包含@import应用

    目的
    CSS文件中建议不要包含@import关键字, 这样会使CSS串行加载, 增加页面的渲染时间. 各个浏览器对此支持也不一致, 可使用link包含CSS文件.

    检查CSS文件是否包含未使用的规则

    目的
    在CSS中只添加需要的规则. 对于不再使用的规则, 可进行清除

    检查文件中是否包含CSS表达式

    目的
    判断CSS文件中是否包含expression表达式. expression表达式在某些浏览器中不能使用, 有兼容问题. 且性能开销较大, 不建议使用.

    参考资料:http://app.baidu.com/apms/appperf?do=wiki

发表评论?

0 条评论。

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据