前台新手怎样才能做好性能优化?

作者 : 开心源码 本文共1164个字,预计阅读时间需要3分钟 发布时间: 2022-05-13 共258人阅读

影响客户访问的最大部分是前台的页面。网站的划分一般为二:前台和后端。我们可以了解成后端是用来实现网站的功能的,比方:实现客户注册,客户能够为文章发表评论等等。而前台呢?其实应该是属于功能的体现。

而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以了解成前台才是真正和客户接触的。

除了后端需要在性能上做优化外,其实前台的页面更需要在性能优化上下功夫,只有这样才能给我们的客户带来更好的客户体验。不仅仅如此,假如前台优化得好,他不仅可以为企业节约成本,他还能给客户带来更多的客户,由于加强的客户体验。说了这么多,那么我们应该如何对我们前台的页面进行性能优化呢?

前台性能优化的方法?

一、content方面

1,减少HTTP请求:合并文件、CSS精灵、inline Image

2,减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询

3,避免重定向:多余的中间访问

4,使Ajax可缓存

5,非必需组件推迟加载

6,未来所需组件预加载

7,减少DOM元素数量

8,将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,添加域可以提高并行下载量

9,减少iframe数量

10,不要404

二、Server方面

1,使用CDN

2,增加Expires或者者Cache-Control响应头

3,对组件使用Gzip压缩

4,配置ETag

5,Flush Buffer Early

6,Ajax使用GET进行请求

7,避免空src的img标签

三、cookie方面

1,减小cookie大小

2,引入资源的域名不要包含cookie

四、CSS方面

1,将样式表放到页面顶部

2,不使用CSS表达式

3,使用不使用@import

4,不使用IE的Filter

五、JavaScript方面

1,将脚本放到页面底部

2,将javascript和css从外部引入

3,压缩javascript和css

4,删除不需要的脚本

5,减少DOM访问

6,正当设计事件监听器、

六、图片方面

1,优化图片:根据实际颜色需要选择色深、压缩

2,优化css精灵

3,不要在HTML中拉伸图片

4,保证favicon.ico小并且可缓存

七、移动方面

1,保证组件小于25k

2,Pack Components into a Multipart Document

我目前是在职前台开发,假如你现在也想学习前台开发技术,在入门学习前台的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我的前台学习交流裙:前面:603 中间:985 最后:993。里面聚集了少量正在自学前台的初学者,裙文件里面也有我做前台技术这段时间整理的少量前台学习手册,前台面试题,前台开发工具,PDF文档书籍教程,需要的话都可以自行来获取下载。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台新手怎样才能做好性能优化?

发表回复