前端性能优化总结

最新推荐文章于 2024-01-22 11:48:44 发布

liy1wen

最新推荐文章于 2024-01-22 11:48:44 发布

阅读量180

点赞数

分类专栏：前端文章标签： html5 css html 前端性能优化

本文链接：https://blog.csdn.net/qq_39376013/article/details/120538140

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前端性能优化总结

网站性能的好坏直接决定了用户体验的好坏，而互联网的本质还是为人服务，因此更好的用户体验是每个公司都在追求的目标。

1.图片优化

对于图片懒加载，可以为页面添加一个滚动条事件，判断图片是否在可视区域内或者即将进入可视区域，优先加载。
如果图片为CSS图片，可以使用 CSS Sprite、SVG sprite、 Icon font、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别小的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则应在服务器端根据业务需要先行进行图片压缩，图片压缩后，图片大小与展示的就一致了。

这里展开说一下图片懒加载：

定义

当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。

作用

减少或延迟请求数，缓解浏览器的压力，增强用户体验。

实现思路

1.设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址

2.页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中

3.当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址

代码部分

<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
  }
  .container:after{
    content: '';
    display: block;
    clear: both;
  }
  .container img {
    float: left;
    width: 50%;
  }
  h1{
    clear: both;
  } 
</style>
<body>
  <div class="container">
    <img src="https://cdn.jsdelivr.net/gh/liy1wen/image-resource@master/20210914/4380839.2eh5hmxccw4k.png" alt="1" data-src="https://cdn.jsdelivr.net/gh/liy1wen/image-resource@master/20210914/image1.1lwef50k8uhs.jpg">
    <img src="https://cdn.jsdelivr.net/gh/liy1wen/image-resource@master/20210914/4380839.2eh5hmxccw4k.png" alt="20" data-src="https://cdn.jsdelivr.net/gh/liy1wen/image-resource@master/20210914/person2.1nwrs0egyd4w.jpg">
  </div>
</body>
<script>
  start() // 一开始没有滚动，也需要触发一次 
  $(window).on('scroll', function(){// 滚动时，显示对应图片
    start()
  })
  function start(){
    $('.container img').not('[data-isLoaded]').each(function(){
      var $node = $(this)
      if( isShow($node) ){
        loadImg($node)
      }
    })
  }
  function isShow($node){ // 判断图片是否在视野中
    return $node.offset().top <= $(window).height() + $(window).scrollTop()
  }
  function loadImg($img){ 
    $img.attr('src', $img.attr('data-src'))
    $img.attr('data-isLoaded', 1) // 区别图片是否被加载过，防止重新加载
  }
</script>

2.CSS如何优化性能

1.正确使用 display属性， display属性会影响页面的渲染，因此要注意以下几方面。

display:inline后不应该再使用 width、 height、 margin、 padding和float 。

display:inline- block后不应该再使用 float。

display:block后不应该再使用 vertical-align。

display:table-*后不应该再使用 margin或者float。

2.不滥用 float。

3.不声明过多的font-size。

4.当值为0时不需要单位。

5.标准化各种浏览器前缀，并注意以下几方面。

浏览器无前缀应放在最后。

CSS动画只用（ -webkit-无前缀）两种即可。

其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）

6.避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行时间也长。

7.尽量使用id、 class选择器设置样式（避免使用 style属性设置行内样式）

8.尽量使用CSS3动画。

9.减少重绘和回流。

3.HTML如何优化性能

1.对于资源加载，按需加载和异步加载

2.首次加载的资源不超过1024KB，即越小越好。

3.压缩HTML、CSS、 JavaScript文件。

工程化项目中直接使用对应的插件即可，webpack的主要有下面三个：

UglifyJS
webpack-parallel-uglify-plugin
terser-webpack-plugin

压缩原理简单的讲就是去除一些空格、换行、注释，借助es6模块化的功能，做了一些tree-shaking的优化。同时做了一些代码混淆，一方面是为了更小的体积，另一方面也是为了源码的安全性。

css压缩主要是mini-css-extract-plugin，当然前面的js压缩插件也会给你做好css压缩。

npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins:[
 new MiniCssExtractPlugin({
       filename: "[name].css",
       chunkFilename: "[id].css"
   })
]

html压缩可以用HtmlWebpackPlugin，单页项目就一个index.html,性能提升微乎其微~

4.减少DOM节点。

5.避免空src（空src在部分浏览器中会导致无效请求）。

6.避免30*、40*、50*请求错误

7.添加 Favicon.ico，如果没有设置图标ico，则默认的图标会导致发送一个404或者500请求。

4.JavaScript如何优化性能

1.缓存DOM的选择和计算。

2.尽量使用事件委托模式，避免批量绑定事件。

3.使用 touchstart、 touchend代替 click。

4.合理使用 requestAnimationFrame动画代替 setTimeOut。

5.适当使用 canvas动画。

6.尽量避免在高频事件（如 TouchMove、 Scroll事件）中修改视图，这会导致多次渲染。

