Web 前端性能优化实战

基础知识

了解从地址栏输入URL到页面加载完成总体过程

DNS域名解析

TCP链接

HTTP请求

处理请求返回HTTP响应

页面渲染

关闭链接

分析项目

项目部署环境：美国服务器

webpagetest是一款很是优秀的网页前端性能测试工具，用它来测试生产环境上的项目

由上面的概览最直观的就能够看出如下问题：

一、图片没处理

二、没有缓存静态内容

三、没有使用CDN

四、加载时间长

五、http请求过多

再看看Performance Review

 

六、存在404资源

分析问题

 一、图片没处理

首页直接展现热销的产品，热销的产品愈来愈多，请求的图片就越多,对于非产品图，该合并的没有合并成一张图

二、没有缓存静态内容

每一个网站都.js、.css、静态图片等资源，这样的资源不会常常更新

三、没有使用CDN

若是国际化网站，CDN就不适合

四、加载时间长

是各项问题致使的结果

五、http请求过多

基本是图片连接占据

六、存在404资源

每一个网站其实默认都应该有一个favicon.ico文件（规定是放在网站的根目录下面），它用来在浏览器中为网站显示一个小图标。这个文件是由浏览器自动请求的，若是找不到，则天然会报告404错误

 

解决问题

一、处理图片

为了减小http请求，采用延迟加载方式，产品图片在但是区域才去加载

echo.js是一个独立的延迟加载图片的JavaScript插件，不依赖任何第三方库

<img src="images/load.gif" alt="" data-echo="images/test.jpg" />
<script src="https://toddmotto.com/labs/echo/js/echo.js"></script>
    <script>
        echo.init({
            offset: 100,
            throttle: 250,
            unload: false,
            callback: function (element, op) {
                element.width = "300";
                element.height = "300";
            }
        });
</script>

二、CSS Sprites

.bg-sale {
    width: 88px;
    height: 88px;
    background: url("images/bg-art.png") no-repeat;
    background-position: -15px -170px;
}

 

三、避免404错误

 上传favicon.ico文件到生产环境根目录

四、使favicon.ico文件尽量小而且能够缓存

经过上面的优化看看效果