2024年前端最新时间都去哪了-移动Web首屏优化实践(3),2024年最新338页网易前端面试真题解析火爆全网

总结

  • 框架原理真的深入某一部分具体的代码和实现方式时,要多注意到细节,不要只能写出一个框架。

  • 算法方面很薄弱的,最好多刷一刷,不然影响你的工资和成功率😯

  • 在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。

  • 要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!

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

喜欢这篇文章文章的小伙伴们点赞+转发支持,你们的支持是我最大的动力!

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们PC上访问其实现在的带宽已经很好了,百兆光宽带,但是在移动端就不一样了,很多用户还是使用的流量,GPRS。所以,对于首屏时间的加载,压力还是蛮大的;

我们手机在出发一个操作之后,发生了什么?

下面是在返回数据前发生的动作,但是作为前端,我们好像动不了这些东西,不可能叫运营商去帮你定制一套系统;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这个才是我们真正要去做的东西—渲染(webkit)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

给你两个优化的方面,优化网路与优化渲染(高性能js,但是很多时候我们技能用不到),其实优化网络,我们可以提升几秒,而优化渲染,我们大部分是是毫秒级的,所以网络优化才是重点;但有时候我们往往动不了;

网络层的优化

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

上述这些步骤,能否在1秒内完成,很难,但是当我们合理利用缓存等一些技术时,还是可以的;

上述有一个概念RTT,用人话讲就是一次请求往返的时间

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

下面是一些常见网络的RTT时间

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们还可以通过一些常用的工具去测试网络的耗时;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

可以查看每个js的解析时间,http响应时间,tcp建立时间

那我们要怎么做呢?

我们可以从以下几个方面着手,这些都是一些经典的使用场景,但是我们知道要这么做,但更应该知道为什么要这么做;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

首先,第一个减少请求数?为什么?

请求多了,并不是说会对后台造成多大的压力,这当然是一方面,从RTT上来说,每一个请求都会消耗一个RTT时间,那么越多的请求消耗的RTT时间就越多;

比如请求一个5K的css和一个200K的图片,除了请求大小不一样之外,深入到协议里面,并不是请求的数据一次性的返回一个包给你,因为为了防止网络拥塞,会有一个窗口来限制你的包的大小;所以建议初试化的包控制在14k以内,只是tcp窗口的大小。

再次,利用缓存;

然后是合理安排请求顺序,哪些请求是必须先加载的,哪些可以稍后加载。那怎么做呢?

1. DNS预解析

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.域名收敛

既然DNS解析比较耗时,每个连接都要建立链路,那么我们就可以通过减少ajax到后台的域名地址,通过反向代理去做。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. 链路复用

因为每一次链接数都要建立3次TCP握手,通过keep-alive,可以保证建立的连接不会被关闭, 下次请求可以直接发送数据,这样可以减少将近200ms的时间,当然会增加一部分Server的内存消耗,要预先扩容;http2.0已经支持了这些特性;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4. 资源内联

在首屏里,一些资源都是分散开发的,在一些简单的页面中,有些内容可以内联进去,不然像一些css页面要等到html页面解析完成后,再去解析外联的css; 可以通过打包工具在发布的时候就能完成;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.组件化开发

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

首先一点是按需加载,就是首屏显示的东西,哪些要加载,哪些无需加载,可以区分开来,而且可以异步方式来加载,如上图是一块一块的加载出来,而不是一步全部加载出来;

然后一个是一部渲染,这里举个例子;如下的tab选项卡

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们通常是这么做的,我们可以先加载一些公用的东西,然后通过路由,去加载首屏上可以看到选项卡的资源,哪些有用户交互之后的东西,可以稍后在加载;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

但是这样会有一个问题,有时候我们的js处理的比较快,但是css文件处理的比较快,这样就会使的页面比较混乱,所以可以通过异步打包工具,将css和js打包在一起

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Vue

  • 什么是MVVM?

  • mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?

  • 组件之间的传值?

  • Vue 双向绑定原理

  • 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程?

  • 虚拟 DOM 实现原理

  • Vue 中 key 值的作用?

  • Vue 的生命周期

  • Vue 组件间通信有哪些方式?

  • vue 中怎么重置 data?

  • 组件中写 name 选项有什么作用?

  • Vue 的 nextTick 的原理是什么?

  • Vuex 有哪几种属性?

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

9e65ecb71ac0)**

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值