从Web前端优化网站性能

￡神魔★判官ぃ 2022-06-09 23:44 263阅读 0赞

# 1. 减少HTTP请求数 #

一个完整的请求都需要经过DNS存址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个漫长而复杂的过程。资源上由于每个请求都要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。

减少HTTP请求数的主要途径包括：

（1）从设计实现层面简化页面

如果你的页面想百度首页那样简单，那么接下来的规则基本上都用不着了。

（2）合理设置HTTP缓存

缓存可以大大减少第二次访问时的请求数，但是如果是F5刷新的话，请求数一样。

怎样才算合理设置？能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头；变化不频繁而又可能会变的资源可以使用Last-Modified来做请求验证。尽可能的让资源能够在缓存中待得更久。

（3）资源合并与压缩

如果可以的话，尽可能的将外部的脚本、样本进行合并，多个合为一个。另外，CSS、JavaScript、Image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

（4）CSS Sprites

合并CSS图片，减少请求数的有一个好办法。

（5）Inline Images

使用data：URL scheme的方式将图片嵌入到页面或者CSS中，如果不考虑资源管理上的问题，不失为一个好办法。如果是嵌入页面的话换来的是增大页面的体积，而无法利用浏览器缓存。使用在CSS中的图片更为理想一些。

（6）Lazy Load Images

使页面刚加载的时候只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。

# 2. 将css文件放在head头，JS脚本放在页面信息后面 #

外链脚本会在加载时阻塞其他资源。

#    3. 异步执行inline脚本（保证脚本在页面内容后面加载） #

inline脚本在执行的时候一样会阻塞并发请求。除此之外，由于浏览器在页面处理方面是单线程的，当inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。

因此，建议将执行时间较长的inline脚本进行异步执行，例如使用setTimeout或者HTML5中的Web Worker。

# 4. Lazy Load JavaScript #

（1）利用min版JS框架

（2）YUI，最初只加载核心模块，其他模块可以等到需要使用的时候才加载。

# 5. 将CSS放在Head中 #

使页面在开始渲染之前先加载css资源

# 6. 异步请求callback #

# 7. 减少不必要的HTTP挑转 #

# 8. 避免重复的资源请求 #

# 9. 合并CSS属性值 #

如border-style: solid;

border-width:1px;

border-color:red;

变成border: 1px solid red;

# 10. 为文件头指定Expires或者Cache-Control #

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关优化建议：Web前端性能优化。

般说来Web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有优化浏览器访问、使用反向代理、CDN等。浏览器访问优化...

我就是我/ 2024年04月17日 05:29/ 0 赞/ 99 阅读

相关 Web网站性能优化技巧

一、前端优化网站性能优化是一个很综合的话题，涉及到服务器的配置和网站前后端程序等各个方面，我只是从实际经历出发，分享一下自己所尝试过的网站性能优化方法。之所以在标题上挂一个

客官°小女子只卖身不卖艺/ 2024年04月01日 16:30/ 0 赞/ 69 阅读

相关怎么优化Web网站性能

一、前端优化网站性能优化是一个很综合的话题，涉及到服务器的配置和网站前后端程序等各个方面，我只是从实际经历出发，分享一下自己所尝试过的网站性能优化方法。之所以在标题上挂一个

秒速五厘米/ 2024年04月01日 15:53/ 0 赞/ 79 阅读

相关 WEB前端性能优化

1. 请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HT

梦里梦外;/ 2022年12月17日 01:30/ 0 赞/ 431 阅读

相关 Web前端性能优化

一、影响网页加载速度关键因素 1）网页内容的大小 \-压缩JS, CSS文件 \-压缩图片。例如新的webp，图片压缩率达到40%，如果图片768KB压缩后为46

「爱情、让人受尽委屈。」/ 2022年11月12日 08:23/ 0 赞/ 416 阅读

相关从Web前端优化网站性能

1. 减少HTTP请求数一个完整的请求都需要经过DNS存址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个漫长而复杂的过程。资源上由于每个请求都要携带数据

￡神魔★判官ぃ/ 2022年06月09日 23:44/ 0 赞/ 264 阅读

相关 Web前端性能优化问题

1、请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTT

灰太狼/ 2022年05月17日 12:42/ 0 赞/ 450 阅读

相关 web前端性能优化一

作为一个前端会允许自己的作品,在非硬性条件下出现卡顿? 肯定是不会,所以给大家梳理一下前端性能的优化. 一:文件操作 html文件压缩: 删除无用的空格和换行符等其他

梦里梦外;/ 2021年12月16日 08:47/ 0 赞/ 626 阅读

相关 Web前端性能优化建议

1、HTML CSS JS位置一般需要将CSS放页面最上面，即HEAD部分，而将JS代码放页面底部。因为页面需要加载为CSS才进行渲染，而JS如果不是在页面加载之前就要执行

今天药忘吃喽~/ 2021年11月23日 07:34/ 0 赞/ 919 阅读

相关 Web前端性能优化

[Web前端性能优化的9大问题][Web_9] 1、请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况

忘是亡心i/ 2021年09月16日 09:50/ 0 赞/ 688 阅读