为什么很重要？

1. 慢速网站让人感觉非常不舒服，等待缓慢网站加载的压力和看恐怖电影的压力是相差不大的
2. 速度影响销量，三个例子

• —2016 年，全球速卖通将其网站速度提高了三分之一，订单量增加了 10.5%
• —早在 2006 年，Google 将搜索速度降低半秒，结果发现用户发出的请求减少了 25%
• — 2008 年，Aberdeen小组发现，将网站速度降低一秒会使用户满意度降低 16%

https://www.pwastats.com/ https://wpostats.com/ 参考资料

如何优化速度？

文件体积

Javascript

1. 优化javascript大小，减少页面中的冗余代码，提高代码的重复利用率
2. 压缩javascript体积 webpack：生产模式 babel：babel-preset-minify gulp：gulp-uglify
3. 延迟加载javascript
4. 按需加载javascript
5. 在项目中如果使用框架或者类库，需求允许的情况下，尽量使用轻量级的

Css

1. 压缩css体积，减少页面中的冗余代码，提高代码的重复利用率
2. css分为关键与非关键css，将关键css内联到html中，非关键的css用rel=”preload”来预加载
3. 在项目中如果使用框架或者类库，需求允许的情况下，尽量使用轻量级的

有关http传输

缩小传输数据

1. 使用gzip(除开图片，字体，视频)，有兼容性比较差的Brotli
2. 使用CDN
3. 把CSS合并成为一个，把JS也合并成为一个，减少CSS以及JS等文件的请求次数（真实项目中，我们使用gulp、webpack这些自动化工具，可以完成合并压缩）
4. 使用预加载

• — 指示浏览器提前对服务器的 IP 地址发出 DNS 请求。这对于 CDN、Google 字体和所有其他情况非常有用，因为您知道在短时间内需要资源，知道它托管在哪个域，但不知道其确切路径。在这种情况下，提前解析服务器的IP地址将为您节省50到300毫秒。<link rel="dns-prefetch">
• — 指示浏览器提前执行与服务器的连接。在相同情况下，当有用时，它很有用，但可以设置完整连接并节省更多时间。这里的缺点是打开新连接非常耗费资源，因此您不希望过度使用此优化。<link rel="preconnect">dns-prefetch
• — 以低优先级在后台预加载和缓存资源。这很有用，例如，为应用程序的下一页预加载JS捆绑包。<link rel="prefetch">
• — 在后台以高优先级预加载资源。这对于在几秒钟内预加载所需的资源非常有用 - 例如，非关键CSS文件。<link rel="preload">
• — 在后台预加载指定的页面，并将其呈现在不可见的选项卡中。稍后，当访问者单击指向预呈现页面的链接时，该页面会立即显示。这是Google用来预加载其第一个搜索结果的内容。<link rel="prerender">

注意：不要过度使用预取方法。在后台下载内容仍然会消耗访问者的流量 - 这在移动设备上真的很糟糕。因此，添加10个额外的预加载可能会使您的应用程序更快一些，但是您的访问者将为此支付真钱。每页2-4次预加载可能没问题。

图像优化

图像简介

1. Svg适用于矢量图
2. Gif是动态图片，如果要使用，请使用视频
3. Jpg适用于有轻微质量损失的图片
4. Png适用于有透明背景的图片
5. Webp适合照片但是兼容性不好，可以使用picture来提高兼容性 

<picture>
<source srcset= " img.webp" type="image/webp">
<img src="img .jpg"type="image/ jpeg">
</picture>

如何优化

• Svg图片如何优化： 删除注释和空格来缩小他们 优化工具
• Jpg：压缩图片，不要直接加载大图片，如果需要1倍图 2倍图 请直接提供，不要将大图在代码里写成小尺寸，因为这样浏览器还是加载大图，并且要好费时间更为小图片
• Png:雪碧图,就是把图片压缩合并在一张大图上，背景图片统一导入大图，使用background-position定位到具体的小图
• 对于图片等资源的交互传输，我们尽量把图片等富媒体资源转换为二进制编码，使用二进制文件流的形式传输，不仅加快了文件传输的速度，也节省了传输的大小

字体优化

如果要加载自定义字体

• font-display：auto 下载完成前不显示
•  Fallback 下载完成后闪烁
• Optional 下载完成后除非刷新页面，否则就不显示

数据请求优化

• 为了加快页面首次打开速度，我们把图片和数据都做一下延迟加载，数据的延迟加载(异步加载)：滚动到底部加载更多数据、分页效果
• 音视频等资源文件，开始的时候设置 preload='none'，也就是开始加载页面的时候不加载资源文件，只有当播放的时候再加载
• 减少每一次AJAX请求数据量的大小，对于大数据处理，我们尽量分多次请求

代码优化

• 一定要养成手动释放堆栈内存的习惯，经常去清空一些没有用的内存（例如：手动清除没用的定时器、把一些无用的对象赋值为null...）
• 避免内存互相引用嵌套导致的内存泄漏问题（高程三后面有关于内存泄漏的讲解）
• 前后端的数据交互，数据格式最好是JSON格式的：结构清晰明了，处理起来方便，传输性能也比较的不错...
• 为了保证安全，一些重要的数据信息在进行交互的时候要进行加密，而且传输方式尽量使用POST方式，GET请求不安全
• 不要使用with，少使用eval，少使用document.write以及alert等（页面中的提示框，我们可以自己编写一个组件来完成）
• 注意DOM的回流重载问题，
• 少使用同步编程，多用异步编程，注意页面中不要出现死循环
• 减少浏览器的异常信息抛出，最好使用TRY CATCH把它捕获了
• 少使用全局变量，依托单例、发布订阅、promise等设计模式，来规划我们的代码结构，保证代码的严谨和有利于维护
• 事件绑定尽量使用事件委托来处理
• 减少作用域链的查找（作用域之间不要嵌套太深）
• 优化代码逻辑，用最简单的方式来实现一个功能需求，一些没必要的判断或者没必要执行的代码都让其不执行即可

SEO优化推广

• 设置合理的 title、keywords、description等信息
• 标签语义化
• 增加页面中关键词的曝光率，把一些重要的关键词多放在权重较高的标签中（例如：H1中有图片和文字，文字是给爬虫看的，图片是给用户看的...）
• img设置alt属性，属性值是对图片描述的关键词，让爬虫收录图片信息
• 页面中千万不要出现死链接和空链接
• 避免页面301和302重定向，重定向不太利于网站权重和排名的上升
• 动态页面静态化（伪URL重写）
• 页面中尽量不要使用iframe，不仅不利于SEO优化，而且性能也会受到影响

更多SEO前端优化详细可查看https://www.lihuanting.com/blog/a/60

资料引用https://3perf.com/talks/web-perf-101/ https://www.jianshu.com/p/6d66aba6565c