Yahoo军规学习笔记

    xiaoxiao2026-04-06  7

    Yahoo目前为止有35条,挑选14条进行讲解 1.尽可能的减少HTTP请求数: 将图片、脚本文件、样式文件等进行合并,减少http请求次数 2.使用CDN(内容分发网络): CDN的全称是Content Delivery Network,即内容分发网络。 在离用户最近的地方,放置一台性能好、链接顺畅的副本服务器,让用户能够以最近的距离,最快的速度获取内容 3.添加Expire/Cache-Control头: expire头的内容是一个时间值。 cache-control是http协议中常用的头部之一,负责控制页面的缓存机制,如该头部指示缓存,缓存的内容也会存在本地。 服务器在发送请求的时候添加了一个时间值,本机会根据这个时间值来判断是否要重新获取 4.启用Gzip压缩: 把文件先放在服务器进行压缩,然后再进行传输,这样会显著的减少文件的大小,传输后浏览器会根据压缩过的内容进行解压缩并执行。 5.将css放在页面最上面: 如果css放在底部,当css下载后页面部分元素可能需要重画,在低网速的情况下,导致页面闪烁的问题,为了提高浏览器的渲染性能。将css文件放在head中,先进行渲染和加载。避免出现页面空白和闪烁的问题。 6.将script放在页面最下面: 将script内容放在底部,html元素在其上先加载,先将内容呈现出来,不会让用户等太久。否则可能会影响html内容的加载呈现速度。 7.避免在css中使用Expressions css expression:俗称css表达式,用来把css属性和javascript表达式关联起来,计算频率很高。 css expressions{ 页面显示和缩放  页面滚动 }要重新计算一次 移动鼠标  } 严重影响浏览器性能,影响用户体验。 8.把javaScript和css都放到外部文件中: 写在页面内: 1.减少页面请求 2.提升页面渲染速度 单独提取成外部文件: 优点: 1.提高了js和css的复用性 2.减小页面体积 3.提高了js和css的可维护性 缺点:   1.增加了请求数,影响网站性能。(可通过缓存来优化) 写在页面内情况: 1.只应用于一个页面 2.不经常被访问到 3.脚本和样式很少(不多于20行) 9.减少DNS查询: DNS:Domain Name System,域名系统 DNS查询:用户输入网址后根据域名查找对应的IP地址,返回用户。 一个DNS查询至少需要20ms,对网站性能有影响,所以要对这个过程进行缓存,减少查找过程,目前浏览器都有缓存机制 缓存大概时间: {  IE:30m  火狐:60s  chrome:60s } 缓存时间长:减少DNS的重复查找,节省时间 缓存时间短:及时的检测网站服务器的变化,保证正确性 多域或者单域的形式放置资源: 1.单域:将所有的文件都放到一个服务器中 2.多域:html,图片,脚本分别放在不同的域名(域名不是越多越好) 10.压缩JavaScript和css: 减小文件体积,使线上版本是最轻量级的,大幅提升网站性能。 1.去除不必要的空白符、格式符、注释符 2.简写方法名、参数名压缩js脚本 11.避免重定向: 重定向:原始请求被重新转向到了其他请求地址 http重定向状态码:{ 301:用户请求的页面被移动到了另外的位置(永久重定向) 302:用户请求的页面被找到了,但不在原始位置(临时重定向)      } 搜索引擎对于重定向: 301:智能分析,会记录新地址,删除旧地址 302:找旧地址再跳新地址 重定向增加了浏览器到服务器的往返次数,用户多了一次获知新地址的过程 12.移除重复的脚本: 多次引用同一个js文件 如果js文件被多次引用且其中包含变量的运算,则多次引用会导致变量运算可能出错 13.配置实体标签(ETag) ETag{     Entity Tag (实体标签)     属于HTTP协议     受web服务支持     } 使用特殊的字符串来标识某个请求资源版本 用户通过浏览器向服务器请求资源的时候,服务器会进行比较,如果两边的ETag一致,证明该资源没有修改过,服务器会告诉浏览器对比一致,可以使用本地的缓存的版本 帮助服务器减轻许多负担 14.使Ajax缓存: Ajax请求的两种方法:{ post:每次都执行(不可以被缓存) get:同一地址不重复执行(可以被缓存) } 15.Yahoo性能优化的插件:YSlow(基于浏览器的插件) firefox支持性最好 安装顺序:1.基于浏览器(最好是firefox)--2.安装firebug--3.安装YSlow 用途: 1.对网站进行分析 2.给一些建议、一些规则 3.一步一步的优化自己的网站 使用:    1.Rulesets:YSlow(v2)-22条测试规则       YSlow(v1)-14条测试规则 small site or blog-13条测试规则    2.Grade;等级视图 网页评分  A->F等级    3.Components:组件视图,检视各个元素占用空间大小    4.Statistics:统计信息视图,与Components相似    5.tools:工具集 1)jslink:检验js正确性 2)alljs:展示网页中用的js 3)alljsbeautified:将js以可读的方式展示 4)alljsminified:删除换行、空格等,压缩js 5)allcss:展示网页中用的css 6)yuicsscompressor:压缩css 7)allsmush.it:优化图片 8)printableview:将分析打印成报告
    转载请注明原文地址: https://ju.6miu.com/read-1308553.html
    最新回复(0)