本文目录一览：

web网站优化可以如何实现？

随着互联网的不断发展，越来越多的消费者都开始通过移动端来访问网络接收自己需要的信息。而这些信息的传播都是需要通过移动端网页来实现的，所以，昆明北大青鸟今天就一起来了解一下关于移动端web网页的优化方法。

WEB服务端优化

有货的WEB端主要使用了nodejs，基于后端服务提供的HTTP接口服务来实现的前后端分离，这里的服务端优化主要是指在nodejs实现的web服务端进行优化。

优化的目的是提升服务端的响应和并发能力，充分发挥nodejs的异步非阻塞的特性，主要从以下几个方面去优化。

接口服务调用的优化

对于一个页面展示的路由，要处理这个路由，可能需要调用多个接口并且进行进行界面逻辑的处理。

接口合并我们对于一个页面调用可以合并的接口，进行接口合并，减少接口调用次数，如：以商品详情页为例，商品的一些特性，可以在一个接口返回，尽可能的减少接口调用的个数，因为每次接口的处理都有网络IO,对象序列化，压缩和解压的过程。

接口异步调用但是并不是所有的接口都可以合并，对于无法合并的接口，我们尽量使用node的异步非阻塞的特性，进行异步调用，同时调取多个接口，而调用耗时取决于较慢的接口。

这里要说明一点：对于接口依赖，如A接口依赖B接口的返回结果，像这种情况，我们最好梳理下接口设计，减少这样的串行调用，因为这样，调用耗时是多个接口耗时的总和。

减少接口交互数据返回的数据较多的情况下，会导致JSON序列化，数据批量对象处理，产生额外的性能损耗。可以做下接口返回数据结构的精简，返回必要的字段(页面会展示用到的数据)以及可以调整返回item个数。从而达到减少数据的返回消息体的大小。此外请求接口时需要gzip压缩，可以大大的减少网络传输的时间，尽管需要解压会消耗一部分CPU的时间，但是对接网络IO的损耗，还是值得的。

业务处理的优化

现在我们主要的服务端业务处理，主要对于页面逻辑的处理，如路由控制，会话处理，视图对象处理，模板渲染。我们在这些处理过程中进行了一些优化。

模板渲染的优化

我们在实际使用过程中，发现模板的渲染是十分消耗性能的，特别的模板的预处理过程，如果预处理过程是在用户访问过程中去处理，会慢不止一个数量级，所以我们把预处理的过程提前了(改造了hbs)，在启动web应用时，已经预编译完成。同时我们发现handlebars的一些默认配置属性，如缩减处理，在字符串拼接过程中会损耗一定的性能，所以可以关闭html片段的缩减。

Web性能重要吗?Web性能优化的技巧有哪些?

今天小编要跟大家分析的文章是关于Web性能重要吗?Web性能优化的技巧有哪些?相信对于Web性能重要吗?这个问题大家得到的答案一定会是肯定的。Web性能非常重要!

响应更快的网站会带给用户更好的体验，理论上讲，好的体验等于好的用户满意度。更快，也意味着用户在放弃之前，有希望更快的访问到你的网站。放弃的原因有很多：页面加载时间太长，用户失去了兴趣，浏览器崩溃等等。提高性能可以降低放弃率，会给网站了带来显著的效益。

运行时的性能是指Web应用程序运行时对于用户输入的响应速度，比如点击删除图片等。

那么Web性能影响因素有哪些呢?

运行时的性能受很多因素影响：

·从完成特定功能所采用的算法效率到优化方法;

·从解释器和浏览器渲染引擎的优化或不足到有效内存管理和CPU使用率;

·再到设计时间同步和异步操作之间的选择，都会对性能产生影响。

运行时的性能是一个比较主观的感觉。今天就从三个角度分享一下小编的性能优化小技巧。

·

角度一：当我们在浏览器的地址栏输入一个URL，就开启了一个新的网络线程，DNS解析、TCP连接和HTTP请求和响应，不可避免地依赖网络环境、受到网络延迟、网络不稳定等因素影响。我们能做的只有尽可能减少网络请求，以减少网络线程产生的网络消耗。

