• 网站优化——前端优化


    最近工作中需要做一个网站的优化工作,总结了几天,与大家分享下。优化思路无非就是前端优化,asp.net页面生命周期优化,数据访问优化,IIS与web.config配置优化,为了避免篇幅太长,分了四个部分。希望大家能多点评,谢谢!

    1.网站优化——前端优化

    2.网站优化——asp.net页面生命周期优化

    3.网站优化——IIS与web.config配置优化

    4.网站优化——数据访问优化

    前端优化自然免不了提到黄金14条:

    1.Make Fewer HTTP Requests(尽量减少HTTP请求)

    2.Use a Content Delivery Network (使用内容分发网络(即CDN))

    3.Add an Expires Header(添加Expires头)

    4.Gzip Components (压缩组件)

    5.Put Stylesheets at the Top(把CSS放在HTML最上面)

    6.Put Scripts to the Bottom (把脚本(比如JavaScript)放到HTML最下面)

    7.Avoid CSS Expressions(避免使用CSS表达式)

    8.Make JavaScript and CSS External(使用外部的JavaScript和CSS)

    9.Reduce DNS Lookups (减少DNS查询次数)

    10.Minify JavaScript(精简JavaScript)

    11.Avoid Redirects (避免重定向)

    12.Remove Duplicate Scripts(删除重复代码)

    13.Configure ETags (配置ETag)

    14.Make Ajax Cacheable(使用Ajax缓存)

    减少页面体积

    a. 压缩图片(1.1M)、css、js,压缩图片、css、js方法:

    1.上传图片前压缩,上线前手动压缩图片、css、js;

    2.在输出图片时压缩(开启gzip或CompressionModule压缩模块

    b. 精简css,js代码,比如:

    1. css 提取共同样式

    .text_lbg{background:#F3F8FE;display:inline-block;padding:2px;horizontal-align:middle;}
    
    .text_rbg{background:#FFB0B0;display:inline-block;padding:2px;horizontal-align:middle;}
    
    .text_bbg{background:#AADAF0;display:inline-block;padding:2px;horizontal-align:middle }

    改为:

    .text_common{ display:inline-block;padding:2px;horizontal-align:middle;}
    
    .text_lbg{background:#F3F8FE;}
    
    .text_rbg{background:#FFB0B0;}
    
    .text_bbg{background:#AADAF0;}

    2. css 少用父子关系

    .content .compare_price a p i{font-style:normal;font-weight:normal;}

    改为:

    加上class = “classi”,然后使用

    .classi{ font-style:normal;font-weight:normal;}

    c. 禁用ViewState

    1.禁用页面ViewState方法:

    禁用当前页面ViewState:

    @Page指令中设置,代码如下:

    <%@ Page EnableViewState="false" %>

    禁用整个WEB应用程序ViewState:

    修改Web.config中相应元素的属性即可。代码如下:

    <pages enableViewState="false" />

    禁用服务器全局的ViewState:

    修改.Net Framework安装目录下的machine.config即可。代码如下:

    (machine.config一般路径C:\WINDOWS\Microsoft.NET\Framework64\v2.0.50727\CONFIG\machine.config

    <pages enableViewState="false" />

    2.详情页面(DrugDetails)禁用ViewState后页面html由89.5kb减小到78.7kb,效果明显。在简单的删除html行首空格后,页面html减少到69.3 KB。

    减少http请求数

    d. css sprit合并图片;

    1.详情页面有40多个背景图片,可以考虑合并以减少http请求数。

    e. 把css,js合并成一个文件。

    2.详情页面引用css,js非常多,可以考虑合并成一个css和一个js文件,以减少http请求数。

    1.1.3 css放在页面顶部,js放在页面底部;

    f. css是异步加载,css放在顶部可以使页面更快的显示出来,js是阻塞加载,放在底部避免页面加载阻塞。

    静态资源加上过期时间;

    详情页面中有大部分静态资源都没有加上过期时间,会导致浏览器不缓存这些静态页面。对静态内容配置一个较长的过期时间,用户浏览器请求时会从本地缓存读取,加快页面显示速度。

    clip_image002

    配置或删除ETag;

    g. If-None-Match比If-Modified-Since具有更高的优先级。

    1.当请求发现缓存文件的ETag和服务器http响应头中的ETag不同时,会重新请求文件。

    浏览器端第一次访问获得服务器的Last-Modified,第2次访问把浏览器端缓存页面的最后修改时间发送到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。如果时间一致,那么返回304,客户端就直接使用本地缓存文件。

    工作原理是在HTTP Response中添加ETag信息。 当用户再次请求该资 源时,将在HTTP Request 中加入If-None-Match信息(ETag的值)。如果服务器验证资源的ETag没有改变(该资源没有更新),将返回一个304状态告诉客户端使用本地缓存文件。否则将返回200状态和新的资源和Etag。

    clip_image004

    h. 实际上没有If-None-Match头反而会好一些。

    (PS:IIS6.0删除ETag的方法)

  • 相关阅读:
    封装缓动动画函数
    封装动画函数-匀速运动
    实现产品图片的放大镜效果:
    仿淘宝侧边栏滚动案例:
    页面被卷去的头部兼容性解决方案
    简单发送短信倒计时案例
    Echarts 版本的那些坑
    json变量作键名
    媒体查询那些事儿
    mac 强制关闭指定端口
  • 原文地址:https://www.cnblogs.com/Janyzhang/p/2763225.html
Copyright © 2020-2023  润新知