一、感知性能优化
对于用户来说，用户的感知性能才是最重要的，简单讲，就是让用户感觉你的网站访问很快，并且感知性能没有衡量标准。如果一个页面的加载时间很长，我们也可以通过一些方式让用户觉得没有那么慢。
1.骨架屏
原理：
使用一张占位骨架图（svg / lottie / gif）来代替 loading 效果，当数据加载完成后对替换掉骨架图。
二、HTML优化
1.压缩 HTML
HTML代码压缩，将注释、空格和新行从生产文件中删除。删除所有不必要的空格、注释和中断行将减少HTML的大小，加快网站的页面加载时间，并显著减少用户的下载时间。
2.删除不必要的注释
注释对用户来说是没有用的，应该从生产环境文件中删除。可能需要保留注释的一种情况是：保留远端代码库（keep the origin for a library）。
我们可以使用HTML minify插件删除注释。
remove-html-comments - npm
3.删除不必要的属性
像 type="text/javascript" or type="text/css" 这样的属性应该被移除。
类型属性不是必需的，因为HTML5把text/css和text/javascript作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。
4.使用语义化标签
使用语义化标签可以提高代码的可读性和可维护性，并有助于搜索引擎优化。例如，使用 标签来定义页面头部，使用 标签来定义导航等。
语义化优势：
易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
5.减少iframe数量
尽量少用iframe标签，爬虫是不会读取iframe的内容的。
6..削减DOM数量和层级数量
HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并制作到浏览器中所花的时间就越长，所以应尽或许坚持 DOM 元素简洁和扁平化的层级。
7.减少 HTTP 请求次数
将多个 CSS 和 JavaScript 文件合并为一个文件，可以减少 HTTP 请求次数，从而提高页面加载速度。同时，使用浏览器缓存可以避免每次请求相同的文件。
8.减少重排重绘
重排：
当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
哪些操作可以影响重排：
添加/删除元素
display:none
移动元素位置
操作styles
offsetLeft, scrollTop, clientWidth
修改浏览器大小，字体大小
重绘：
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。
划重点：
重排必定会引发重绘，但重绘不一定会引发重排。
三、JavaScript优化
1.javascript脚本放到页面底部
脚本的下载和执行，会阻塞其他资源（样式文件或图片）的下载。因此，将<script>标签尽量尽可能放到<body>标签的底部。
2.将javascript和css从外部引入
将样式和脚本代码放到外部文件中，并使用链接或脚本标签来引用，可以提高页面加载速度。减少 DOM 操作：DOM 操作往往是页面加载速度缓慢的主要原因之一。尽量减少 DOM 操作的次数和复杂度，可以提高页面的响应速度和性能。
3.删除重复的脚本
一个页面中如果有两次使用到同一个JavaScript文件，那这将对页面性能产生很大的影响。主要有以下两点：
增加了不必要的HTTP请求。
JavaScript执行所花费的时间。
4.减少DOM访问
访问DOM元素是有代价的，修改DOM元素则更为昂贵，因为它会导致浏览器重新计算页面的几何变化。如下代码：
// 频繁操作dom案列
访问DOM的次数越多，代码运行速度越慢。因此，在有其他方案可以代替的时候，我们要尽量减少访问DOM的次数。
5.节流与防抖
日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）。
防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象。
6.合理的ajax恳求
关于回来内容相同的恳求，没必要每次都直接从服务端拉取，合理运用 AJAX 缓存能加快 AJAX 呼应速度并减轻服务器压力。
7.长列表虚拟滚动优化
虚拟列表是一种用来优化长列表的技术。它可以保证在列表元素不断增加，或者列表元素很多的情况下，依然拥有很好的滚动、浏览性能。它的核心思想在于：只渲染可见区域附近的列表元素。下图左边就是虚拟列表的效果，可以看到只有视口内和临近视口的上下区域内的元素会被渲染。
8 .代码结构的优化
1．设置Viewport：HTML的viewport可加快页面的渲染。
2．减少DOM结点：DOM结点太多会影响页面的渲染。
3．尽量使用css3动画：合理使用requestAnimationFrame动画代替setTimeout。
4．优化高频事件：scroll、touchmove等事件尽量使用函数防抖节流等进行限制。
5. 不滥用WEB字体：WEB字体需要下载、解析、重绘当前页面，尽量减少使用。
6. 文件命名规则须统一且要有意义，同类型文件归类到相同的文件夹中。
7.删除无效注释。
四、CSS优化
1.尽量少用@import
主要有两个原因：
1.使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。
2.多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。
2.避免！important，可以选择其他选择器
因为这破坏了样式表中固有的级联规则，使调试bug变得更加困难。它很容易使用不当，而且容易成倍增加，尤其是在滥用时。您可以轻松地!important得出一个带有要覆盖的规则的元素，这时您通常不得不重构样式，或使用另一个!important规则来加剧问题。
如果你一定要使用，最好定义基本样式尽可能靠近html或body元素，并且要覆盖时，请尽量避免使用特殊性。这样，您就有足够的空间进行更改。
3.不要在ID选择器前面进行嵌套其它选择器
主要有两个原因：
1.ID选择器本来就是唯一的而且人家权值那么大，前面嵌套，完全是浪费性能。
// 浪费性能。
.content #dom {}
2.除了嵌套，在ID选择器前面也不需要加标签或者其它选择器。比如 div#dom 或者.box#dom。这两种方式完全是多余的，理由就是ID在页面就是唯一的。前面加任何东西都是多余的！
// 多余写法
div#dom {}
4.CSS文件压缩
这应该是最容易想到的一个方法了，通过压缩CSS文件大小来提高页面加载速度。现在的构建工具，如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。
5.CSS层级嵌套最好不要超过3层
一般情况下，元素的嵌套层级不能超过3级，过度的嵌套会导致代码变得臃肿，沉余，复杂。导致css文件体积变大，造成性能浪费，影响渲染的速度！而且过于依赖HTML文档结构。这样的css样式，维护起来，极度麻烦，如果以后要修改样式，可能要使用!important覆盖。尽量保持简单，不要使用嵌套过多过于复杂的选择器。
6.删除无用的css
我们应该尽可能地提取公共类，减少重复。对于后者，在不同开发者进行代码维护的过程中，总会产生不再使用的CSS的代码，当然一个人编写时也有可能出现这一问题。
7.慎用*通配符
有时候可能会写下面这种代码来消除一些标签的默认样式或统一浏览器对标签渲染的差异化
*{
margin：0；
padding：0;
}
开发时尽量避免使用通配符选择器。
8.删除不必要的单位和零
CSS 支持多种单位和数字格式，可以删除尾随和跟随的零，零始终是零，添加维度不会为包含的信息附带任何价值。
9.异步加载非首屏css
CSS会阻塞DOM的渲染，所以我们将首屏关键CSS内联后，剩余的非首屏CSS内容可以使用外部CSS，并且异步加载，防止非首屏CSS内容阻塞页面的渲染。
10.将样式表放到页面顶部
我们希望浏览器尽早渲染获取到的任何内容。这对大页面和网速慢的用户很重要。给用户视觉反馈，比如进度条的重要性已经被大量研究和记录。在我们的情况中，HTML 页面就是进度条。当浏览器逐步加载页面头部，导航条，logo 等等，这些都是给等待页面的用户的视觉反馈。这优化了整体用户体验。
11.不使用IE的Filter
在图片加载过程中，这个滤镜会阻塞渲染，卡住浏览器，还会增加内存消耗而且是被应用到每个元素的，而不是每个图片，所以会存在一大堆问题。
五、图片优化
1.根据实际需要选择色深，压缩。
减小图片的大小可以减少页面加载时间。可以使用图片压缩工具来压缩图片，以减小文件大小。
2.小图片引入雪碧图。
雪碧图（CSS Sprite）又叫CSS精灵图主要用于把一堆小图标整合在一张背景透明的大图上，通过设置对应的位置来显示不同的图片，目的是大幅减轻服务器对图片的请求数量，是前端性能优化的一种方式。
优势：
1、减少网页的HTTP请求，提高页面性能
2、减少图片命名的困扰
劣势：
1、需要计算每个图片的位置
2、后期维护困难
3.图片懒加载
一般来说，我们访问网站页面时，其实很多图片并不在首屏中，如果我们都加载的话，相当于是加载了用户不一定会看到图片， 这显然是一种浪费。解决的核心思路就是懒加载：实现方式就是先不给图片设置路径，当图片出现在浏览器可视区域时才设置真正的图片路径。
4..缩小 favicon.ico 并缓存
有利于 favicon.ico 的重复加载，由于一般一个 Web 运用的 favicon.ico 是很少改动的。
5.img图片的alt属性要写, 合理使用target="_blank"
<img src="图片地址" alt="图片keyword"/> alt属性一定要写
合理而不频繁使用target="_blank" 是可以在一定程度上位站点带来回旋流量和点击的。同一时候。在细节上使用 target="_blank" ，可以增强站点总体用户体验 。
6.采用svg图片或者字体图标
因为字体图标或者SVG是矢量图，代码编写出来的，放大不会失真，而且渲染速度快。字体图标使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便，还有一个优点是生成的文件特别小。
7.Base64
将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33%。
六、webpack构建优化
1. 线程加载器
多线程可以提高程序的效率，我们也可以在 Webpack 中使用。而thread-loader是一个可以在Webpack中启用多线程的加载器。
不一定使用该Loader就一定能提升效率，因为进程之间的通信也会消耗时间，一般在处理文件比较耗时的Loader后面使用该Loader。
2. 缓存加载器
在我们的项目开发过程中，Webpack 需要多次构建项目。为了加快后续构建，我们可以使用缓存，与缓存相关的加载器是缓存加载器。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