·

角度二：浏览器也有部分原因，主流浏览器有IE、Chrome、Safari、Firefox、Opera等，不同的浏览器的JS引擎性能不同，带给用户的体验也不同，比如IE8及以下的内核表现不好是众所周知的。

·

角度三：除去网络、浏览器等外围因素，影响Web性能的主要还是页面本身。作为开发人员，性能优化可以控制的部分就是页面，包括页面大小、页面结构、JS、CSS等等。

针对以上3点页面加载过程所涉及到的因素，下面做简单讨论和优化的办法介绍~

Web性能优化小技巧：

1.减少HTTP请求数：

1)资源大小很重要，不仅仅关系到下载时间，还因为IPv4和IPv6协议规定一个IP包的最大值为65535字节。一个IP包是一次请求，于是可以得到一个等式：

根据这个公式，我们可以控制资源尽可能小。可以采取使用gulp等自动化构建工具进行自动合并JS文件、压缩文件和图片等手段。

2)

避免重定向：重定向说明需要客户端采取进一步操作才能完成请求，请求时间就会延长。所以输入URL时应使用最完整的、最直接的地址，比如输入而不是baidu.com。

3)使用缓存机制：主要有数据库缓存、服务端缓存(反向代理和CDN缓存)、浏览器缓存。

2.图片懒加载

页面图片很多的，可以使用懒加载。只加载第一屏的图片，当用户滚动访问后面的内容时再加载相应图片。方法是先用一张极小的占位图代替图片，占位图只下载一次，将原本图片的src存储在另一个属性中，判断当图片快进入可视区域就将路径赋值给src并下载图片进行展示。

3.代码优化

1)页面结构：CSS放在HTML内容上部，JavaScript放在HTML内容下部。可以使用preload提前解析资源的DNS。由于浏览器是自上而下读取内容的，因此放置资源的位置会影响网站的访问速度。比如，如果将script标签放在HTML内容的前边，浏览器就会先调用JavaScript解释器对JS进行解析，完成之后才会渲染其余的HTML内容，对用户来说，能看到的是HTML的内容，所以1)

这么做会导致页面可用性的延迟。另外，CSS是对页面节点进行修饰的，如果CSSOM未构建之前就进行了布局，等到CSSOM构建出来，如果CSS修改了节点的布局，就会发生重排，需要重新计算布局并绘制。

2)

JavaScript优化：比如减少对DOM的操作，减少重排和重绘，减少作用域链查找，慎用eval函数等等。JS代码和(下面的)CSS的优化主要要求前端开发人员对页面渲染原理有清晰的了解、对基础知识的掌握和良好的编程习惯。

3)CSS优化：比如减少使用通配符‘*’，提取公用样式增强可复用性，选择器准确可减少匹配时间，适度使用内联样式。

以上就是小编今天为大家分享的关于Web性能重要吗?Web性能优化的技巧有哪些?的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web培训官网哦。

昆明北大青鸟分享web网站优化可以如何实现

随着互联网的不断发展，越来越多的消费者都开始通过移动端来访问网络接收自己需要的信息。而这些信息的传播都是需要通过移动端网页来实现的，所以，昆明北大青鸟今天就一起来了解一下关于移动端web网页的优化方法。

WEB服务端优化

有货的WEB端主要使用了nodejs，基于后端服务提供的HTTP接口服务来实现的前后端分离，这里的服务端优化主要是指在nodejs实现的web服务端进行优化。

优化的目的是提升服务端的响应和并发能力，充分发挥nodejs的异步非阻塞的特性，主要从以下几个方面去优化。

接口服务调用的优化

对于一个页面展示的路由，要处理这个路由，可能需要调用多个接口并且进行进行界面逻辑的处理。

接口合并 我们对于一个页面调用可以合并的接口，进行接口合并，减少接口调用次数，如：以商品详情页为例，商品的一些特性，可以在一个接口返回，尽可能的减少接口调用的个数，因为每次接口的处理都有网络IO,对象序列化，压缩和解压的过程。

