我要评论面试官拷问
面试官：为什么要进行前端优化？图片在前端是如何解码的？浏览器渲染加载的过程是如何进行的？懒加载和预加载的原理是什么样的？懒加载和预加载的应用场景是什么样的？pwa和vue-ssr等原理的是怎么样的？
面试官深度拷问每个优化性能后的原理是怎么样的？结合你自己做过的项目性能优化的原理是怎么样的？说说你在项目中使用过性能优化后的感悟心得？说说每个性能优化原理最适合的场景过程。
面试人员想要了解你掌握多少性能优化的原理，了解你做过项目上是否使用过性能优化，分析自身做过的项目，找到需要性能优化的点，选择合适的性能优化等。
影响前端性能的有图像，样式表，脚本，flash等，减少组件的数量，减少所需的http请求的数量，即可加快页面的速度。
前端性能优化，资源的合并与压缩
合并文件是一种通过将所有脚本合并为一个脚本，类似将所有css合并为一个样式表来减少http请求数量的方法。
实现性能优化，第一，减少我们的http请求的数量，以及减少请求的资源大小，第二，资源的压缩与合并的原理是什么。压缩与合并前是什么样的效果，压缩与合并后又有什么区别。
**拷问：**浏览器的一个请求从发送到返回是一个怎样的过程？
url分解，协议名称，层级url的标记符号，固定不变，访问资源需要的凭证信息，从哪个服务器获取数据，需要连接的端口号，指向资源的层级文件路径，查询字符串，片段id。
客户端，走http应用层，tcp传输层，ip网络层，数据链路层网络
分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层往上走。
应用层客户端发送http请求，报文首部，空行，报文主体，报文首部含请求行，请求首部字段，实体首部字段，其他。
syn （synchronize sequence numbers）同步序列编号
ack (acknowledgement）确认字符
过程，用户先在浏览器中输入一个url，浏览器内部中的核心代码会将这个输入的url拆分解析，然后将domain传给dns服务器，dns服务会根据domain查询相关的post对应的ip地址，然后将ip地址传递给浏览器，浏览器有ip地址，就知道浏览器要到哪里去，持有ip地址知道这个请求发送到哪里去。就跟随协议，请求的参数都会在协议中携带，发送到网络中去，然后通过局域网，交换机，路由器，主干网络，到达服务端。
服务端是有一个mvc的架构的，请求首先会进入controller中，在controller中进行相关的逻辑处理，以及请求的分发，调用model层，负责和数据进行交互，model层会读取redis和db里面的数据。然后通过view层给到网络，由服务端到浏览器端，浏览器主要是做render的过程，render的过程就是通过浏览器请求回来的html，css，javascript等渲染的过程，会形成相关的dom树，以及对应的css树，在页面上进行相应的样式渲染。
拷问，从浏览器到服务器的过程中，那几个点，哪些过程可以进行我们的前端优化呢？
client浏览器与server通过http协议通讯，http协议属于应用层协议，http属于tcp协议，所以client与server主要通过socket进行通讯。
tcp属于传输层协议，走https需要会话层tls,ssl等协议。
浏览器，dns服务器，服务器等，dns上我们可以进行缓存，来优化前端性能，路由器层面，url层面进行数据缓存，这样访问的时间就会被缩短了很多。
网络请求的过程，带宽，网络的选择，涉及到缓存，可以使用cdn，cdn是请求静态资源用的，请求静态资源，那么cookie是没有用的，所以希望在请求静态资源中，把这个cookie给去掉，这里注意cdn的域名不要和主站的域名一致，防止携带cookie。
如何减少我们http请求的大小，每一个http请求都要走网络环境才能达到我们的服务器，每一次请求都有网络环境的损耗，把多次http请求减少到一次，减少网络环境中的损耗。也可以从服务器端出发，先把反映到页面中效果进行渲染，然后直出到网页上。
每一次请求都有网络环境的损耗，我们可以把多次http请求合并成一次，从而减少相同的环境损耗。
带宽，一个http的请求大小能够较小的话，访问就比较快一些，浏览器端的渲染过程，使用框架，就要从浏览器中进行渲染，框架中的模板是要在浏览器中进行渲染的，这个在框架中进行渲染，不利于首屏，对首屏有很大的损耗，不利于前端的性能。
服务器的渲染，将html渲染后直出到我们浏览器页面，不是在浏览器中进行渲染了。
前端性能优化点，通过http请求的过程，可以了解到，我们可以通过dns进行缓存从而减少dns查询的时间，网络请求的过程走最近的网络环境，相同的静态资源进行缓存，减少http请求的大小，减少http请求，服务器端渲染，从业务中进行前端优化点。
重点，深入了解一下http的请求过程，就可以知道前端性能优化的核心要点
资源的合并与压缩
减少资源体积，gzip压缩，js混淆，css压缩，图片压缩。
减少http请求的数量即为合并，减少http请求的大小即为压缩。可以对html进行压缩，css进行压缩，js进行压缩和混乱，文件合并，开启gzip等。
进行html压缩
第一使用在线网站压缩，使用html-minifier工具进行压缩，后端模板引擎渲染压缩。
进行css压缩
css sprite是减少图像请求数量的首选方法，将背景图像合并为单个图像。
css sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200kb的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
第一进行无效代码的删除，第二是css语义合并，使用在线网站压缩，使用html-minifier对html中的css进行压缩，使用clean-css对css进行压缩。
用cssbackground-image和background-position属性显示所需的图像段
进行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%。
图片优化的过程
图片加载处理，图片预加载，图片懒加载，首屏加载时进度条的显示。异步请求的优化，使用正常的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格式图片区别
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、oppo等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加v获取：vip1024c （备注前端）
vue 面试题
1.vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 ui 的过程？
3.你是如何理解 vue 的响应式系统的?
4.虚拟 dom 实现原理
5.既然 vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 dom 进行 diff 检测差异?
6.vue 中 key 值的作用？
7.vue 的生命周期
8.vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 vue 和 react 的认识，做一个简单的对比
15.vue 的 nexttick 的原理是什么？
16.vuex 有哪几种属性?
17.vue 首屏加载优化
18.vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
虚拟 dom 进行 diff 检测差异?
6.vue 中 key 值的作用？
7.vue 的生命周期
8.vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 vue 和 react 的认识，做一个简单的对比
15.vue 的 nexttick 的原理是什么？
16.vuex 有哪几种属性?
17.vue 首屏加载优化
18.vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-j1o9rdba-1712011653247)]
发表评论