前端性能优化常见方法

前端性能优化常见方法

web 前端是应用服务器处理之前的部分，前端主要包括：HTML、CSS、javascript、image 等各种资源，针对不同的资源有不同的优化方式。

内容优化

减少 HTTP 请求数。

这条策略是最重要最有效的，因为一个完整的请求要经过 DNS 寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。

常见方法：

• 合并多个 CSS 文件和 js 文件
• 利用 CSS Sprites 整合图像
• Inline Images (使用 data：URL scheme 在实际的页面嵌入图像数据 )
• 合理设置 HTTP 缓存
• 减少 DNS 查找
• 避免重定向
• 使用 Ajax 缓存
• 延迟加载组件，预加载组件
• 减少 DOM 元素数量。页面中存在大量 DOM 元素，会导致 javascript 遍历 DOM 的效率变慢。
• 最小化 iframe 的数量。iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括 JavaScript 和 CSS 的 DOM 元素的创建慢了 1-2 个数量级。
• 避免 404。HTTP 请求时间消耗是很大的，因此使用 HTTP 请求来获得一个没有用处的响应（例如 404 没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

服务器优化

• 使用内容分发网络（CDN）。把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
• GZIP 压缩
• 设置 ETag：ETags（Entity tags，实体标签）是 web 服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
• 提前刷新缓冲区
• 对 Ajax 请求使用 GET 方法
• 避免空的图像 src
• Cookie 优化
• 减小 Cookie 大小
• 针对 Web 组件使用域名无关的 Cookie

CSS 优化

• 将 CSS 代码放在 HTML 页面的顶部
• 避免使用 CSS 表达式
• 使用 < link> 来代替 @import
• 避免使用 Filters

javascript 优化

• 将 JavaScript 脚本放在页面的底部。
• 将 JavaScript 和 CSS 作为外部文件来引用。 在实际应用中使用外部文件可以提高页面速度，因为 JavaScript 和 CSS 文件都能在浏览器中产生缓存。
• 缩小 JavaScript 和 CSS
• 删除重复的脚本
• 最小化 DOM 的访问。使用 JavaScript 访问 DOM 元素比较慢。
• 开发智能的事件处理程序
• javascript 代码注意：谨慎使用 with，避免使用 eval Function 函数，减少作用域链查找。
• 图像优化
• 优化图片大小
• 通过 CSS Sprites 优化图片
• 不要在 HTML 中使用缩放图片
• favicon.ico 要小而且可缓存

SEO优化

合理的title 、 description 、 keywords ：

• 搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description 有所不同；keywords列举出重要关键词即可
• 语义化的 HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe ：搜索引擎不会抓取iframe 中的内容
• 非装饰性图片必须加 alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

webpack优化点

• 代码压缩插件 UglifyJsPlugin
• 服务器启用gzip压缩
• 按需加载资源文件 require.ensure
• 优化devtool 中的source-map
• 剥离css文件，单独打包
• 去除不必要插件，通常就是开发环境与生产环境用同一套配置文件导致
• 开发环境不做无意义的工作如提取css 计算文件hash等
• 配置devtool
• 优化构建时的搜索路径 指明需要构建目录及不需要构建目录

其他优化点

为什么利用多个域名来存储网站资源会更有效？

• CDN缓存更方便
• 突破浏览器并发限制
• 节约cookie带宽
• 节约主域名的连接数，优化页面响应速度
• 防止不必要的安全问题

如果对你有用，希望能得到你的点赞认可~谢谢