网站优化——前端优化

2022-02-18 1492

最近工作中需要做一个网站的优化工作,总结了几天,与大家分享下。优化思路无非就是前端优化,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是阻塞加载,放在底部避免页面加载阻塞。

静态资源加上过期时间;

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

网站优化——前端优化

配置或删除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。

网站优化——前端优化

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

以上就是网站优化——前端优化的详细内容,更多请关注php知识-学习天地 www.lxywzjs.com其它相关文章!

分享至:

分享到QQ空间 分享到朋友社区 新浪微博分享

栏目地图