薄弱项

最新推荐文章于 2024-09-04 17:51:57 发布

前端黑

最新推荐文章于 2024-09-04 17:51:57 发布

阅读量452

点赞数 1

分类专栏：平时的碎片

本文链接：https://blog.csdn.net/qq_38964133/article/details/96017851

版权

平时的碎片专栏收录该内容

10 篇文章 0 订阅

订阅专栏

px和rem和em

1.px相对于屏幕分辨率

2.em相对于父元素

3.rem单位名称是相对于root的长度单位，即相对于html

薄弱点

h5 css3动画 vue-router 原生js vuex

最近突破这一些阶段

浏览器读取css规则的顺序是从右到左

浏览器在渲染，构建render树的时候，每次拿出一个dom节点，然后进行匹配相应的css，

因为css嵌套太多层，如果从左到右匹配，最后会发现很多的规则不匹配，如果从右开始读取，

就会减少这种无效的匹配。

css中的content

配合伪元素进行使用意思在某元素之前之后插入元素

比如下面这种

<style>
    p::before {
        content: "red";
    }
    </style>
</head>

<body>
    <div>
        <p>hahah</p>
    </div>

####元素的竖向的百分比设定是相对于容器的高度吗

不是是相对于容器的宽度

p{
margin-top: 20%;
}
父容器的width是400px  此时p的margin-top伪80px

import导入css样式出现的问题

会出现“文档样式短暂的失效” 简称FOUC

原因就是样式表晚于结构性html加载，加载到此样式表时，页面将停止之前的渲染

等待次样式表被下载和解析后，在重新渲染页面，期间将导致短暂的花屏。

解决的方法就是link标签进行加载

js进行控制link中的css样式，对@import中的样式无法操作

前端工程化

前端的不断壮大，需要进行模块化进行管理，需要考虑性能的问题，前端的编写为了更好css的样式，

采用了预编译语言，各个mv框架的流行，前后端的分离，前端已时一个大的方向，必须按照一定的模块与组件进行管理。

vue的路由

路由嵌套

路由中含有里面有子路由

#####路由守卫

接收的参数主要有三个 to from next

router.beforeEach((to, from,next) = >{
const nextRoute = ['index'];
let isLogin = global.isLogin;
if(nextRoute.includes(to.name)){
if(!isLogin){
next({path: '/login'});
}}
if(to.name === "login"){
if(isLogin){
next({path: '/home'});
}}
next();//这个可以让程序往下继续执行
})

实现懒加载

在移动端的时候基本使用单页面进行开发的模式，有时候项目比较庞大，首次访问的时候，加载的东西过多，会影响用户体验，可以使用懒加载

new VueRouter ({
    routes:[
        {
            path: 'index',
            component (resolve){
                resolve.ensure([], ()=>{
                    require('src/home/index.vue')
                },'index');
            }
        },
    ]
})