Web前端性能优化,应该怎么做?

想要成为一名合格的Web前端工程师,Web前端性能优化是一个必须要掌握的知识,那么应该怎么进行Web前端性能优化呢?

1、CSS精灵

CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

2、代码压缩

(1)将table改为div布局

尽量将table标签布局HTML重构div布局,可以节约至少40%的代码量。由于div代码少于table布局的HTML网页,所以搜索引擎索引权重也优于table布局的HTML网页。

(2)缩减精简div、span、ul、li等系列标签

布局DIV+CSS网页时候,有时候可以节约一些DIV布局代码,减少代码量。

(3)删除多余空格

删除多余空格换行,可以有效地压缩HTML代码占用字节,一般在开发完成后可以对HTML中代码进行删除换行和空格内容。

(4)表格类型布局时候适当使用table替代div布局

如果是本身是表格数据列表排版,我们最好选择table,因为表格布局使用table优于div布局,使用table布局却比div布局节约HTML标签代码和节约CSS样式。

(5)网页GZIP压缩

自己的服务器推荐设置网页Gzip压缩功能。

3、高质量的JS代码肯定能省很多事,封装JS以及重复调用方法能够减少很多操作。

4、减少对DOM的操作

(1)创建临时父元素。

(2)创建子元素,并添加内容,设置属性。

(3)把子元素加入到临时父元素中。

(4)把临时父元素添加到DOM树。

或:(1)找到要添加位置的元素。

(2)改变该元素内容为需要的HTML。

5、使用JSON格式来进行数据交换

原理:JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

6、高效使用HTML标签和CSS样式

7、使用CDN加速(内容分发网络)

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

8、精简CSS和JS文件

9、注意控制Cookie大小和污染

推荐阅读更多精彩内容

  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 880评论 0 1
  • 第一部分HTML&CSS整理答案1.什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HTML5...
    Programmer客栈阅读 1,839评论 0 12
  • 前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb阅读 738评论 0 1
  • 一、理论基础知识部分 1.1、讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起T...
    我家媳妇蠢蠢哒阅读 2,845评论 2 106
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,390评论 0 7
  • 你是否曾经羡慕过会魔法的哈利波特? 上学时,因为忘记带课本,很尴尬地在班级里罚站时,我好羡慕自己是哈利波特,可以念...
    心空站阅读 75评论 0 0
  • 日精进第 23日 日阅读:孩子,你慢慢来 日锻炼:晨起跑步 日总结反思:日兼职四小时,时间有点超,占用了学习时间...
    筑梦洒脱阅读 55评论 0 0
  • 昨晚制定的计划今天有意识的践行到位了,并没有带来工作中的改变。明天继续干,直到养成思维习惯。听音频学习知识点,事后...
    小伟小伟小伟阅读 76评论 0 0
  • 所谓的深度工作能力,就是指能让你全神贯注、心无旁骛地进行职业活动的能力。这和心理学的心流很像,把注意力完全投入到某...
    阿列英雄之旅阅读 172评论 0 0
  • 日常生活 林冬旭 昨天我去了先祖的部落 围猎、唱歌、点然一堆篝火 老爷子说这才是他们想要的生活 每个人都是那样不同...
    林冬旭阅读 522评论 6 14