前端 进阶

杰杰小可爱
221 阅读8分钟

低代码平台

普通的后端管理系统 有必要构建低代码平台吗，如果要修改怎么修改呢

性能问题排查

首屏渲染指标

如何使用chrome devtools分析性能

  • 查看network资源加载 size有两种大小 网络传输大小和资源实际大小
  • dom content load时间
  • 用performance record网页加载的性能，查看报告中，main（主线程）的任务调用；timings 关键事件：DCL、FP、FCP、FMP、LCP。白屏结束时间 = FP事件触发时间 、 首屏结束时间 = FCP事件触发时间。TTI：用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。Long Task：阻塞主线程达 50 毫秒或以上的任务，可以通过PerformanceObserver获取,performance中右上角标红的任务。

dom节点数一直在增长，怎么优化dom节点数过多的问题？

  • 减少dom结构里没用的节点，避免div无用的嵌套
  • 考虑多使用css伪元素:before:after
  • 在react中，代码片段用<></>包起来，而不要用div，在vue中用template
  • 可以加定时器任务做页面DOM清理，setInterval定时对动态添加的元素进行扫描和删除
  • 不要有detached DOM

浏览器关键渲染路径
javascript>Style>Layout>Paint>Composite

影响回流操作：（performance中layout）

  • 添加/删除元素
  • 操作styles
  • display：none
  • offsetleft、scrolltop、clientwidth
  • 移动元素位置
  • 修改浏览器大小、字体大小

回流是不可避免的，还需要避免布局抖动

  • 浏览器为了帮助提升布局性能，会尽量地把修改布局的操作推迟。但如果有读取布局参数的操作，就会为了获取最新的结果，就会立即重新计算布局，如果之后立即写布局，并且连续不断地循环这种forcedReflow强制回流的操作，就会发生布局抖动。
  • 规避措施：避免回流、通过transform：translate位移，opacity。react、vue中通过虚拟dom提升性能。
  • 读写分离。读布局，修改布局进行分离。

减少重绘

示例：点击卡片、进行无限旋转。 tips：通过rendering 勾选paint flashing,可以在页面中标识出发生重绘的元素。
通过transform：translate位移，opacity减少重绘。
willchange 属性可以创建新的图层。可以把dom提取到一个单独的图层里，不影响其他元素的渲染。

react时间调度实现

16版本Fiber原理
如何用requestAnimationframe实现requestIdleCallback
环形链表插入任务

性能瓶颈：javascript

js 下载，编译&解析，加载 需要提高js部分的时间，这样用户可交互的时间将提前

  • code splitting 代码拆分，按需加载
  • tree shaking 代码减重
  • 避免长任务
  • 避免超过1kb的行间脚本，合理规划首屏资源大小
  • 使用raf和ric进行时间调度
  • 可见不可交互vs最小可交互资源集
V8编译原理

parse => 抽象语法树=> 优化编译 => 反优化（不合适的优化进行回退） 优化机制

  • 脚本流（大于30k的js认为可以边下载边提前解析）
  • 字节码缓存
  • 懒解析

函数优化 懒解析vs饥饿解析 通过用括号包裹函数，即可开启饥饿解析，告诉解析器立即解析，而不是等到要使用的时候再解析。optimize.js可以帮助我们把uglyfy.js意外地移除括号的再添加回来。

对象优化
HTML优化

  • 减少iframe使用（开销相比较普通dom要大很多），可以做延迟加载，等其他dom加载完成后再加载iframe
  • 压缩空白符
  • 减少层级嵌套
  • 避免使用table布局
  • 删除注释
  • css&js尽量外链
  • 删除元素默认属性

css优化

  • 降低css对渲染的阻塞
  • 利用gpu进行动画渲染
  • 使用contain属性
  • 使用font-display属性（字体下载完成之前浏览器选择字体的策略）
  • 字体加载优化：使用unicode-range进行大字体文件的分片
  • 使用ajax+base64异步加载字体

图片优化

  • jpg/jpeg 压缩比很高，色彩保存较好，纹理和边缘比较模糊 （imagemin工具网站）
  • png 对jpg的缺点进行了弥补，体积会比jpg偏大，做一些icon、logo（imagemin-pngquant）
  • webp 压缩比例更高，色彩保存也较好

webpack构建优化

convertion over configuration 约定大于配置

webpack4两种mode，prod模式下webpack做了哪些工作？

  • terser-webpack-plugin treeshaking js代码，减少js文件体积
  • 在生产模式下，有一个作用域提升的配置，作用是：进行依赖关系的合并，代码体积减少，减少依赖查找时间，提高执行效率
  • @babel/polyfill 配置useBuildtIns：true，达到treeshaking的效果
  • @babel/plugin-transform-runtime的作用：辅助函数的复用
  • @babel/preset-env插件的targetbrowsers配置： >0.25%