接口异步调用 但是并不是所有的接口都可以合并，对于无法合并的接口，我们尽量使用node的异步非阻塞的特性，进行异步调用，同时调取多个接口，而调用耗时取决于较慢的接口。

这里要说明一点：对于接口依赖，如A接口依赖B接口的返回结果，像这种情况，我们最好梳理下接口设计，减少这样的串行调用，因为这样，调用耗时是多个接口耗时的总和。

减少接口交互数据 返回的数据较多的情况下，会导致JSON序列化，数据批量对象处理，产生额外的性能损耗。可以做下接口返回数据结构的精简，返回必要的字段(页面会展示用到的数据)以及可以调整返回item个数。从而达到减少数据的返回消息体的大小。此外请求接口时需要gzip压缩，可以大大的减少网络传输的时间，尽管需要解压会消耗一部分CPU的时间，但是对接网络IO的损耗，还是值得的。

业务处理的优化

现在我们主要的服务端业务处理，主要对于页面逻辑的处理，如路由控制，会话处理，视图对象处理，模板渲染。我们在这些处理过程中进行了一些优化。

模板渲染的优化

我们在实际使用过程中，发现模板的渲染是十分消耗性能的，特别的模板的预处理过程，如果预处理过程是在用户访问过程中去处理，会慢不止一个数量级，所以我们把预处理的过程提前了(改造了hbs)，在启动web应用时，已经预编译完成。同时我们发现handlebars的一些默认配置属性，如缩减处理，在字符串拼接过程中会损耗一定的性能，所以可以关闭html片段的缩减。

网站优化方法有哪些

1.网站诊断

从网站定位出发，对网站结构、网页设计、标签设计等各方面进行系统性的评测诊断，给出综合评价报告。

2.关键词分析

根据网站主题，选择出最佳关键词，整站将围绕关键词进行重点优化，获取排名。

3.资料收集

收集网站主题相关的、整个优化过程所需的资料。

4.网站优化

从网站的结构、设计等多方面入手，针对首页、主栏目页、分栏目页、专题及内容网页等提供一个整站优化方案。

5.网站无漏测试和网页内容

对网站的整体进行优化之前，对网站测试无漏链很关键。另外，网页的原创性，也是决定网站整体排名的关键因素。

网站优化的具体过程可概括为以下几步骤。

第一，根据网站主营的业务确定要优化的主关键词和拓展关键词。

第二，对网站的目录结构、链接结构和各页面结构进行全面的分析诊断，作出详细的诊断报告，这样可以有计划、有针对性地开展优化工作。

第三，根据确定的关键词和诊断报告，制定出合理的优化方案。

第四，按照优化方案对各网页的页面结构（对网页各标签进行优化）和链接结构、网站的整体目录结构进行优化。

第五，为网站作有价值的资源链接，使网站活跃起来。

第六，经常更新网站的内容，使网站看起来具有活力，以便更好地留住目标客户。

1、页面关键字与关键字密度优化

很多搜索引擎都是通过页面的关键词密度来决定该页面对关键字的关联度，关联度越高，该页面的相关性就越高，所以应确保关键字在整个网页中的充分利用和合理分布。具体做法有：充分利用所有可以利用的因素，但不要过分重复或简单排列关键字；应遵循必要的语法规则，形成自然流畅的语句，使网页不失吸引力；从页面因素的优化角度出发，可考虑将关键字分布在网页标题元、网页描述/关键字元、正文标题、正文内容、文本链接、ALT标志当中。

2、框架优化

所谓框架型网页就是一个网页的某一边导航菜单是固定的，而页面另一边的信息可以上下移动。框架中的内容是无法在后台代码中体现的，而对于那些主要为搜索引掌的搜索程序来说，其设计思路都是完全忽略某些HTML代码，转而直接锁定网页上的实际内容进行索引。这样，搜索引擎在那些一般性的框架网页上根本找不到要搜索的内容。

3、动态页面优化

