如何做web性能优化？

[lhlGitHub]

No description provided.

[Moannas]

一、页面优化
1、减少HTTP请求数量

1、从设计实现层面简化页面：尽量将页面设置成百度首页那样，保持页面简洁、减少资源的使用。
2、合理设置HTTP缓存：合理设置缓存可以大大地减少HTTP请求，怎么叫合理呢？原则很简单，能缓存越多越好，能缓存越久越好。
3、资源合并和压缩：尽可能将外部脚本、样式进行合并，多个合为一个；Css、Javascript、image也可以使用工具进行压缩，压缩后能节省空间。
4、合并CSS图片。
5、inline image:使用data: url("…") scheme的方式将图片嵌入到页面或CSS中。
6、懒加载图片（异步加载）。

2、将外部脚本置底（将脚本内容在页面信息内容加载后再加载）

浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多，在 这里有比较详细的介绍 (这里是译文和 更详细的例子 )，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响

3、异步执行inline脚本（保证脚本在页面内容后面加载）

inline脚本对性能的影响与外部脚本相比，是有过之而无不及。首页，与外部脚本一样， inline脚本在执行的时候一样会阻塞并发请求，除此之外，由于浏览器在页面处理方面是单线程的，当 inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。简而言之， inline脚本在执行的时候，页面处于空白状态。鉴于以上两点原因，建议将执行时间较长的 inline脚本异步执行，异步的方式有很多种，例如使用 script元素的defer 属性(存在兼容性问题和其他一些问题，例如不能使用 document.write)、使用setTimeout ，此外，在HTML5中引入了 Web Workers的机制，恰恰可以解决此类问题。

4、Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）

随着 Javascript框架的流行，越来越多的站点也使用起了框架。不过，一个框架往往包括了很多的功能实现，这些功能并不是每一个页面都需要的，如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种，一种是为那些流量特别大的页面专门定制一个专用的 mini版框架，另一种则是 Lazy Load。YUI 则使用了第二种方式，在 YUI的实现中，最初只加载核心模块，其他模块可以等到需要使用的时候才加载。

5、将CSS放在head中

如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

6、异步请求callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

在某些页面中可能存在这样一种需求，需要使用 script标签来异步的请求数据。类似：
Javascript:
function myCallback(info){undefined
//do something here
}
HTML:
cb返回的内容 :
myCallback(‘Hello world!’);
像以上这种方式直接在页面上写 《script》对页面的性能也是有影响的，即增加了页面首次加载的负担，推迟了 DOMLoaded和window.onload 事件的触发时机。如果时效性允许的话，可以考虑在 DOMLoaded事件触发的时候加载，或者使用 setTimeout方式来灵活的控制加载的时机。

7、减少不必要的HTTP跳转

对于以目录形式访问的 HTTP链接，很多人都会忽略链接最后是否带 ’/’，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了 301跳转，增加了多余请求。具体参见下图，其中第一个链接是以无 ’/'结尾的方式访问的，于是服务器有了一次跳转。

8、避免重复的资源请求

这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求

9、精简javascript和css

精简就是将Javascript或CSS中的空格和注释全去掉，

二、代码优化
1、javascript

1、DOM
DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除 DOM元素或者对 DOM集合进行操作。如果脚本中包含了大量的 DOM操作则需要注意以下几点：
　　（1）、 HTML Collection（HTML收集器，返回的是一个数组内容信息）
　　在脚本中 document.images、document.forms 、getElementsByTagName()返回的都是 HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有 length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的 “访问集合” 包括读取集合的 length属性、访问集合中的元素。
　　因此，当你需要遍历 HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将 length属性、成员保存到局部变量后再使用局部变量。
　　（2）、 Reflow & Repaint
　　除了上面一点之外， DOM操作还需要考虑浏览器的 Reflow和Repaint ，因为这些都是需要消耗资源的，

2、慎用with

3、避免使用eval和Function

4、减少作用域链查找（这方面设计到一些内容的相关问题）

5、数据访问

6、字符串拼接

2、CSS选择符

3、HTML

4、Image压缩

三、CDN
四、Gzip
五、多域名
六、无Cookie服务器

[loringray]

一、优化网络

1. 缓存资源，使用浏览器缓存相关等。
2. 无阻塞加载——样式在尾部使用加载，js 脚本在胃部使用异步加载
3. 减少 HTTP 请求
4. 减少携带 Cookie
5. 异步加载第三方资源

二、压缩文件

1. 压缩代码
2. 使用 Base64 代替小质量图像
3. 合并图标成精灵图
4. 使用 CDN 加载静态资源等

三、首屏体验
（1）、预解析——预先解析 DNS 获取域名获取队友 IP —— pre-parse
（2）、预加载——延后加载无需立即用到的资源，确保使用时已加载——pre-load
（3）、懒加载——延后加载无需立即渲染的资源，进入区域时才加载——lazy-load

四、渲染优化

1. 减少 DOM 节点
2. 优化动画-如优先使用 css 动画； 合理开启 GPU 加速；合理使用 requestAnimationFrame 代替 setTimeout
3. 优化高频事件-使用防抖、节流；类似输入 input 等使用 single-promise，取消之前无用请求；
4. 渲染页面使用分页、按需加载、虚拟列表或虚拟表格等。
5. 大文件分片上传等。
6. 移动端渲染页面等，如：SSR 渲染、NSR 渲染等。

五、构建方面优化
webpack、rollup、vite 等打包工具，主要 webpack

1. 减少打包时间
   （1）、配置 include/exclude 缩小 loader 对文件的搜索范围
   （2）、缓存资源——配置 cache 缓存 loader 对文件的编译副本
   （3）、配置 Thread 将 loader 单进程转换为多进程
2. 减少打包体积
   类似 tree-shaking 分割代码、按需加载、压缩资源等。

六、代码方面

1. css 一些代码策略
   （1）、避免出现超过三层的嵌套规则
   （2）、避免为ID选择器添加多余选择器
   （3）、避免重复匹配重复定义，关注可继承属性

2. DOM 策略
   （1）、缓存 DOM 计算属性和避免过多 DOM 操作
   （2）、使用 DOMFragment 缓存批量化 DOM 操作
   等等...