Web前端性能优化之一：优化浏览器访问

最新推荐文章于 2024-03-22 16:38:58 发布

brisling

最新推荐文章于 2024-03-22 16:38:58 发布

阅读量986

点赞数 1

文章标签：性能优化

本文链接：https://blog.csdn.net/brisling/article/details/49177923

版权

浏览器访问优化的手段有：

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）

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

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

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

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

3. 启用压缩

Nginx中启用压缩：

nginx.conf：

# 启用压缩
gzip on;

# 大于1K的才压缩     
gzip_min_length 1k;

# 缓冲区，用默认就可以
gzip_buffers 4 16k;

# 默认值是1.1，就是说对HTTP/1.1协议的请求才会进行gzip压缩。如果使用了反向代理，则nginx和后端的upstream server之间是用HTTP/1.0协议通信
gzip_http_version 1.0;

# 压缩级别，1-10，越大压缩率越高，开销也越大
gzip_comp_level 2;

# 进行压缩的文件类型。js文件有两种写法，最好都写上
gzip_types text/plain application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png;

gzip_vary on;

# IE6对Gzip不怎么友好，不给它Gzip了。
gzip_disable "MSIE [1-6].";

注意：压缩对服务器会产生一定的压力，在带宽充足而服务器资源不足的情况下要权衡考虑。

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

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

CSS文件：

<head>
    ...
    <link href="/css/xx.css" rel="stylesheet" type="text/css" />
    ...
</head>

js文件：

    ...
    <link type="text/javascript" src="/js/abc.js"> 
    ...
</body>

5. 减少Cookie传输

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

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