Web前端性能优化原理问题(1)，震撼来袭免费下载

进行js的压缩和混乱

第一删除无效字符，剔除注解，代码语义的缩减和优化，代码的保护，可以使用在线网站进行压缩，html-minifier对html中的js进行压缩，使用uglifyjs2对js进行压缩

（1）将table改为div布局

（2）缩减精简div、span、ul、li等系列标签

（3）删除多余空格

（4）表格类型布局时候适当使用table替代div布局

（5）网页GZIP压缩

文件的合并

文件与文件之间有插入的上行请求，增加了N-1个网络延迟，受丢包问题影响更加严重，经过代理服务器时可能会被断开。合并文件存在首屏渲染问题，缓存失败问题，js文件比较大，请求比较慢，得请求回来后才会首屏HTML渲染，js是由缓存的，文件合并如果其中某个js文件有变化，就会导致缓存失败的问题，如果文件不合并，修改其中的某一个js文件，只会导致该文件缓存失效，其他的不会受影响。文件合并，存在很严重的缓存失效问题。

那么是否进行文件的合并，建议可以将公共库单独打包成一个文件，业务单独打包成一个文件，不同页面的合并，将不同页面的js不同打包，

如何进行文件合并，在线网站进行文件合并，使用nodejs实现文件合并

实战资源和与压缩

实战页面开发，网站进行压缩与合并，fis进行自动化的压缩与合并。

压缩前

压缩后

前端自动化的构造实现压缩与合并

fis3是一款百度内的构建工具，start->getSource()->所有文件是否编译完成，（单文件的编译，另个走向为打包的过程）。

fis3的配置文件，fis-conf.js

压缩后，优化前后性能对比，还是要性能优化得好，大的资源效果很明显

加载优化，合并CSS，JavaScript，合并小图片，缓存一切可以缓存的资源，使用外联样式引用CSS和JavaScript，压缩HTML，css，JavaScript，启用GZIP，使用首屏加载，按需加载，滚屏加载，增加加载进度条，减少cookie，避免重定向，异步加载第三方资源。

css优化，css写在头部，JavaScript写在尾部，避免图片和Frame等的空Src，尽量避免重设置图片大小，图片尽量避免使用DataURL，尽量避免写在HTML标签中写style属性，避免css的表达式，移除空的css规则，正确使用display的属性，不滥用float，不滥用web字体，不滥用过多的Font-size，值为0时不需要任何单位，标准化各种浏览器前缀，避免让选择符看起来像正则表达式。

渲染优化，HTML使用viewport，减少dom节点，尽量使用css3动画，合理使用requestAnimationFrame动画代替setTimeout，适当使用Canvas动画，Touchmove，Scroll事件会导致多次渲染，使用CSS3 transitions，CSS3 3d，transforms，Opacity，Canvas等来触发GPU渲染。

脚本优化，减少重绘和回流，缓存dom选择与计算，缓存列表length，尽量使用事件代理，避免批量绑定事件，尽量使用id选择器，使用touchstart，touchend代替click。

图片优化，使用css3，svg，iconfont代替图片，使用srcset，web优于jpg，png8优于gif，首次加载不大于1014kb，图片不宽于640。

注意，在我们修改后端响应时间缩短一半时，整体响应事件只能减少5-10%，而优化前端性能，缩短一半时，整体响应可以减少40-45%。

前端优化的意义 HTTP请求的过程是进行优化的核心 压缩和合并的原理

图片优化的过程

图片加载处理，图片预加载，图片懒加载，首屏加载时进度条的显示。异步请求的优化，使用正常的json数据格式进行交互，部分常用数据的缓存。

图像映射将多个图像合并为一个图像，整体大小大致相同，但是减少HTTP请求的数量可以加快页面的速度。

png8、png24、png32区别

png8为256颜色，支持透明，png24为2的24次幂，不支持透明，png32为2的24次幂，支持透明。

jpg有损压缩，压缩率高，不支持透明，png支持透明，浏览器兼容好，webp压缩程度更好，在ios webview有兼容性问题，svg矢量图，代码内嵌，相对较小。

jpg使用场景，用在不需要透明图片，png使用场景，用在需要透明图片的场景，webp用在安卓，svg矢量图用在图片样式相对简单的业务。

css雪碧图，把一些图片整合到一张单独的图片中，用来减少请求数量，问题出在图片大，如果没有加载成功的话，慢，也是有问题的。image inline，把图片的内容内嵌到HTML上，与HTML存在，作为base64的格式，可以减少你的网站的HTTP请求数量。使用矢量图svg，绘制功能，使用iconfont解决icon问题。

webp使用在安卓下，它具更好的图像数据压缩算法，和无损和有损的压缩模式，alpha透明，动画的特性。

HTML渲染过程：顺序执行（词法分析），并发加载，是否阻塞，依赖关系，引入方式。

css阻塞，css head中阻塞页面的渲染，css阻塞js的执行，css不阻塞外部脚本的加载。

js阻塞，引入js阻塞页面的渲染，js不阻塞资源的加载，js顺序执行，阻塞后续js逻辑的执行。

图片压缩与拼接

PNG、PNG-8、PNG-24以及JPEG格式图片区别

PNG格式适合对透明度有要求的情形，PNG-8处理不了复杂色域下的渐变，PNG-24可以几乎不失真地保留渐变

图片压缩方法

使用Photoshop自带图片压缩，文件—存储为Web所用格式，一般情况下，JPEG选择输出质量为70~80%可以保证视觉上几乎没有差异。

页面体积

优化前后文件体积压缩率 = 优化后的体积÷优化前的体积

懒加载原理

什么是懒加载的定义是对于图片而言，图片资源，对于商城项目图片是很多的，页面很长的业务场景适用，减少无效资源的加载，并发加载的资源过多会阻塞js的加载。

当图片进入到我们可视区域，去请求加载资源

懒加载的效果延迟加载

预加载****原理

图片等静态资源使用前提前请求，资源在使用时从缓存中加载，提高用户体验。

什么是重绘与回流的机制？

频繁重绘与回流会导致ui频繁渲染，导致JavaScript变慢。回流，当render tree中的一部分因为元素的规模尺寸，布局等改变需要重新构建，会触发回流，重绘，当render tree中的一些元素需要修改属性，这些属性不影响元素的外观，风格，布局，就叫做重绘，如修改颜色等。

所以回流一定会引起重绘，但是重绘不一定会引起回流。

掌握一些css属性

将频繁重绘回流的元素单独出来，作为一个独立的图层，那么这个元素的重绘回流就只能影响这个图层中。

把一个元素独立成独立的图层，用css属性

避免使用触发重绘，回流的css属性，重绘和回流很频繁可以独立出来。

浏览器存储

了解什么是localstorage，cookie，sessionstorage，indexdb

了解pwa和service worker的应用

多种浏览器存储方式共存

什么是cookie

用cookie给服务端传递相关信息，让服务端来分别当前请求的是哪个客户端，cookie是1993年有的，它的目的就是为了区分HTTP的请求情况，本来HTTP请求就是无状态的，就是请求之后的连接就关闭了，cookie就是去维护客户端的状态。

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频**

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-ADfhTa9x-1710702826034)]

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-2epE8VrY-1710702826034)]