所谓动态网页指的是采用ASP、PHP、JSP、CGI等程序动态生成的页面。此类网页中的大部分内容来自于网站相连的数据库，在网络空间中并不存在实际的页面，只有在接到用户的访问要求，即当用户在变量区中输入相应值以后，才自动生成。而搜索引擎只是一个搜索程序，它无法像真实的用户一样选择变量并输入数值。

4、建立网站地图

网站地图包括主要网页的内容链接或者栏目链接。根据网站的大小、页面数量的多少，它可以链接部分主要的或者所有的栏目页面。这样，搜索引擎程序得到了网站地图页面，就可以迅速地访问整个站点上的所有网页及栏目。为了使网站地图吸引搜索引擎与真实访问者，一定要在链接后写上一定的描述性短句，对与此链接相关的关键词进行简单描述，但是不能过度使用关键词。作为网站地图，不仅是为搜索引擎设计的，也是为真实的访问者设计的，如果访问者能感觉到地图好用，搜索引擎也同样能正确地理解地图的意义。

2020年Web前端性能优化需要做哪些

今天小编要跟大家分享的文章是关于2020年Web前端性能优化需要做哪些?性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据(甚至是业务收入)。

性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务

5s的加载时间优化缩减80%(1s)与后端服务50ms的响应优化缩减80%(10ms)

相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。下面就来和小编一起看一看吧!

一、html文档结构标签语义化

1、首先什么是语义化呢?

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。即用正确的标签做正确的事。

2、语义化的好处或者说存在的意义

①有利于搜索引擎抓取

②结构清晰的HTML在团队合作中的作用：代码可读、便于维护、提高开发效率、快速达成共识、利于二次开发。

③有利于盲人屏幕阅读器

二、css、js文件数量及大小

优化一般对于css、js是建议使用外联式来进行导入。我们可以对css、js做相应的规划也可以减少css、js的个数以减少http请求。同时也要注重减少重复代码，注重代码重复利用，以达到用最少的代码干最多的事。同时当项目要投入上线使用的时候，可以对css、js文件进行压缩，文件的减小可以加速文件的链接导入，以便加速网页的加载渲染。

可通过使用Webpack，gulp等工具对Js文件进行合并。

三、图片的数量和大小

多个服务器请求会对站点的性能产生显著的影响。对一张图片进行导入又是一个http请求，因此我们应该减少图片的导入数量以便减少http请求。此处，我们必须提到一个名词“css精灵spirit”。css精灵是指包含多个不同的图标、按钮或图形的单个图像。因此我们可以把多张背景图片合并为一张然后对背景图片进行相应的定位。同时使用PNG8格式的图片相对于GIF来说比较少。而对于内容图片，可以对其进行适当的压缩，可以加快文档内容加载，或者如果是需要用户下载的图片，小的图片可以加快用户下载的速度。

使用较为广泛的Web图片格式有：JPEG/JPG、PNG、WEBP、Base64、SVG。

1.JPEG/JPG

特点是有损压缩，体积小，加载快，不支持透明。

使用场景：JPG适合用于呈现热菜丰富的图片，在日常的开发中，JPG图片经常作为大的背景图、轮播图或是Banner图。比如两大电商网站对大图片的处理，就是对JPG图片应用场景的最佳写照。用JPG来呈现大图片，既可以保留图片的质量，又不会担心图片的体积，是一种比较广泛使用的方案。

缺点：在处理一些矢量图形和logo等这些线条感很强、颜色对比强烈的图片时，认为压缩就导致图片模糊非常明显。另外，JPG图像不支持透明度处理，透明图片只能用PNG来呈现了。

2.PNG-8和PNG-24

特点是无损压缩、质量高、体积大、支持透明

优点：无损压缩的高保真图片格式。8和24都是二进制数的位数，8位的PNG支持256中颜色，24位的PNG可以支持1600万种颜色。在不考虑文件大小只在乎最佳的显示效果时，推荐使用PNG-24。但是在适合使用PNG时会优先选择PNG-8

