目录

• 移动端性能优化:
• 图片优化:
• 1、CSS sprites
• 2、压缩图片
• 3、尽量避免重设图片大小
• 4、图片尽量避免使用DataURL
• 5、图片懒加载
• JavaScript相关优化
• 1、把脚本放在页面底部
• 2、使用外部JavaScript和CSS
• 3、压缩JavaScript和CSS
• 4、减少DOM操作
• 5、js开销缩短解析时间
• 6、v8编译原理(代码优化)
• 7、v8内部优化
• 8、对象优化(迎合v8进行优化)
• 9、造成undefined和数字比较
• 10、js内存,避免造成内存泄漏
• CSS 相关优化
• html 相关优化
• 开发内容相关优化
• 服务器相关优化
• Cookie相关优化
• 首屏加载优化

前端项目的性能优化是一个综合性的问题,需要从多个方面入手,以下是几大类的优化方案:移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。

移动端性能优化:

• 1、保持单个文件小于25KB
  移动网站页面要求下载资源,如果文件过大,会大大减慢页面加载速度。

• 2、打包内容为分段multipart文档
  由于HTTP请求每一次都会执行三次握手,每次握手都会消耗较多的时间。使用multipart,实现了多文件同时上传,可用一个HTTP请求获取多个组件。

图片优化:

1、CSS sprites

俗称 CSS 精灵、雪碧图,雪花图等。即将多张小图片合并成一张图片,达到减少 HTTP 请求的一种解决方案。可通过 CSS中的background 属性访问图片内容。这种方案同时还可以减少图片总字节数,节省命名词汇量。

2、压缩图片

图片占据资源极大,因此尽量避免使用多余的图片,使用时选择最合适的格式大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。(切记不要过分压缩 可能会导致图片迷糊)

3、尽量避免重设图片大小

重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。

4、图片尽量避免使用DataURL

DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。

5、图片懒加载

图片对页面加载速度影响非常大。比如,当一个页面内容比较多的时候,加载速度就会大大的降低,极大的影响到用户体验 。更有甚者,一个页面可能会有几百个图片,但是页面上仅仅只显示前几张图片,那其他的图片是否可以晚点加载用于提高性能。具体可见 >>

JavaScript相关优化

1、把脚本放在页面底部

放在前面js加载会造成阻塞,影响后面dom的加载

2、使用外部JavaScript和CSS

在现实环境中使用外部文件通常会产生较快的页面,因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的情况,由于 HTML 文档通常不会被配置为可以进行缓存的,所以每次请求 HTML 文档都要下载 JavaScript 和 CSS。所以,如果 JavaScript 和 CSS 在外部文件中,浏览器可以缓存它们,HTML 文档的大小会被减少而不必增加 HTTP 请求数量。

3、压缩JavaScript和CSS

压缩文件是为了降低网络传输量,减少页面请求的响应时间。

4、减少DOM操作

操作dom会产生几种动作,极大的影响渲染的效率。其中layout(布局)和paint(绘制)是最大的。

5、js开销缩短解析时间

开销:加载-》解析和编译-》执行
js的解析和编译,执行要花很长时间(谷歌开发工具中的performance中可以查看。选中main主线程中的某一段。)

解决方案:

代码拆分按需加载
tree shaking代码减重
避免长任务
requestAnimationFrame和repuestIdleCallback进行时间调度

6、v8编译原理(代码优化)

解析js代码成抽象语法树-》字节码-》机器码
编译过程会进行优化
运行时可能会发生反优化

7、v8内部优化

脚本流:边下载边解析
字节码缓存:常用的字节码会存起来(这个文件用到其他的文件也用到的参数)
函数懒解析:先解析用到的

8、对象优化(迎合v8进行优化)

保证对象初始化顺序一致(对象初始化时v8会生成隐藏属性以便后续复用并且是按照顺序排序的)
不要直接赋值对象新属性(追加的属性需要通过描述数组间接查找)
使用数组代替类数组(v8会对数组进行优化)比如先将类数组转化成数组
避免读取数组越界(比如for循环多查找1个下标会照成性能相差6倍)

9、造成undefined和数字比较

数组也是对象,当找不到对应下标的时候回沿着原型链向上找造成额外开销
业务上无效

10、js内存,避免造成内存泄漏

通过变量是否能被访问到来判断内存是否释放。

局部变量: 函数执行完没有闭包引用会被标记回收

全局变量: 直到浏览器被卸载页面释放

回收机制:
引用计数:每调用一次加一,当计数为0的时候进行回收。缺点是不能解决循环引用(例如a对象依赖于b对象,标记清除(垃圾回收): 从根节点去访问,当访问到不能被访问的对象就进行标记然后进行垃圾回收。(当a对象
解决:避免意外的全局变量;避免反复运行引发的闭包;避免脱离的dom元素没有被回收(所以react有ref这个api)。

CSS 相关优化

• 1、把样式表放在标签中
  css放在head标签中比css放在body标签尾部少了一次构建RenderTree, 一次计算布局和一次渲染网页, 因此性能会更好。
• 2、使用替代@import
• 3、不要使用filter
• 4、避免元素类型转化(数组中放多种类型不利于v8引擎优化代码)

  • 降低css对渲染的阻塞(按需加载,放在dom前面加载)
  • 利用pu完成动画(前面讲到的复合)
  • 使用contain进行优化(优化强度大。例如: contan:layout告诉浏览器这个节点内部的子元素和外面的使用font-display进行优化:让文字更早的显示在页面上,减轻文字闪动的问题

html 相关优化

• 减少iframes使用
• 压缩空白符
• 避免嵌套层次太深
• 避免使用table布局
• 减少没必要的注释
• 删除元素默认属性(比如默认checkbox等)

开发内容相关优化

• 减少HTTP请求数
• 减少DNS重定向
• 缓存AJax请求
• 延迟加载
• 预加载
• 减少DOM元素的数量
• 划分内容到不同域名
• 尽量减少使用iframe
• 避免404错误

服务器相关优化

• 使用CDN
• 添加Expires或Cache-Control响应头
• 启用Gzip
• 配置Etag
• 尽早输出缓冲
• Ajax请求使用GET方法
• 避免图片src为空
• 传输加载优化
  服务器启用gzip
• keep Alive(持久TCP连接)
  keepalive_requests 100;请求100次后开启http的keepAlive有keepalive_timeout 65;65秒后关闭。
• http缓存
  最好是用no-cache(要用的时候需要在服务器那边Etag验证下)
• service workers
  • 加速重复访问
  • 离线支持

Cookie相关优化

• 减少cookie大小
• 静态资源使用无cookie域名

首屏加载优化

• 资源压缩、传输压缩、代码拆分、tree shaking、http缓存
• 路由懒加载、预渲染、inlineCss、虚拟列表
• prefetch和preload调整加载顺序js内存管理

到此这篇关于前端常用的性能实用优化方法有哪些?的文章就介绍到这了,更多相关前端性能优化内容请搜索代码部落以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码部落!