5.如何优化服务器端

1.启用Gzip压缩。

2.延长资源缓存时间，合理设置资源的过期时间，对于一些长期不更新的静态资源过期时间设置得长一些。

3.减少 cookie头信息的大小，头信息越大，资源传输速度越慢。

4.图片或者CSS、 JavaScript文件均可使用CDN来加速。

CDN 的全称是 Content Delivery Network，即内容分发网络，基本原理是避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容能够传输的更快，更加稳定。

原理：

通过在各个地方部署相应的服务器，形成 CDN 集群，从而提高访问速度。

客户端在获得 IP 地址之后，访问最近的边缘节点。边缘节点是最小的，规模也是最小的，不会缓存所有东西。如果没有找到对应资源就会去它的上一层区域节点去寻找，如果依然没有则去中心节点寻找，如果中心节点也没有，最后再去原网站去访问。这一层一层向上找的过程我们称为回源。

6.如何优化服务器端的接口

1.接口合并：如果一个页面需要请求两部分以上的数据接口，则建议合并成一个以减少HTTP请求数。

2.减少数据量：去掉接口返回的数据中不需要的数据。

3.缓存数据：首次加载请求后，缓存数据；对于非首次请求，优先使用上次请求的数据，这样可以提升非首次请求的响应速度。

7.如何优化脚本的执行

脚本处理不当会阻塞页面加载、渲染，因此在使用时需注意。

1.把CSS写在页面头部，把 JavaScript程序写在页面尾部或异步操作中。

2.避免图片和 iFrame等的空src，空src会重新加载当前页面，影响速度和效率。

3.尽量避免重设图片大小。重设图片大小是指在页面、CSS、 JavaScript文件等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能

4.图片尽量避免使用 DataURL。DataURL图片没有使用图片的压缩算法，文件会变大，并且要在解码后再渲染，加载慢，耗时长。

8.如何优化渲染

1.通过HTML设置 Viewport元标签， Viewport可以加速页面的渲染，如以下代码所示。

<meta name="viewport" content="width=device=width,initial-scale=1">

2.减少DOM节点数量，DOM节点太多会影响页面的渲染，应尽量减少DOM节点数量。

3.尽量使用CSS3动画，合理使用 requestAnimationFrame动画代替 setTimeout，适当使用 canvas动画（5个元素以内使用CSS动画，5个元素以上使用 canvas动画（iOS 8中可使用 webGL））。

4.对于高频事件优化 Touchmove, Scroll事件可导致多次渲染。使用 requestAnimationFrame监听帧变化，以便在正确的时间进行渲染，增加响应变化的时间间隔，减少重绘次数。使用节流模式（基于操作节流，或者基于时间节流），减少触发次数。

5.提升GPU的速度，用CSS中的属性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）来触发GPU渲染.

9.关于页面的SEO优化技巧

1.页面中杜绝出现死链接（404页面），而且对于用户输入一个错误页面，我们要引导到404提示页面中（服务器处理的）。

避免浏览器中异常错误抛出
尽量避免代码出错

2.使用try catch做异常信息捕获

3.增加页面关键词优化

10.使用服务端渲染

客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

优点：首屏渲染快，SEO 好。
缺点：配置麻烦，增加了服务器的计算压力。

下面我用 Vue SSR 做示例，简单的描述一下 SSR 过程。

客户端渲染过程

1.访问客户端渲染的网站。

2.服务器返回一个包含了引入资源语句和

的 HTML 文件。

3.客户端通过 HTTP 向服务器请求资源，当必要的资源都加载完毕后，执行 new Vue() 开始实例化并渲染页面。

服务端渲染过程

1.访问服务端渲染的网站。

2.服务器会查看当前路由组件需要哪些资源文件，然后将这些文件的内容填充到 HTML 文件。如果有 ajax 请求，就会执行它进行数据预取并填充到 HTML 文件里，最后返回这个 HTML 页面。

3.当客户端接收到这个 HTML 页面时，可以马上就开始渲染页面。与此同时，页面也会加载资源，当必要的资源都加载完毕后，开始执行 new Vue() 开始实例化并接管页面。

从上述两个过程中可以看出，区别就在于第二步。客户端渲染的网站会直接返回 HTML 文件，而服务端渲染的网站则会渲染完页面再返回这个 HTML 文件。

这样做的好处是什么？是更快的内容到达时间 (time-to-content)。

假设你的网站需要加载完 abcd 四个文件才能渲染完毕。并且每个文件大小为 1 M。

这样一算：客户端渲染的网站需要加载 4 个文件和 HTML 文件才能完成首页渲染，总计大小为 4M（忽略 HTML 文件大小）。而服务端渲染的网站只需要加载一个渲染完毕的 HTML 文件就能完成首页渲染，总计大小为已经渲染完毕的 HTML 文件(这种文件不会太大，一般为几百K）。这就是服务端渲染更快的原因。

关注公众号，互相监督学习进步！