应用场景：主要用PNG来呈现小的LOGO、颜色简单对比强烈的图片或是背景。

3.SVG

特点是文本文件，体积小，不失真，兼容性好

优点：SVG是一种基于XML语法的图像格式。SVG对图像的处理不是基于像素，而是基于对图像的形状描述。

和JPG、PNG相比较，SVG文件体积更小，可压缩性更强。SVG作为矢量图最大的优点在于图片可以无限放大还不失真，一张SVG图片可以适配多种分辨率。另外SVG是文本文件，可以像写代码一样定义SVG，放在HTML中称为DOM的一部分。也可以把对图像的描述写入以.svg为后缀的文件中，在img标签中引入即可。

4.WebP

优点：WebP是一款比JPG、PNG等在压缩方面更加优越的图片格式，同时也不会影响其图片质量，使用该格式时最好将同名文件格式化，当检测浏览器不兼容时自动切换jpg格式

缺点：是一个相对较新的技术，所以对于目前市面上的浏览器能否完美的兼容，其可用和实用性就变得很现实了，再好的东西如果没有好的兼容性，也是非常难以普及和被广泛使用的

5.Base64

优点：减少请求，加快首屏数据显示。对于jpg格式的图片，每一个图片相当于一次http请求，图片多了的话，服务器耗性能比较严重。而将jpg转化成base64格式的图片，则极大地减少了请求数，因为Base是文本格式。

缺点：base64格式图片比原图大，占用更多存储空间，同时，浏览器不会对该资源缓存。

使用方法：background:url(data:image/png;base64,{img_data})

应用场景：一般对于小于10KB大小的图片进行base64转码。

至于动态图有GIF与APNG：后者APNG这东西是mozilla搞出来的，

它是24位的，而且也是动图，可以容纳1680万种颜色，也是为了取代GIF，但是....也就火狐支持，IE10和chrome，safari全部不行，

如果说gif图片是卡片机的话，APNG就是单反

四、有效性验证

除了根据语义加标记之外，HTML文档还需要用有效的代码来编写，如果代码是无效的，浏览器会尝试解释标记本身，有时候会产生错误的结果。更糟的是，如果发送具有正确的MIME类型的XHTML文档，理解XML的浏览器将不显示无效的页面。因为浏览器需要知道要使用什么DTD(文档类型定义)才能正确地处理页面，所以对页面进行有效性验证要求有DOCTYPE声明。

有效性验证工具径：

①

W3C验证器(bookmarklet)，这是一小段可以存储在浏览器的书签或收藏夹中的Javascript。单击这个书签就会触发Javascript动作。

②可以访问，通过输入自己的URL来对自己的站点来进行在线验证。

③使用firefox浏览器的可以下载插件FirefoxWebDeveloperExtension

五、雅虎的Web优化最佳实践

1、内容优化

①尽量减少HTTP请求：常见方法包括合并多个CSS文件和JavaScript文件，利用CSSSprites整合图像，Image

map(图像中不同的区域设置不同的链接)，内联图象(使用data:URLscheme在实际的页面嵌入图像数据)等。

②减少DNS查找，一般dns查找需要花费20-120ms，Windows的DNS缓存，可以通过ipconfig/displaydns

这个命令来查看。

③避免重定向

④使Ajax可缓存

⑤延迟加载组件：考虑哪些内容是页面呈现时所必需首先加载的、哪些内容和结构可以稍后再加载，根据这个优先级进行设定。

⑥

预加载组件：预加载是在浏览器空闲时请求将来可能会用到的页面内容(如图像、样式表和脚本)。当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。

⑦减少DOM元素数量：页面中存在大量DOM元素，会导致JavaScript遍历DOM的效率变慢。

⑧根据域名划分页面内容：把页面内容划分成若干部分可以使你最大限度地实现平行下载。但要确保你使用的域名数量在2个到4个之间(否则与第2条冲突)。

⑨最小化iframe的数量：iframes

提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。

⑩

避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的，它只会降低用户体验而不会有一点好处。

