笔试常考--浏览器性能优化

时间:2021-07-26 16:48:12

1. 减少http请求

HTTP是无状态协议,每次HTTP请求都要重新建立通信链路。而服务器端每个http请求都要启动独立的线程来处理。因此,减少http请求能有效提高访问性能。

减少HTTP请求的主要手段是合并CSS,javascript和图片。

2. 使用浏览器缓存

对于Logo、图标、CSS和javascript这些静态资源文件,几乎是每次HTTP请求都需要的,如果将这些文件缓存在浏览器中,第一次加载后,以后就不需要请求了。

通过设置HTTP头中的Cache-Control和Expires属性,可以设定浏览器缓存。(Tomcat 7配置参考:http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#Expires_Filter

在某些时候,静态资源更新需要及时应用到客户端浏览器。这种情况,可以通过更新文件名来实现。例如:

1 <script type="text/javascript" src="/js/xx.js"></script>

xx.js更改了。这时可以将xx.js重命名。并修改HTML文件中的引用。

1 <script type="text/javascript" src="/js/xx2.js"></script>

3. 启用压缩

Nginx中启用压缩:

nginx.conf:

 1 # 启用压缩
 2 gzip on;
 3 
 4 # 大于1K的才压缩     
 5 gzip_min_length 1k;
 6 
 7 # 缓冲区,用默认就可以
 8 gzip_buffers 4 16k;
 9 
10 # 默认值是1.1,就是说对HTTP/1.1协议的请求才会进行gzip压缩。如果使用了反向代理,则nginx和后端的upstream server之间是用HTTP/1.0协议通信
11 gzip_http_version 1.0;
12 
13 # 压缩级别,1-10,越大压缩率越高,开销也越大
14 gzip_comp_level 2;
15 
16 # 进行压缩的文件类型。js文件有两种写法,最好都写上
17 gzip_types text/plain application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png;
18 
19 gzip_vary on;
20 
21 # IE6对Gzip不怎么友好,不给它Gzip了。
22 gzip_disable "MSIE [1-6].";

4. CSS放在页面最上面,Js放在页面最下面

浏览器会在下载完全部CSS文件之后,才对页面进行渲染,因此应该讲CSS文件放在页面最上面,让浏览器尽快下载。javascript则相反,浏览器在加载javascript后立即执行,有可能会阻塞整个页面,造成显示缓慢,因此javascript最好放在页面最下面。

CSS文件:

1 <head>
2     ...
3     <link href="/css/xx.css" rel="stylesheet" type="text/css" />
4     ...
5 </head>

js文件:

1     ...
2     <link type="text/javascript" src="/js/abc.js"> 
3     ...
4 </body>

5. 减少Cookie传输

Cookie在每次请求和响应中都要传输,因此Cookie要尽量小。

另一方面,在请求css和js等静态资源时,也会带上Cookie,这时发送Cookie没有意义。这种情况可以考虑静态资源使用独立域名,避免请求静态资源时发送Cookie。