常见前端项目性能优化方案

常见前端项目性能优化方案

一、页面内容优化

1. 减少http请求次数
2. 减少DNS查询次数
3. 避免页面跳转
4. 缓存ajax
5. 延迟加载（一般用在图片多的页面中，滚动时才加载）
6. 预加载
7. 减少DOM元素数量
8. 减少iframe数量
9. 避免404

二、css优化

1. 将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面）
2. 避免css表达式
3. 用link代替@import ; 使用css@import会造成额外的请求
4. 避免使用filters
5. css文件合并与压缩

三、js代码优化

1. 将脚本置底（将脚本内容在页面信息内容加载后再加载）
2. 使用外部javascript和css文件
3. 去除重复脚本，避免重复的资源请求
4. 减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）
5. js文件合并与压缩

四、图片优化

1. 优化图片大小
2. 尽量使用css sprite（精灵图也叫雪碧图）
3. 不要在html中缩放图片
4. 使用小且可缓存的favicon.ico
5. 在代码中进行图片的延迟加载，也叫做赖加载。
6. 避免img、iframe等标签的src属性为空：空src会重新加载当前页面，影响速度和效率。
7. 图像尽量避免使用DataURL：DataURL图像没有使用图像压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长。

五、减少Cookie传输

1. Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量减少Cookie中传输的数据量。

六、浏览器端使用缓存

1. CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。
2. 用法：通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。

七、服务器端使用压缩

1. 在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

八、减少资源大小

html压缩
html代码压缩就是压缩在文本文件中有意义，但是在html中不显示的字符，包括空格，制表符

css压缩
css压缩包括无效代码删除与css语义合并

js压缩与混乱
js压缩与混乱包括无效字符及注释的删除、代码语义的缩减和优化、降低代码的可读性、实现代码的保护

图片压缩

九、优化网络连接

1 使用CDN
CDN是内容分发网络，它能够实时地根据网络流量和各个节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上，其目的是使用户可以就近的取得所需内容，解决网络拥挤的状况，提高网站的响应速度

2 使用DNS预解析
当浏览器访问一个域名的时候，需要解析一次DNS,获得对应域名的ip地址，在解析过程中，按照浏览器缓存、系统缓存、路由器换算、DNS缓存、域名服务器的顺序，逐步读取缓存，直到拿到ip地址

3 持久连接
使用keep-alive或者persistent来建立持久连接，降低了延时和连接建立的开销

十、优化资源加载

1 资源加载位置
通过优化资源加载位置，更改资源加载时机，使尽可能快地展示出页面内容，尽可能快地使用功能可用

2 资源加载时机
3.异步script标签
defer：异步加载，在html解析完成后执行。defer的实际效果与将代码放在body底部类似
async：异步加载，加载完成后立即执行
4.模块按需加载

5.使用资源预加载preload和资源预读取prefetch
preload让浏览器提前加载指定资源，需要执行时候再执行，可以加快当前页面的加载速度
prefetch告诉浏览器加载下一个页面可能会用到的资源，可以加速下一个页面的加载速度

6.资源懒加载与资源预加载(错峰操作)
资源延迟加载也称为资源懒加载，延迟加载资源或符合某些条件的时候才加载某些资源
资源预加载是提前加载用户所需的资源，保证良好的用户体验
资源懒加载和资源预加载都是一种错峰操作，在浏览器忙碌的时候不能操作，浏览器空闲的时候再加载资源，优化了网络性能

十一**、**减少重绘回流

十二**、**用对选择器

id选择器选择元素是最快的

十三**、**不滥用WEB字体

WEB字体需要下载、解析、重绘当前页面，尽量减少使用。

十四**、**选用性能更好的api

十五、使用web worker

Web Worker是HTML5提供的一个javascript多线程解决方案，可以将一些大计算量的代码交由web Worker运行，从而避免阻塞用户界面，在执行复杂计算和数据处理时，这个API非常有用。但是，要注意其浏览器兼容性。

十六**、**减少重定向

尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验

如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。因为，如果使用302，则每一次访问http，都会被重定向到https的页面。而永久重定向，在第一次从http重定向到https之后 ，每次访问http，会直接返回https的页面

十七、开启Gzip（代码压缩）

Gzip即数据压缩，前端生产环境中将js、css、图片等文件进行压缩，通过减少数据传输量减小传输时间，节省服务器网络带宽，提高前端性能。

十八、事件代理(事件委托)

事件代理的原理是DOM元素的事件冒泡

1. 可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
2. 可以实现当新增子对象时无需再次对其绑定

十九、防抖和节流

使用函数节流（throttle）或函数去抖（debounce），限制某一个方法的频繁触发

二十、webpack优化

【打包公共代码】

使用CommonsChunkPlugin插件，将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这会带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件

webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk

通过设置 optimization.splitChunks.chunks: “all” 来启动默认的代码分割配置项

【动态导入和按需加载】

webpack提供了两种技术通过模块的内联函数调用来分离代码，优先选择的方式是，使用符合 ECMAScript 提案 的 import() 语法。第二种，则是使用 webpack 特定的 require.ensure

【剔除无用代码】

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup

JS的tree shaking主要通过uglifyjs插件来完成，CSS的tree shaking主要通过purify CSS来实现的

【长缓存优化】

1、将hash替换为chunkhash，这样当chunk不变时，缓存依然有效

2、使用Name而不是id

每个 module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说，当解析顺序发生变化，ID 也会随之改变

下面来使用两个插件解决这个问题。第一个插件是 NamedModulesPlugin，将使用模块的路径，而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性，然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin，推荐用于生产环境构建

【公用代码内联】

使用html-webpack-inline-chunk-plugin插件将mainfest.js内联到html文件中

【缩小构建目标,排除 Webpack 不需要解析的模块】

排除 Webpack 不需要解析的模块。即使用 loader 的时候，在尽量少的模块中去使用。我们可以借助 include 和 exclude 这两个参数，规定 loader 只在那些模块应用和在哪些模块不应用。