2、服务器优化

①使用内容分发网络(CDN)：把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。

添加Expires或Cache-Control信息头：对于静态内容，可设置文件头过期时间Expires的值为“Never

expire(永不过期)”;对于动态内容，可使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。

②Gzip压缩

③设置ETag：ETags(Entity

tags，实体标签)是Web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。

④

提前刷新缓冲区：当用户请求一个页面时，服务器会花费200到500毫秒用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，可以使用flush()方法，它允许你把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容(脚本等)而后台同⑤时处理剩余的HTML页面。

⑥

对Ajax请求使用GET方法：当使用XMLHttpRequest时，浏览器中的POST方法会首先发送文件头，然后才发送数据。因此使用GET最为恰当。

⑦避免空的图像src

3、Cookie优化

①减小cookie大小：去除不必要的coockie，并使coockie体积尽量小以减少对用户响应的影响

②

针对Web组件使用域名无关的Cookie：对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放静态组件是一个好方法，或者也可以在Cookie中只存放带www的域名。

4、CSS优化

①将CSS代码放在HTML页面的顶部

②避免使用CSS表达式：CSS表达式在执行时候的运算量非常大，会对页面性能产生大的影响

③使用来代替@import

④避免使用Filters：IE独有属性AlphaImageLoader用于修正IE

7以下版本中PNG图片的半透明效果，但它的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。

5、JavaScript优化

①将JavaScript脚本放在页面的底部

②

将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。

③缩小JavaScript和CSS

④删除重复的脚本

⑤最小化DOM的访问：使用JavaScript访问DOM元素比较慢

⑥开发智能的事件处理程序

6、图像优化

①优化图片大小

②通过CSSSprites优化图片

③不要在HTML中使用缩放图片

④favicon.ico要小而且可缓存

7、针对移动优化

①保持组件大小在25KB以下：主要是因为iPhone不能缓存大于25K的文件(注意这里指的是解压缩后的大小)。

②将组件打包成为一个复合文档：把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中获取多个组件。

以上就是小编今天为大家分享的关于2020年Web前端性能优化需要做哪些的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

Web前端工程师要掌握的Web前端性能优化方法

今天小编要跟大家分享的文章是关于Web前端工程师要掌握的Web前端性能优化方法。正在从事Web前端工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。

Web前端需要性能优化么？

性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据(甚至是业务收入)。

性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务

5s的加载时间优化缩减80%(1s)与后端服务50ms的响应优化缩减80%(10ms)

相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。

我和一些同学接触的过程中，发现作为前端工程师，大家其实都具备一定的性能优化意识，同时也有自己的优化“武器库”，例如懒加载、资源合并、避免reflow

等等。虽然大家对性能优化都有自己的思路，不过大多是分散在某几个点，较难形成一个完整的体系。

一、html文档结构标签语义化

1、首先什么是语义化呢?

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在需要更少的人类干预的情况下能够研究和收集信息,让网页能够被机器理解,最终让人类受益。即用正确的标签做正确的事。

2、语义化的好处或者说存在的意义

①有利于搜索引擎抓取

②结构清晰的HTML在团队合作中的作用：代码可读、便于维护、提高开发效率、快速达成共识、利于二次开发。

③有利于盲人屏幕阅读器

二、css、js文件数量及大小

优化一般对于css、js是建议使用外联式来进行导入。我们可以对css、js做相应的规划也可以减少css、js的个数以减少http请求。同时也要注重减少重复代码，注重代码重复利用，以达到用最少的代码干最多的事。同时当项目要投入上线使用的时候，可以对css、js文件进行压缩，文件的减小可以加速文件的链接导入，以便加速网页的加载渲染。

可通过使用Webpack，gulp等工具对Js文件进行合并。

三、图片的数量和大小

