作为一个前端会允许自己的作品,在非硬性条件下出现卡顿? 肯定是不会,所以给大家梳理一下前端性能的优化.

一:文件操作

html文件压缩:

删除无用的空格和换行符等其他无意义字符

css文件压缩:

删除无用的空格和换行符等其他无意义字符,样式的合并

js文件压缩

删除无用的空格和换行符等其他无意义字符(好处除了减少文件的大小,还可以对自己的代码进行保护 也就是js代码混合)

文件合并

针对js文件的合并:可以把多个无依赖关系的js文件合并在一个文件里面,减少http请求.

操作方式:

1.在线网站压缩

2.使用构建工具在项目构建层压缩(如webpack,node中的一些模块)

带来的问题:

1.首屏渲染问题(合并之后文件可能很大,渲染时间变长)

2.缓存失效问题(合并之后,之前的单独文件一改变,合并的文件也要改变,导致缓存失效)

tips:看自己的需求进行处理

二:图片操作

常见图片类型:jpg,png,webp(谷歌公司推出)

jpg应用场景:不需要透明的图片使用

png应用场景:需要透明的图片使用

webp应用场景:不失真,安卓移动端(推荐使用,有在线工具可以转换成webp格式的图片 智图) ios(存在兼容性)

图片方面的优化:

1.使用雪碧图(精灵图)把icon图标等一些图片集成在一张图片上 (注意:图片不能过大 会出现失真和请求过慢的情况,导致页面不能及时渲染)

2.image-inline:在有些场景中,我们完全可以把一些图片转成base64编码,作为html代码,减少http请求.

三:预加载和懒加载

相比这两个词大家听说的很多,实际应用还是很少的.

1.预加载应用场景:电商网站或者页面较长有需要加载很多图片的应用中

在图片容器没有出现在可视区域内之前不去请求图片资源,当图片容器出现在可视区域内的时候再去请求资源.(可大量优化性能)

2.懒加载应用场景:典型应用抽奖(抽奖的时候,是不是选中那个奖品,图片就立即变化了,所以要提前获取到图片资源)

四:重绘与回流

这两个问题是老生常谈的问题,那我们就解决吧.

概念

重绘:元素的外观,风格 不影响布局 和几何大小

回流:页面布局和几何属性(尺寸大小等)改变

常见引起重绘的原因:

常见引起回流的原因:

解决办法:

1.用translate替代top改变

2.用opactiy替代visibility(注意要把目标元素单独设置在一个图层上 如何设置图层:目标元素 1.will-change:transform 2.transform:translateZ(0) 其它的方式自行百度)

3.不要一条一条地修改DOM的样式,预先定义好calss,然后修改DOM的class名称

4.把DOM离线修改(先把元素display:none,修改之后在显示出来)

5.不要把DOM结点的属性值放在一个循环里当成循环里的变脸(用一个中间变量保存,不然会破坏浏览器的重绘缓存机制,导致代码健壮性不够)

6.不建议使用table布局

7.动画实现的速度的选择

8.对于动画新建图层

9.启用GPU硬件加速(transform:translate3d(0,0,0),合理使用,物极必反)

图层解释:类似于ps中的图层,浏览器的渲染是多个图层决定的

上图就是一个页面的图层

如何计算浏览器的重绘和回流时间

使用这个工具(使用方法自行百度)

我们下期见

web前端性能优化一的更多相关文章

  1. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  2. Web前端性能优化教程09:图像和Cookie优化

    本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...

  3. Web前端性能优化教程06:减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

  4. Web前端性能优化教程08:配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  5. Web前端性能优化教程05:网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  6. Web前端性能优化教程03:添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  7. Web前端性能优化教程04:压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

  8. Web前端性能优化教程07:精简JS 移除重复脚本

    本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中 ...

  9. WEB前端性能优化:HTML,CSS,JS和服务器端优化

    对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括开发的效率,这里我总结下我理解中的WEB前 ...

  10. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

随机推荐

  1. [ZJOI2019]开关(生成函数+背包DP)

    注:以下p[i]均表示概率 设F(x)为按i次开关后到达终止状态方案数的EGF,显然F(x)=π(ep[i]x/p+(-1)s[i]e-p[i]x/p)/2,然而方案包含一些多次到达合法方案的状态,需 ...

  2. Office.MsoLanguageID枚举常量(采用API函数取出)

    msoLanguageIDAfrikaans (&H436) msoLanguageIDAlbanian (&H41C) msoLanguageIDAmharic (&H45E ...

  3. NOIP 2004 T3 合唱队形(DP、最长上升/下降子序列)

    链接:https://ac.nowcoder.com/acm/contest/1082/C来源:牛客网 题目描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队 ...

  4. poj-3662 Telephone Lines 二分答案+最短路

    链接:洛谷 POJ 题目描述 Farmer John wants to set up a telephone line at his farm. Unfortunately, the phone co ...

  5. 40)PHP,mysql_fetch_row和mysql_fetch_array和mysql_fetch_assoc的区别

    分析: mysql_fetch_row,这个函数是从结果集中取一行作为枚举数据,从和指定的结果标识关联的结果集中取得一行数据并作为数组返回.每个结果的列储存在一个数组的单元中,偏移量从 开始. 注意, ...

  6. log4j2.xml 配置

    动态生成日志, 日志路径: log4j2.xml 配置如下: <?xml version="1.0" encoding="UTF-8"?> < ...

  7. Spring-security整理

    出于某些原因,需要学习一下spring的安全框架.(研究半天,如果单单说用户认证和授权这块儿,我感觉还是shiro好用.) spring security介绍可以参考一下以下文档: (满满的羡慕啊)我 ...

  8. [LC] 117. Populating Next Right Pointers in Each Node II

    Given a binary tree struct Node { int val; Node *left; Node *right; Node *next; } Populate each next ...

  9. OpenCL介绍

    OpenCL(全称Open Computing Language,开放运算语言)是第一个面向异构系统通用目的并行编程的开放式.免费标准,也是一个统一的编程环境,便于软件开发人员为高性能计算服务器.桌面 ...

  10. 第十六届“二十一世纪的计算”学术研讨会 密西根州立大学教授Anil K. Jain主题演讲

    Biometrics---How Do I Know Who You Are? 密西根州立大学教授Anil K. Jain主题演讲" title="第十六届"二十一世纪的 ...