提问：

  1. webpack有没有做过一些优化工作？
  • 对项目的依赖进行优化，避免打包时对不变的库重复构建，打包时生成dllPlugin，动态链接库。可以在dev环境，提升构建速度，提升开发效率。
  • 代码拆分,公共代码抽离？
  • 压缩资源，使用Gzip压缩。传输阶段动态压缩和对资源文件进行文件的压缩是不同的概念。
  • 启动持久化缓存，nginx配置html资源永不缓存，其余资源设置很长的缓存，利用webpack 文件hash路径进行资源的更新；contenthash和chunkhash，推荐使用前者。
  • 打包监测，使用--report进行打包体积监测；
  • productionSourceMap去除生产环境sourceMap；
  • 增加缓存命中：chuckhash、contenthash；
  • 打包速度优化：resolve.alias,resolve.extensions;
  • 配置rule的查找范围，利用多线程提升构建速度。
  • 删除async chunck的prefetch链接并使用webpack的内联注释/* webpackPrefetch: true */手动选择要提前获取的代码区块，webpack 的运行时会在父级区块被加载之后注入 prefetch 链接。

react/vue按需加载的实现方法 react 用@loadable/component组件做路由动态加载组件。vue直接用import动态加载，或者使用异步组件。

http

keepalive配置
查看某个网址的http配置curl-v http…
keepalive_timout 65
keepalive_requests 100
在用户过多的时候，建立过多的Keepalive的通道会让服务器不堪重负

Http缓存方案
Nginx配置html文件永不缓存怎么配置
304是表示可以从浏览器缓存拿取资源
ETag+If-none-match唯一标识是否匹配判断文件是否发生变更
SeviceWorker/pwa
Mozilla网站查看http协议参数 提问：是否有通过http缓存策略节省http网络资源和提升网页访问速度？

http2
怎么查看http使用的版本
只有https才能开启http2
多路复用，真正并发
Http2主动推送(固定资源推送)和websocket 的区别
二进制传输，相比较文本传输，更安全和更高得压缩比

服务端渲染

调整资源加载顺序

内存泄漏

组件封装

怎么封装一个

vue框架

v-for为什么要绑定key，绑定key是带来效率的提升还是什么？

安全方面

cookie

一级域名：aaa.com 二级域名：bbb.aaa.com 三级域名：ccc.bbb.aaa.com

cookie设置规则：
在当前域名下，只能设置当前域以及父域的cookie，不能设置子域下的cookie。

cookie访问规则
cookie挂载在某个域下，只有在此域名下或者此域名的子域下才能获取cookie。

cookie有哪些属性设置
domain
path
samesite lax属性防csrf
secriuty

cookie的samasite属性在chorme 80版本之后表现为什么
Lax

CSRF攻击

xss攻击 ddos攻击

webpack

浏览器不同的内核css写法不同，怎么处理浏览器兼容性问题？
postcss-loader的autoprefixer插件，自动添加前缀。

怎么拆包

css

BFC布局

Flex布局性能提升，创建一个父容器，和十万个Div 盒子，盒子在父容器中横向排列，排列不下就换行，分别用float和flex实现，并统计渲染时长。

flex怎么调整间距

HTML meta标签作用
如何禁止视口缩放？如何禁止通过手势返回上一页？

选择器优先级
伪类，伪元素 svg有哪些加载的方式

微前端

可视化平台（BI工具）

  • 和后端的数据格式是怎么约定的？
  • 如何适配多数据源？
  • 如何方便的扩展一种图表格式？require.context
  • 如何渲染10万+的大数据量图表？
  • 如果一张报表里面包含100+的图表，图表可以拖拽，比方说要支持从第一个拖到最后一个，这张报表在用户体验上有什么问题？有什么解决方案？ 1）渲染需要做懒加载；2）拖拽需要考虑报表滚动的距离。
  • 如果http版本是h2版本，那限制http并发请求数还有意义吗？
  • 如果有一段代码在组件mounted里面是这样写的，会有什么问题？

const el = this.$el.querySelector('.my-chart')

this.$el.addEventListener('scroll', ()=>{

    if( // some 条件){

        el.style.display = ‘none’

    }

})

Icon font获取网址:icofont font awesome

vue源码中的实用utils

/** * Always return false. */   
const NO = () => false;

isOn 判断字符串是不是 on 开头，并且 on 后首字母不是小写字母

const onRE = /^on[^a-z]/;   
const isOn = (key) => onRE.test(key); 
// 例子： 
isOn('onChange'); // true 
isOn('onchange'); // false 
isOn('on3change'); // true

onRE 是正则。^符号在开头，则表示是什么开头。而在其他地方是指非。

与之相反的是：$符合在结尾，则表示是以什么结尾。

[^a-z]是指不是a到z的小写字母。

avatar
文章
阅读
粉丝