0

0

web前端优化方法

巴扎黑

巴扎黑

发布时间:2016-12-06 09:44:50

|

1515人浏览过

|

来源于php中文网

原创

目前,互联网bs模式应用发展越来越多,越来越广泛,包括网站系统、oa平台的开发等,那么如何做好、做得出色,给用户带来很好的体验呢?下面跟大家分享一下web前端优化方面的经验,这些经验都是工作实践中比较实用的技术 
  1、尽量减少http请求个数——须权衡 

  合并图片(如css sprites,内置图片使用数据)、合并css、js,这一点很重要,但是要考虑合并后的文件体积。 

  2、为文件头指定expires或cache-control,使内容具有缓存性。 

  区分静态内容和动态内容,避免以后页面访问中不必要的http请求。 

  3、避免空的src和href 

  留意具有这两个属性的标签如link,script,img,iframe等; 

  4、使用gzip压缩内容 

  gzip压缩所有可能的文件类型以来减少文件体积 

  5、把css放到顶部 

  实现页面有秩序地加载,这对于拥有较多内容的页面和网速较慢的用户来说更为重要,同时,html规范清楚指出样式表要放包含在页面的区域内; 

  6、把js放到底部 

  http/1.1 规范建议,浏览器每个主机名的并行下载内容不超过两个,而问题在于脚本阻止了页面的平行下载,即便是主机名不相同 

  7、避免使用css表达式 

  页面显示和缩放,滚动、乃至移动鼠标时,css表达式的计算频率是我们要关注的。可以考虑一次性的表达式或者使用事件句柄来代替css表达式。 

  8、将css和js放到外部文件中 

  我们需要权衡内置代码带来的http请求减少与通过使用外部文件进行缓存带来的好处的折中点。 

  9、精简css和js 

  目的就是减少下载的文件体积,可考虑压缩工具jsmin和yui compressor。 

  10、剔除重复的js和css 

  重复调用脚本,除了增加额外的http请求外,多次运算也会浪费时间。在ie和firefox中不管脚本是否可缓存,它们都存在重复运算javascript的问题。 

  11、使ajax可缓存 

  利用时间戳,更精巧的实现响应可缓存与服务器数据同步更新。 

  12、尽早刷新输出缓冲 

  尤其对于css,js文件的并行下载更有意义 

  13、使用get来完成ajax请求 

  当使用xmlhttprequest时,浏览器中的post方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。在url小于2k时使用get获取数据时更加有意义。 

  14、延迟加载 

  确定页面运行正常后,再加载脚本来实现如拖放和动画,或者是隐藏部分的内容以及折叠内容等。 

  15、预加载 

  关注下无条件加载,有条件加载和有预期的加载。 

  16、尽量减少iframe的个数 

  考虑即使内容为空,加载也需要时间,会阻止页面加载,没有语意,注意iframe相对于其他dom元素高出1-2个数量级的开销,它会在典型方式下阻塞onload事件,ie和firefox中主页面样式表会阻塞它的下载。 

  17、避免404 

  http请求时间消耗是很大的,有些站点把404错误响应页面改为“你是不是要找*”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。 

  18、减少cookie的大小 

  去除不必要的coockie 使coockie体积尽量小以减少对用户响应的影响,设置合理的过期时间。较早地expire时间和不要过早去清除coockie,都会改善用户的响应时间。 

  19、优化图像 

  尝试把gif格式转换成png格式,看看是否节省空间。在所有的png图片上运行pngcrush(或者其它png优化工具) 

  20、不要在html中缩放图像——须权衡 

  不要为了在html中设置长宽而使用比实际需要大的图片。 

mallcloud商城
mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合,项目代码简洁注释丰富上手容易,适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案,面向互联网设计同时适合B端和C端用户,支持CI/CD多环境部署,并提

下载

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 25.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号