网站页面优化有哪些方案 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

网站页面优化有哪些方案

2016-06-14 14:15:31 1874 1

网站页面优化有哪些方案

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:37:32

    基本上你能看到的都要做优化,用一个实例说明最好。看这里
    问题分析

    在动手前要制定计划,制定计划要从解决实际问题出发,先来看看老首页的问题,这是我在制定计划时收集的相关数据:
    •1、请求数过多,其中CSS外链数有12个,JavaScript外链数竟有41个;
    •2、页面总体积过大,很多静态资源都没加gzip,动态站点的JS甚至都没有压缩过;
    •3、资源占用严重,在IE6下滚动页面时CPU占用率高达80%以上,内存泄漏也很严重;
    •4、广告系统,广告图片都是以document.write的方式在加载,页面堵塞的情况很严重;
    •5、页面有7个iframe;
    •6、数据源接口混乱;
    •7、页面加载速度过慢,有白屏现象,首屏完成加载很慢;

    上面的数据让你很震惊,这也说明了有很大的优化空间。找出了问题所在,接下来才有具体的实施方向。总之,无论是常规的方法,亦或是奇淫技巧,目标只有三个字,“快,更快”。

    具体实施

    虽然粗看页面的内容并不是很多,但是具体到功能模块,都是很费时费力的。我们老大有一句很经典的话,“通常我会问面试人员一个问题,如果你独自来做5173首页的前端工作,多久能完成?如果答案只有一个星期,要么是没看过页面,要么就是很不专业。”我就独自花了一个多月的时间才完成首页的前端开发工作。下面来说说具体的实施吧。

    HTML&CSS 的重构

    页面的设计和功能没有变动,但是HTML页面还是要做彻底的重构,这里我也尝试了使用 HTML5 的新标签来对页面进行布局。CSS 的重构也是理所当然的,原来有12个外链的 CSS,这些都要统统干掉的,有些模块如果不止首页有用到,就需要模块化,该放到公用文件就放到公用文件中,在开发的时候可以分多个模块,然后使用 @import到一个文件中,打包发布的时候再合并成一个文件。这需要把握好一个度,即要合理利用缓存,又要避免单文件过大,同时也要做好模块化。

    老首页有很多 CSS 选择器过长的问题,可能一个 CSS 选择器的组合长达6-7个也是常有的事,CSS 选择器过长不仅仅是性能方面的影响,同时也因为 CSS 权值的关系,给后期维护带来了很多的麻烦。应该多使用 class 来定义选择器,再加上 tag 选择器的组合,最多3个选择器的组合就能满足绝大多数的需求了,另外在 CSS 的编写方面禁止使用 id 选择器和 !important,养成良好的 CSS 编写习惯很重要。

    JavaScript 的重构

    JavaScript的重构太迫切了,原来竟有41个 JavaScript 外链文件,当然这些外链也包括了15个广告的外链,广告的优化我稍后再说,但是还剩下26个外链 JavaScript。这些臃肿不堪的 JavaScript文件即是造成页面加载堵塞的元凶,也是系统资源占用的蛀虫,这是整个项目的难点之一。

    重新梳理了四级联动搜索的业务逻辑,并对四级联动搜索的交互功能做优化,增强用户体验。这个模块的 ajax 交互功能较多,最大的 JSON 数据包竟然有94.4KB,此时合理的利用当前页面的缓存功能($.fn.data)很重要。体积最大的 JSON 数据包在页面 Dom Ready 后进行加载,然后拼装第一屏的 HTML 代码并缓存,当用户按字母索引选择游戏的时候再到已加载完的 JSON 数据包中寻找相应的数据去拼装 HTML 代码,然后缓存该索引的 HTML 代码。如果接下来再选择区、服、交易类型时,再到服务器去取相应的 JSON 数据,拼装成 HTML 代码后进行缓存,此时只缓存最后一次的选择结果。

    0 0
相关问答

1

回答

优化网站有什么建议

2018-03-28 22:42:42 518浏览量 回答数 1

1

回答

网站页面排版错乱

2018-02-14 23:12:04 1001浏览量 回答数 1

0

回答

CDN 如何实现页面优化?

2017-10-23 15:47:34 1809浏览量 回答数 0

0

回答

SQL 优化方法有哪些?

2017-10-30 13:56:03 1575浏览量 回答数 0

0

回答

网站配置优化方面,阿里云有无提供专门专家级服务?

2016-09-21 11:05:59 2967浏览量 回答数 0

1

回答

js对页面上区域判断的问题

2016-07-08 15:30:54 1720浏览量 回答数 1

1

回答

前端页面如何优化合适?

2016-06-06 17:06:47 2069浏览量 回答数 1

4

回答

网站优化一般都有哪些步骤?

2014-06-18 14:04:53 8091浏览量 回答数 4

3

回答

我的网站如何优化?

2014-04-14 11:57:51 5134浏览量 回答数 3

4

回答

已成功备案,网站还是显示“阿里云提示页面”

2013-07-10 13:13:16 4883浏览量 回答数 4
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载