数据 uri 减慢页面加载速度答案

【问题标题】：data uri slowing down page loading数据 uri 减慢页面加载速度
【发布时间】：2013-10-01 11:26:04
【问题描述】：

我在网站的个人资料页面上使用数据 uri 作为头像图像。（我正在使用 asp.net）个人资料网站正在快速打开，但是当我点击个人资料页面上的链接时，chrome 会在左下角显示上传消息上传速度很慢。我无法理解个人资料页面上上传的内容。我还使用配置文件页面的 ispostback 属性控制页面加载。当我删除头像时页面加载很快。

所以，我的问题是我认为网站正在尝试在每个页面事件上上传数据 uri 图像，因此它会减慢页面速度。但是为什么要上传我不明白。

个人资料页面代码：

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Request.Cookies["UserType"] != null)
            {
                Session["UserType"] = Request.Cookies["UserType"].Value;
            }
            if ((string)Session["UserType"] == Contact.EntityLogicalName)
            {
                CrmConnection = ConnectCrm.Single;
                FormsIdentity ident = User.Identity as FormsIdentity;

                if (ident != null)
                {
                   ...
                   ...
                    avatar2.ImageUrl = "/assets/avatars/avatar2.png";
                    IQueryable<Annotation> annotations = AnnotationOperations.SelectAnnotationByObjectId(CrmConnection.Context, new Guid(Id));
                    foreach (var annotation in annotations)
                    {
                        if (annotation.FileName.Contains("avatar"))
                        {
                            avatar2.ImageUrl = "data:image/png;base64," + annotation.DocumentBody;
                            break;
                        }
                    }

                }
            }
            else
            {
                Response.Redirect("~/Default.aspx");
            }
        }
    }

当我点击个人资料页面上的按钮时，主页在下方，它调用editprofile页面，但速度很慢：

protected void lnbSettings_Click(object sender, EventArgs e)
    {
        if (this.Page.User.Identity.IsAuthenticated)
        {
           ....

            if ((string)Session["UserType"] == Contact.EntityLogicalName)
            {
                Response.Redirect("~/Members/EditProfile.aspx", false);
            }
        }
    }

EditProfile 页面代码：

   protected void Page_Load(object sender, EventArgs e)
    {

        if (Request.Cookies["UserType"] != null)
        {
            Session["UserType"] = Request.Cookies["UserType"].Value;
        }
        if ((string)Session["UserType"] == Contact.EntityLogicalName)
        {
            CrmConnection = ConnectCrm.Single;
            if (!IsPostBack)
            {
                SetFields();
            }
            else
            {
                contact = (Contact)Session["Contact"];
                langArr = (new_yabancidil[])Session["LangArr"];
            }
        }
        else
        {
            Response.Redirect("~/Default.aspx");
        }
    }

【问题讨论】：

标签： asp.net pageload data-uri slowdown

【解决方案1】：

此行强制浏览器每次都包含图像数据：

avatar2.ImageUrl = "data:image/png;base64," + annotation.DocumentBody;

要允许浏览器缓存图像，您需要将图像 URL 设置为 ASHX 文件，并在浏览器请求时将图像字节提供给浏览器。因为该用户在所有页面加载中的图像 URL 都是相同的，所以浏览器知道它已经拥有该图像并且不需要再次请求它。

ashx 文件的示例代码：

            Image image = [load image from file here];
            if (image != null)
            {
                image.Save(context.Response.OutputStream, ImageFormat.Png);
            }

【讨论】：