web前端优化之常规优化

Posted 2020-06-18

　页面打开速度(Fully Loaded)

　     1  网站首页(或列表页)之 First View ：打开速度应在 3秒+0.5秒 内;

　     2  对 Repeat View 时的各项指标暂不作要求;

　　首屏打开时间(Start Render)

　    1  网站首页(或列表页) 之 First View ：首屏渲染速度应在 1秒+0.5秒 内;

　　文档解析完毕时间(Document Complete)：

　     对此指标暂不作要求。

　　常规优化建议：

　　1   javascript 外联文件引用放在 html 文档底部：具体如何摆放内联JS/CSS和外联JS/CSS，请参考 优化第二阶段;

　　2   css 外联文件引用在 html 文档头部：位于 header 内;

　　3   http 静态资源尽量用多个子域名：充分利用现代浏览器的多线程并发下载能力。浏览器的多线程下载能力，参考 附录C;

　　      具体建议：

JS、CSS、CSS背景图片、CSSSprite图片分散在 s0～s2.haoyangshiimg.com 下;

业务类图片分散在 p0～p3.haoyangshi.com 下;

　　4   服务器端提供 html 文档和 http 静态资源时，尽量开启 gzip 压缩;

json/xml 等格式的文本响应，也建议开启 gzip ;

jepg/png 等图片，可以选择不开启 gzip，因为可能服务器端图片无损压缩算法已经很强悍了，不需要依赖于 gzip;

　　5  在 js、css、image 等资源响应的 http headers 里，设置 expires、last-modified;
             nginx如下设置：        

location ~ .*\.(js|css)${
expires 30d;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp)${
expires 1M;
} 

    　6 尽量减少 HTTP Requests 的数量;

　　        通过 combo handler 合并 js 和 css 的下载，参考 优化第三阶段;

　　       本阶段请尽量减少外联 js/css 文件数，尽量减少 ajax 调用;

　　7 js/css 的 minify：可统一通过 combo handler 做到压缩加合并;

　　8 减少不必要的 301/302 跳转：别让页面打开时间浪费在302多次跳转上(每次可能几十毫秒);

　　9 请大量使用 CSS Sprites：这样做可以大大地减少CSS背景图片的HTTP请求次数;

　　10 首屏不需要展示的较大尺寸图片，请使用 LazyLoad ;

　　11 避免404错误：请求一个外联 js 失败时获得的404错误，不但会堵塞并行的下载，而且浏览器会尝试分析404响应的内容，来辨识它是否是有用的Javascript代码;

　　12 减少 cookies 的大小：尽量减少 cookies 的体积对减少用户获得响应的时间十分重要;

　     　去除不必要的 cookie ;

　　    尽量减少 cookie 的大小;

　　    留心将 cookie 设置在适当的域名下，避免影响到其他网站;

　　    设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快地删除 cookie，从而减少响应时间。

　　13 使用无 cookies 的域：

　　当浏览其请求一个静态图片并一同发送 cookie 时，服务器并不需要这些 cookies 。这样只是毫无益处地创建了多余的网络流量。应当保证静态资源在请求时没有携带 cookies，所以需要把你的静态资源放在另一个子域名下。

　　如果你的域名是 www.example.org，你可以将你的静态资源放在 static.example.org 中。如果你把 cookie 设置在顶级域名 example.org 上而不是 www.example.org，那么所有发送至 static.example.org 的请求会包括那些 cookies。在 这种情况下，你可以用一个全新的没有 cookie 的域名来放置你的静态资源。

　　14 避免使用 javascript 来定位布局