多个服务器请求会对站点的性能产生显著的影响。对一张图片进行导入又是一个http请求，因此我们应该减少图片的导入数量以便减少http请求。此处，我们必须提到一个名词“css精灵spirit”。css精灵是指包含多个不同的图标、按钮或图形的单个图像。因此我们可以把多张背景图片合并为一张然后对背景图片进行相应的定位。同时使用PNG8格式的图片相对于GIF来说比较少。而对于内容图片，可以对其进行适当的压缩，可以加快文档内容加载，或者如果是需要用户下载的图片，小的图片可以加快用户下载的速度。

使用较为广泛的Web图片格式有：JPEG/JPG、PNG、WEBP、Base64、SVG。

1.JPEG/JPG

特点是有损压缩，体积小，加载快，不支持透明。

使用场景：JPG适合用于呈现热菜丰富的图片，在日常的开发中，JPG图片经常作为大的背景图、轮播图或是Banner图。比如两大电商网站对大图片的处理，就是对JPG图片应用场景的最佳写照。用JPG来呈现大图片，既可以保留图片的质量，又不会担心图片的体积，是一种比较广泛使用的方案。

缺点：在处理一些矢量图形和logo等这些线条感很强、颜色对比强烈的图片时，认为压缩就导致图片模糊非常明显。另外，JPG图像不支持透明度处理，透明图片只能用PNG来呈现了。

2.PNG-8和PNG-24

特点是无损压缩、质量高、体积大、支持透明

优点：无损压缩的高保真图片格式。8和24都是二进制数的位数，8位的PNG支持256中颜色，24位的PNG可以支持1600万种颜色。在不考虑文件大小只在乎最佳的显示效果时，推荐使用PNG-24。但是在适合使用PNG时会优先选择PNG-8

应用场景：主要用PNG来呈现小的LOGO、颜色简单对比强烈的图片或是背景。

3.SVG

特点是文本文件，体积小，不失真，兼容性好

优点：SVG是一种基于XML语法的图像格式。SVG对图像的处理不是基于像素，而是基于对图像的形状描述。

和JPG、PNG相比较，SVG文件体积更小，可压缩性更强。SVG作为矢量图最大的优点在于图片可以无限放大还不失真，一张SVG图片可以适配多种分辨率。另外SVG是文本文件，可以像写代码一样定义SVG，放在HTML中称为DOM的一部分。也可以把对图像的描述写入以.svg为后缀的文件中，在img标签中引入即可。

4.WebP

优点：WebP是一款比JPG、PNG等在压缩方面更加优越的图片格式，同时也不会影响其图片质量，使用该格式时最好将同名文件格式化，当检测浏览器不兼容时自动切换jpg格式

缺点：是一个相对较新的技术，所以对于目前市面上的浏览器能否完美的兼容，其可用和实用性就变得很现实了，再好的东西如果没有好的兼容性，也是非常难以普及和被广泛使用的

5.Base64

优点：减少请求，加快首屏数据显示。对于jpg格式的图片，每一个图片相当于一次http请求，图片多了的话，服务器耗性能比较严重。而将jpg转化成base64格式的图片，则极大地减少了请求数，因为Base是文本格式。

缺点：base64格式图片比原图大，占用更多存储空间，同时，浏览器不会对该资源缓存。

使用方法：background:url(data:image/png;base64,{img_data})

应用场景：一般对于小于10KB大小的图片进行base64转码。

至于动态图有GIF与APNG：后者APNG这东西是mozilla搞出来的，

它是24位的，而且也是动图，可以容纳1680万种颜色，也是为了取代GIF，但是....也就火狐支持，IE10和chrome，safari全部不行，

如果说gif图片是卡片机的话，APNG就是单反

四、有效性验证

除了根据语义加标记之外，HTML文档还需要用有效的代码来编写，如果代码是无效的，浏览器会尝试解释标记本身，有时候会产生错误的结果。更糟的是，如果发送具有正确的MIME类型的XHTML文档，理解XML的浏览器将不显示无效的页面。因为浏览器需要知道要使用什么DTD(文档类型定义)才能正确地处理页面，所以对页面进行有效性验证要求有DOCTYPE声明。

有效性验证工具径：

①

