[前端面试套餐css+js+vue]第六天

最新推荐文章于 2024-05-05 13:03:06 发布

钧桐

最新推荐文章于 2024-05-05 13:03:06 发布

阅读量2.8k

点赞数 7

分类专栏：面试之我的大厂梦文章标签： node.js javascript 前端

本文链接：https://blog.csdn.net/qq_42136832/article/details/121625672

版权

面试之我的大厂梦专栏收录该内容

30 篇文章 9 订阅

订阅专栏

前端面试套餐

css：如何理解BFC？
- 触发条件
- 应用场景
js：JavaScript原型，原型链是什么？
- 原型
- 原型链
vue：SPA(单页应用)首屏加载速度慢怎么解决？
- 加载慢的原因
- 解决方案

css：如何理解BFC？

我们在页面布局的时候，可能会出现以下情况：

这个元素高度怎么没了？
这两栏布局怎么没法自适应
这两个元素的间距怎么有点奇怪的样子？

这一切归根结底都是BFC的问题

BFC：即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

内部的盒子会在垂直方向上一个接一个的放置
对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关
每个元素的左外边距与包含块的左边界相接触，即使浮动元素也是如此
BFC区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的时形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件

根元素，HTML元素
浮动元素：float值为left，right
overflow值不为visible，为auto，scroll，hidden
display值为inline-block，intable-cell，table-caption，table，inline-table，flex，inline-flex，grid，inline-grid
position值为absolute或fixed

应用场景

防止margin重叠

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。

前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

清楚内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

在这里插入图片描述

.par {
    overflow: hidden;
}

在这里插入图片描述

BFC在计算高度时，浮动元素也会参与，所以我们触发.par元素的BFC！

自适应多栏布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

每个元素的左外边距与包含块的左边界相接触，因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触
在这里插入图片描述

利用BFC区域不会与浮动盒子重叠
所以我们将main变成BFC，一次适应两栏布局

.main {
    overflow: hidden;
}

在这里插入图片描述

js：JavaScript原型，原型链是什么？

原型

JavaScript常被描述为一种基于原型的语言—每个对象拥有一个原型对象

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，知道找到一个名字匹配的属性或者达到原型链的末尾

函数可以有属性。每个函数都有一个特殊的属性叫做原型prototype
原型对象有一个自有属性constructor，这个属性指向该函数
在这里插入图片描述

原型链

原型对象也可能拥有原型，并从中继承方法和属性，一层一层，以此类推。这种关系常被称为原型链，它解释了为何一个对象会拥有定义在其他对象中的属性和方法

在对象实例和它的构造器之间建立一个链接(它是__proto__属性，是从构造函数是prototype属性派生的)，之后通过上溯原型链，在构造器中找到这些属性和方法

vue：SPA(单页应用)首屏加载速度慢怎么解决？

什么是首屏加载？
首屏事件，指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的事件，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中最重要的环节

加载慢的原因

网络延时问题
资源文件体积是否过大
资源是否重复发送请求去加载
加载脚本的时候，渲染内容堵塞

解决方案

减小入口文件积
常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加

在vue-router配置路由的时候，采用动态加载路由的形式

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')
]

静态资源本地缓存
- 采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头
- Service Worker离线缓存
- 利用localStorage

UI框架按需加载
在日常使用UI框架，例如element-UI，或者antd，我们经常性直接饮用整个UI库

import ElementUI from 'element-ui'
Vue.use(ElementUI)

我们可以按需加载

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)

图片资源的压缩
对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。

组件重复打包
假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载

解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks: 3

minChunks为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

开启GZip压缩
拆完包之后，我们再用gzip做一下压缩安装compression-webpack-plugin
在vue.congig.js中引入并修改webpack配置
cnmp i compression-webpack-plugin -D

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

在服务器我们也要做相应的配置如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件我的服务器是用express框架搭建的只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())  // 在其他中间件使用之前调用

使用SSR
SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的，vue应用建议使用Next.js实现服务端渲染

钧桐

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
[前端面试套餐css+js+vue]第六天

前端面试套餐css：如何理解BFC？触发条件应用场景js：JavaScript原型，原型链是什么？原型原型链vue：SPA(单页应用)首屏加载速度慢怎么解决？加载慢的原因解决方案css：如何理解BFC？我们在页面布局的时候，可能会出现以下情况：这个元素高度怎么没了？这两栏布局怎么没法自适应这两个元素的间距怎么有点奇怪的样子？这一切归根结底都是BFC的问题BFC：即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：内部的盒子会在垂直方向上一个接一个的放置对于同一
复制链接

扫一扫

专栏目录