![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端知识点
前端世界的蒋小姐
这个作者很懒,什么都没留下…
展开
-
前端知识点(九):Webpack打包原理
webpack将项目看作一个整体,通过给定的一个主文件,webpack将从这个主文件开始找到项目中所有的依赖文件,使用loaders类处理,最后打包成一个或多个浏览器可识别的js文件。后续再补充原创 2021-12-16 11:59:58 · 950 阅读 · 0 评论 -
前端知识点(八):web性能优化、浏览器缓存机制、浏览器从输入一个网址到页面渲染的全过程、回流和重绘
1.web性能优化(1)减少http请求资源和合并和压缩,合并css图片,开启服务端gzip压缩(压缩文本资源),lazyLoad(懒加载图片)资源的合并与压缩:(1)合并即减少http的请求数量,将多个js文件整合为一个js文件,将多个css文件整合为一个css文件,(2)压缩即减少http请求的大小,对html、css、js文件进行压缩(minify/gzip),对图片压缩(精灵图和webP--图片压缩成webp格式)(2)使用缓存HTTP协议缓存请求,离线缓存manif原创 2021-12-16 11:21:44 · 1827 阅读 · 0 评论 -
前端知识点(七):三栏布局--两端宽度固定,中间宽度自适应
方法一:浮动<div class="m1"> <div class="left">left1</div> <div class="right">right</div> <div class="main">main</div></div>左右模块各自左右浮动,中间模块设置margin使宽度自适应。中间模块最后加载。 .m1 { width:100%;..原创 2021-12-15 11:39:09 · 522 阅读 · 0 评论 -
前端知识点(六):网页中有大量图片时加载很慢,如何优化?
1.图片懒加载在图片未可视区域加一个滚动条事件,判断图片位置与浏览器顶端和页面的距离,当图片到浏览器顶端的距离,小于图片到页面的距离时,优先加载。2.图片预加载将当前展示图片的前一张和后一张优先加载3.使用csssprite或者svgsprite...原创 2021-12-14 16:49:10 · 4570 阅读 · 0 评论 -
前端知识点(五):Web标准的网页(结构层、表现层、行为层)以及DOCTYPE
1.网页分为以下三个层,结构层:指的是HTML或者XHTML,表示网页内容的结构表现层:指的是CSS,表示网页内容的样式(如何显示)行为层:指的是JavaScript,表示内容对事件做出反应2.!DOCTYPE用于声明文档类型,使用哪种html或者xhtml规范来解析文档...原创 2021-12-14 16:40:05 · 2115 阅读 · 0 评论 -
前端知识点(四):MVC模型、MVP模型、MVVM模型
1.MVC模型(1)概念mvc是模型-视图-控制器,model用于管理数据,view用于渲染视图展现界面,controller用于处理交互视图可以直接访问模型,所以视图里面会包含模型信息,mvc关注的是模型不变,所以在mvc中,模型不依赖视图,但是视图依赖模型(2)通信(原理)模型层改变时,视图层直接随之改变,视图层传送数据到控制层,控制层接收数据、编写业务逻辑更新模型层,从而再次更新视图。如此反复。(3)特点优点:抽离出controller,模块化程度高,新增编辑功能.原创 2021-12-14 16:31:25 · 1204 阅读 · 0 评论 -
前端知识点(三):Flex布局(弹性布局)
1.定义flex布局(1)display:flex;(2)行内元素 display:inline-flex;父元素中设置为flex布局,形成flex容器。子元素的float、clear、vertical-align属性将失效。2.Flex容器属性--定义在父元素中排列:(1)flex-direction:决定了主轴的方向(子元素的排列方向)row:(默认)水平方向从左到右为主轴;row-reverse:水平方向从右到左为主轴;column:垂直方向从上到下为主轴;co原创 2021-12-14 14:32:00 · 1339 阅读 · 0 评论 -
前端知识点(二):在CSS中,子元素在父元素中--居中
1.水平居中子父元素宽度固定,(1)子元素设置margin:auto; (2) 父元素设置text-align:center;display:inline-block;注意,子元素不能设置浮动,否则居中失效。2.水平垂直居中(1)绝对定位+margin(子元素)方法一:position: absolute;top: 50%;left: 50%;margin-top: -50px;//自身宽高的一半margin-left: -50px;方法二:positio..原创 2021-12-13 14:28:47 · 533 阅读 · 0 评论 -
前端知识点(一):BFC(块级格式化上下文)+清除浮动
1.BFC---块级格式化上下文只有块级元素能触发BFC,触发了BFC的盒子是一个独立布局的容器,内容元素和外部元素不会互相影响。(1)触发BFC的方式根元素 浮动 float:left/right; 固定或绝对定位 position:absolute/fixed; overflow不为visible ...原创 2021-12-13 11:57:38 · 273 阅读 · 0 评论