W3C验证器(bookmarklet)，这是一小段可以存储在浏览器的书签或收藏夹中的Javascript。单击这个书签就会触发Javascript动作。

②可以访问，通过输入自己的URL来对自己的站点来进行在线验证。

③使用firefox浏览器的可以下载插件FirefoxWebDeveloperExtension

五、雅虎的Web优化最佳实践

1、内容优化

①尽量减少HTTP请求：常见方法包括合并多个CSS文件和JavaScript文件，利用CSSSprites整合图像，Image

map(图像中不同的区域设置不同的链接)，内联图象(使用data:URLscheme在实际的页面嵌入图像数据)等。

②减少DNS查找，一般dns查找需要花费20-120ms，Windows的DNS缓存，可以通过ipconfig/displaydns

这个命令来查看。

③避免重定向

④使Ajax可缓存

⑤延迟加载组件：考虑哪些内容是页面呈现时所必需首先加载的、哪些内容和结构可以稍后再加载，根据这个优先级进行设定。

⑥

预加载组件：预加载是在浏览器空闲时请求将来可能会用到的页面内容(如图像、样式表和脚本)。当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。

⑦减少DOM元素数量：页面中存在大量DOM元素，会导致JavaScript遍历DOM的效率变慢。

⑧根据域名划分页面内容：把页面内容划分成若干部分可以使你最大限度地实现平行下载。但要确保你使用的域名数量在2个到4个之间(否则与第2条冲突)。

⑨最小化iframe的数量：iframes

提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。

⑩

避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的，它只会降低用户体验而不会有一点好处。

2、服务器优化

①使用内容分发网络(CDN)：把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。

添加Expires或Cache-Control信息头：对于静态内容，可设置文件头过期时间Expires的值为“Never

expire(永不过期)”;对于动态内容，可使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。

②Gzip压缩

③设置ETag：ETags(Entity

tags，实体标签)是Web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。

④

提前刷新缓冲区：当用户请求一个页面时，服务器会花费200到500毫秒用于后台组织HTML文件。在这期间，浏览器会一直空闲等待数据返回。在PHP中，可以使用flush()方法，它允许你把已经编译的好的部分HTML响应文件先发送给浏览器，这时浏览器就会可以下载文件中的内容(脚本等)而后台同⑤时处理剩余的HTML页面。

⑥

对Ajax请求使用GET方法：当使用XMLHttpRequest时，浏览器中的POST方法会首先发送文件头，然后才发送数据。因此使用GET最为恰当。

⑦避免空的图像src

3、Cookie优化

①减小cookie大小：去除不必要的coockie，并使coockie体积尽量小以减少对用户响应的影响

②

针对Web组件使用域名无关的Cookie：对静态组件的Cookie读取是一种浪费，使用另一个无Cookie的域名来存放静态组件是一个好方法，或者也可以在Cookie中只存放带www的域名。

4、CSS优化

①将CSS代码放在HTML页面的顶部

②避免使用CSS表达式：CSS表达式在执行时候的运算量非常大，会对页面性能产生大的影响

③使用来代替@import

④避免使用Filters：IE独有属性AlphaImageLoader用于修正IE

7以下版本中PNG图片的半透明效果，但它的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。

5、JavaScript优化

①将JavaScript脚本放在页面的底部

②

将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。

③缩小JavaScript和CSS

④删除重复的脚本

⑤最小化DOM的访问：使用JavaScript访问DOM元素比较慢

⑥开发智能的事件处理程序

6、图像优化

①优化图片大小

②通过CSSSprites优化图片

③不要在HTML中使用缩放图片

④favicon.ico要小而且可缓存

7、针对移动优化

①保持组件大小在25KB以下：主要是因为iPhone不能缓存大于25K的文件(注意这里指的是解压缩后的大小)。

②将组件打包成为一个复合文档：把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中获取多个组件。

以上就是小编今天为大家分享的关于Web前端工程师要掌握的Web前端性能优化方法的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮，想要了解更多Web前端工作的小伙伴们记得关注北大青鸟Web培训官网最后祝愿小伙伴们工作顺利！