速发外链网Web前端入门者如何实现性能提升
今日，我要向大家介绍的是Web前端入门者如何实现性能提升的相关内容。影响用户访问体验的主要因素是前端页面。网站的构成大致分为两部分：前端和后端。我们可以理解为后端负责实现网站功能，例如：用户注册、用户对文章进行评论等。而前端呢？实际上应该属于功能展示。
我们建设网站的目的是什么？不就是为了吸引目标用户访问吗？因此，我们可以认为前端才是真正与用户接触的部分。
除了后端需要在性能上优化外，前端页面更需要在性能优化上投入精力，这样才能为用户提供更好的体验。不仅如此，如果前端优化得当，不仅可以为企业节省成本，还能吸引更多用户，因为优质的用户体验。
那么，我们应该如何对前端页面进行性能优化呢？
前端性能优化策略？
一、内容方面
1，降低HTTP请求：合并文件、CSS精灵、内联图片
2，减少DNS查询：DNS查询完成前，浏览器无法从该主机下载任何文件。方法：DNS缓存、合理分配资源到多个主机名，平衡并行下载和DNS查询
3，避免重定向：减少不必要的中间访问
4，使Ajax可缓存
5，非必要组件延迟加载
6，预加载未来所需组件
7，减少DOM元素数量
8，将资源放置在不同域下：浏览器从一个域下载资源的数量有限，增加域可以提高并行下载量
9，减少iframe数量
10，避免404错误
二、服务器方面
1，使用CDN
2，添加Expires或Cache-Control响应头
3，对组件使用Gzip压缩
4，配置ETag
5，提前FlushBuffer
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，将组件打包成多部分文档
以上就是本文关于Web前端入门者如何实现性能提升的分享，希望对正在从事web前端工作的小伙伴们有所帮助。如需了解更多web前端知识，请关注北大青鸟web培训官网。最后，祝愿小伙伴们工作顺利！
提升Web前端性能的技巧有哪些
今日，我要向大家介绍的是提升web前端性能的技巧有哪些。在数字化的今天，网站如雨后春笋般涌现，每天都要处理各种原因的访问。然而，其中很多网站显得笨重，使用起来也很繁琐。未经优化的网站会面临各种问题，包括加载时间、不支持移动设备、浏览器兼容性问题等。
本文将介绍一些有助于优化前端的技术，非常实用。主要内容包括清理代码、压缩图片、压缩外部资源、使用CDN等，这些方法将为你的网站带来显著的速度提升和整体性能提升。下面，让我们一起来了解一下吧！
1.清理HTML文档
HTML，即超文本标记语言，是所有网站的基石。HTML为网页带来标题、子标题、列表等文档结构的格式。在最新的HTML5中，甚至可以创建图表。
HTML很容易被网络爬虫识别，因此搜索引擎可以根据网站内容在一定程度上实时更新。在编写HTML时，应尽量简洁有效。此外，在HTML文档中引用外部资源时，也需要遵循一些最佳实践方法。
恰当放置CSS
Web设计者喜欢在建立主要的HTML骨架后再创建样式表。这样，网页中的样式表往往放在HTML的后面，接近文档结束的地方。然而，建议的做法是将CSS放在HTML的上面部分，文档头部，这样可以确保正常的渲染过程。
等待时间。如果网页大部分可见元素已经加载出来，访问者才更有可能等待加载整个页面，从而带来对前端的优化效果。这就是感知性能。
正确放置JavaScript
另一方面，如果将JavaScript放置在head标签内或HTML文档的上部，这会阻塞HTML和CSS元素的加载过程。这种错误会导致页面加载时间增长，增加用户等待时间，容易让人感到不耐烦而放弃对网站的访问。不过，您可以通过将JavaScript属性置于HTML底部来避免此问题。
此外，在使用JavaScript时，人们通常喜欢用异步脚本加载。这会阻止标签在HTML中的呈现过程，如，在文档中间的情况。
虽然对于网页设计师来说，HTML是最值得使用的工具之一，但它通常要与CSS和JavaScript一起使用，这可能会导致网页浏览速度减慢。
虽然CSS和JavaScript有利于网页优化，但使用时也要注意一些问题。使用CSS和JavaScript时，要避免嵌入代码。因为当您嵌入代码时，要将CSS放置在样式标记中，并在脚本标记中使用JavaScript，这会增加每次刷新网页时必须加载的HTML代码量。
绑定文件？不用担心
在过去，你可能会频繁绑定CSS脚本到单个文件，以在HTML代码中引用外部文件。在使用HTTP1.1协议时，这是一项合理的实践，然而这一协议不再是必需的。
在过去，你或许常常将CSS脚本绑定到单一文件，以便在HTML代码中引用外部文件。在HTTP1.1协议下，这曾是可行的做法，但如今这一协议已非必要。
得益于HTTP/2，现在你可以通过多路复用技术，以异步方式在一个TCP连接中发送和接收HTTP请求与响应。
这表明你无需再频繁地将多个脚本绑定到单一文件。
2. 优化CSS性能
CSS，即层叠样式表，能从HTML描述的内容生成专业且整洁的文件。众多网站需要通过HTTP请求来引入（除非使用内联CSS），因此你应努力去除冗余的CSS文件，同时保留其关键特性。
如果你的横幅、插件和布局样式是使用CSS保存在不同的文件中，那么，访问者的浏览器每次访问都会加载众多文件。尽管HTTP/2的出现减少了此类问题，但在外部资源加载的情况下，仍会耗费较长时间。要了解如何减少HTTP请求以大幅缩短加载时间，请参阅WordPress性能优化。
此外，不少网站管理员在网页中错误地使用@import指令而非标签，这会降低网站的前端性能。值得一提的是，通过标签请求加载的外部样式表不会妨碍并行下载。
3. 减少外部HTTP请求
在许多情况下，网站的加载时间主要来自于外部HTTP请求。外部资源的加载速度会因主机提供商的服务器架构、位置等因素而异。减少外部请求的第一步是简要检查网站。研究你网站的每个部分，消除任何影响访问者体验的负面因素。这些因素可能包括：
● 无用的图片
● 过多的JavaScript代码
● 冗余的CSS
● 不必要的媒体文件
在你移除这些多余的成分后，再对剩余内容进行整理，如，使用压缩工具、CDN服务和预获取（prefetching）等，这些都是管理HTTP请求的最佳选择。除此之外，减少DNS路由查找教程会教你如何逐步减少外部HTTP请求。
4. 压缩CSS、JS和HTML
压缩技术可以从文件中去除多余的字符。你在编辑器中编写代码时，会使用缩进和注释，这些方法无疑会让你的代码简洁易读，但它们也会在文档中添加多余的字节。
例如，这是一段压缩前的代码。
将其压缩后，代码如下所示。
使用压缩工具可以轻松地从你的CSS、JS和HTML文件中移除无用的字节。关于压缩的相关信息，请参阅如何压缩CSS、JS和HTML。
5. 使用预先获取
预先获取可以在真正需要之前获取必需的资源和相关数据，从而改善访问者的浏览体验，主要有3类预先获取：
● 预加载
● DNS预获取
● 预渲染
在你离开当前web页面之前，使用预先获取方式，对应每个链接的URL地址、CSS、图片和脚本都会被预先获取。这保证了访问者能在最短时间内使用链接在画面间切换。
幸运的是，预先获取很容易实现。根据你想要使用的预先获取形式，你只需在网站HTML中的链接属性上增加rel="prefetch"、rel="dns-prefetch"或rel="prerender"标记。
6. 使用CDN和缓存提高速度
内容分发网络能显著提高网站的速度和性能。使用CDN可以将您的网站访问者从最近的服务器加载数据。如果您使用CDN，您网站内的文件将自动压缩，以便在全球范围内快速分发。
CDN是一种缓存方法，可极大改善资源的分发时间，同时，它还能实现一些其他的缓存技术，如，利用浏览器缓存。
合理地设置浏览器缓存，能让浏览器自动存储某些文件，以便加快传输速度。此方法的配置可以直接在源服务器的配置文件中完成。
了解更多有关缓存和不同类型的缓存方法，请参阅缓存定义。
7. 压缩文件
尽管许多CDN服务可以压缩文件，但如果不使用CDN，您也可以考虑在源服务器上使用文件压缩方法来改进前端优化。
文件压缩能使网站的内容轻量化，更易于管理。最常用的文件压缩方法之一是Gzip。这是缩小文档、音频文件、PNG图像等大文件的绝佳方法。
Brotli算法且桓霰冉闲碌奈募顾跛惴ǎ壳罢涞迷嚼丛绞芑队4丝旁创胨惴ㄓ衫醋_oogle和其他组织的软件工程师定期更新，现已被证明比其他现有压缩方法更好用。这种算法的支持目前还比较少，但作为后起之秀指日可待。
了解更多信息，请阅读我们有关Brotli的介绍。
对于那些不懂得前端优化的人来说，图片可能会是一个“网站杀手”。大量的写真集和庞大的高清图片会阻塞网页渲染速度。没有优化的高清图片可能会有几兆字节（MB）。因此适当地对它们进行优化可以改善网页的前端性能。
每个图像文件都包含了一些与纯照片或图片无关的信息。比如JPEG图片，它包含了日期、地点、相机型号和一些其他不相关的信息。你可以用一些如JPEGmini挠呕ぞ呃瓷境庑┒嘤嗟耐枷袷堇淳蛲枷竦娜叱さ募釉毓獭R蛭_Optimus_且桓鑫匏鸬耐计顾豕ぞ撸换嵊跋焱枷窕剩皇茄顾跬计寤
另外，如果你想进一步优化一张图片，你可以使用有损压缩，它会删除一些图片里面的数据，因此质量会受损。
了解有损和无损压缩之间的区别，请阅读我们完整的教程。
8. 使用轻量级框架
除非你只用现有的编码知识构建网站，否则，你可以尝试使用一个好的前端框架来避免许多不必要的前端优化错误。虽然有一些更大、更知名的框架能提供更多功能和选项，但它们不一定适合你的Web项目。
因此，不仅确定项目所需功能很重要，选择合适的框架也很重要——它要在提供所需功能的同时保持轻量。最近许多框架都使用简洁的HTML、CSS和JavaScript代码。
因此，明确项目所需功能至关重要，挑选恰当的架构同样关键——它需在确保所需功能的同时保持轻盈。近期众多架构均采用简洁的HTML、CSS及JavaScript代码。
以下是数款可提升读取速度的轻量级架构：
●_ure
●_keleton
●_illigram
架构并不能取代网页设计、编程及维护。以一个简单的例子来说，我们假设架构是一座新居。居所干净利落，但它是空旷的。在你添置家具、家电和装饰品时，你有义务确保居所不会变得杂乱。同样地，当您采纳了一个架构，您就有义务确保它不会被冗余的代码、大图片和过多的HTTP请求所破坏。
前端优化_概括
进行前端优化似乎需要投入大量精力，相信这篇应用指南中的一些小窍门能帮你极大提升网站加载速度。网站加载越快，用户体验越佳。因此，对前端进行优化能给你和你的用户都带来好处。
以上就是小编今天为大家分享的关于提升web前端性能的技巧有哪些的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端知识，请关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利，成为一名出色的web前端工程师！
OSC协作翻译
英文原文：FrontEndOptimization_9TipstoImproveWebPerformance
链接：#/blog/front-end-optimization/
译者：间_拾零、叱、nake_007、hysihan、iyi
