zoukankan      html  css  js  c++  java
  • web前端性能14条规则

    14条规则

    1.减少Http请求

    • 使用图片地图
    • 使用CSS Sprites
    • 合并JS和CSS文件

    这个是由于浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢

    2.使用CDN(内容发布网络):当页面中有很多资源的时候,可以从不同的服务中去读取,同时可以提高并行下载速度

    3.添加http Expires头:为图片视频之类很少改变的资源设置长的Expires时间将直接减少http请求

    • 如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取,不会再次产生http请求

    另外一个有点类似的概念是条件Get请求,某些资源比如JS文件,如果我们总是需要最新的JS文件,那么可以设置条件Get请求去服务端验证本地的资源是否需要更新.这种情况下浏览器会向Server发送一个http请求,如果资源没有更新,会返回一个http 304的response,如果资源跟新,则重新下载资源:



     

    条件Get请求每次都会产生一个304的请求

    4.压缩组件:在Server端对Response资源进行压缩再传给浏览器,一般使用GZIP

    5.将CSS放再顶部: 能加快页面内容显示,并且能避免页面产生白屏

    6.将JS放在底部

    • JS会阻塞对其后面内容的呈现
    • JS会阻塞对其后面内容的下载

    7.避免CSS表达式

    8.将JS,CSS放在外部文件中

    9.通过使用Keep-Alive和较少的域名来减少DNS查找

    10.精简JS和CSS文件

    11.寻找一种避免重定向的方法

    12.移除重复的脚本

    13.配置Etag

    14.确保Ajax请求遵守性能知道,必要时候应具备长久的expires头

    我们可以使用Yahoo的Yslow firefox插件来检查网站的前端性能.

    最后,我们随便打开一个淘宝宝贝页面,用Fiddler查看一下,发现淘宝至少做了如下优化:

    • 大规模使用CDN,图片,jS,css互相之间都使用了不同的域名.单是图片服务器,下面又使用了很多不同的服务器,比如img01.taobaocdn.com等等
    • 当第二次浏览同一宝贝的时候,产生大量的Http 304请求.这样既能保证获取最新的资源,又能尽量减少数据传输
    • CSS,JS文件大都精简过
    • 对于资源类的东西比如图片,设置为不受保护.也就是说不需要登录依然可以直接访问的,这样就避免设置/读取cookie,达到节省网络资源的目的

    唯一一点没有优化的是图片,服务端返回的图片都是没有Gzip压缩的,或许是为了减少服务器的压力

  • 相关阅读:
    2018-2019-2 20165232 《网络对抗技术》 Exp6 信息搜集与漏洞扫描
    2018-2019 20165232 Exp5 MSF基础应用
    2018-2019-2 网络对抗技术 20165232 Exp4 恶意代码分析
    2018-2019-2 网络对抗技术 20165232 Exp3 免杀原理与实践
    2018-2019-2 网络对抗技术 20165232 Exp2 后门原理与实践
    2018-2019-2 20165232《网络对抗技术》Exp1 缓冲区溢出实验
    20165232 week1 kali安装
    2018-2019-2 20165205 网络对抗技术 Exp9 Web安全基础
    2018-2019-2 网络对抗技术 20165205 Exp8 Web基础
    2018-2019-2 20165205 网络对抗技术 Exp7 网络欺诈防范
  • 原文地址:https://www.cnblogs.com/vickyyu/p/5633521.html
Copyright © 2011-2022 走看看