灌南网站建设,江山市住房和城乡建设局网站,腾讯企业邮箱版,logo设计大赛网站vue3和vue2的区别有哪些
Diff算法的改进Tree Sharing优化主要的API双向绑定改为es6的proxy原生支持tscomposition API移除令人头疼的this
说说CSS选择器以及这些选择器的优先级
!important 内联样式#xff08;1000#xff09; ID选择器#xff08;0100#xff09; 类选…vue3和vue2的区别有哪些
Diff算法的改进Tree Sharing优化主要的API双向绑定改为es6的proxy原生支持tscomposition API移除令人头疼的this
说说CSS选择器以及这些选择器的优先级
!important 内联样式1000 ID选择器0100 类选择器/属性选择器/伪类选择器0010 元素选择器/伪元素选择器0001 关系选择器/通配符选择器0000
什么是BFC
BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候Block Formatting Context提供了一个环境HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC浮动元素内部子元素的主要受该浮动元素影响两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围把它理解成是一个独立的容器并且这个容器里box的布局与这个容器外的box毫不相干。
触发BFC条件
根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具有 position 为 absolute 或 fixed) 内联块 (元素具有 display: inline-block) 表格单元格 (元素具有 display: table-cellHTML表格单元格默认属性) 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性) 具有overflow 且值不是 visible 的块元素 弹性盒flex或inline-flex display: flow-root column-span: all
跨域的解决方案
jsonpNginx反向代理postMessagedocument.domain脚手架代理
HTTP2和HTTP1有什么区别
HTTP2支持二进制传送实现方便且健壮HTTP1.x是字符串传送HTTP2支持多路复用HTTP2采用HPACK压缩算法压缩头部减小了传输的体积HTTP2支持服务端推送
首屏加载优化
Vue-Router路由懒加载利用Webpack的代码切割使用CDN加速将通用的库从vendor进行抽离Nginx的gzip压缩Vue异步组件服务端渲染SSR如果使用了一些UI库采用按需加载Webpack开启gzip压缩如果首屏为登录页可以做成多入口Service Worker缓存文件处理使用link标签的rel属性设置 prefetch这段资源将会在未来某个导航或者功能-要用到但是本资源的下载顺序权重比较低prefetch通常用于加速下一次导航、preloadpreload将会把资源得下载顺序权重提高使得关键数据提前下载好优化页面打开速度
避免回流和重绘
何时发生回流
添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化包括外边距、内边框、边框大小、高度和宽度等内容发生变化比如文本变化或图片被另一个不同尺寸的图片所替代。页面一开始渲染的时候这肯定避免不了浏览器的窗口尺寸变化因为回流是根据视口的大小来计算元素的位置和大小的
如何避免
CSS
避免使用table布局。尽可能在DOM树的最末端改变class。避免设置多层内联样式。将动画效果应用到position属性为absolute或fixed的元素上避免使用CSS表达式例如calc()CSS3硬件加速GPU加速
JavaScript
避免频繁操作样式最好一次性重写style属性或者将样式列表定义为class并一次性更改class属性避免频繁操作DOM创建一个documentFragment在它上面应用所有DOM操作最后再把它添加到文档中也可以先为元素设置display: none操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘避免频繁读取会引发回流/重绘的属性如果确实需要多次使用就用一个变量缓存起来对具有复杂动画的元素使用绝对定位使它脱离文档流否则会引起父元素及后续元素频繁回流
持续更新中。。。
***如果有需要可以关注我的转转(跳剑舞的刽子手, 更多相关详情面试资源 ***
