Frontend-Day1——html

发表于 2024-04-28 分类于 Frontend
本文字数： 615 阅读时长 ≈ 1 分钟

iframe元素

嵌套网页
许多网页禁止嵌套(网页中返回体中有iframe禁止)

div和span

**div:**多个div元素包裹的内容会在不同的行显示;

一般作为其他元素的父容器,把其他元素包住,代表一个整体
用于把网页分割为多个独立的部分

**span:**多个span元素包裹的内容会在同一行显示

默认情况下,跟普通文本机会没差别
用于区分特殊文本和普通文本,比如用来显示一些关键字

不常用元素

:强调
:斜体
:代码

常见全局属性

id
class
style
title

字符实体character entity

html文档中插入特殊符号

1 2	<span> </span> <span><</span>

URL和URI

URI:Identifier相当于身份证号

URL:Locator相当于住址

URL是URI的子集

元素语义化Element semantics

defin:用正确的元素做正确的事情.

因为理论上所有的html元素都能实现相同的事情

Link

href: 被链接资源的URL.
rel:指定链接类型,如icon, stylesheet

浏览器渲染流程

Load HTML
Parse HTML(遇到css 不会停止,先把整体结构解析出来)
1. load CSS(与Parse html并行)
2. parse CSS
Create Dom tree(整体结构解析出来后,添加css样式成为render tree)
Display

Frontend-Day4——form

发表于 2024-04-28 分类于 Frontend
本文字数： 4k 阅读时长 ≈ 4 分钟

Table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
      border-collapse: collapse;
    }
    td, th {
      text-align: center;
      border: 1px solid #333;
      padding: 8px 16px;
    }

  </style>
</head>
<body>
  <table>
    <caption>xixihaa</caption>
    <thead>
      <tr>
        <th>排名</th>
        <th>名字</th>
        <th>代码</th>
        <th>价格</th>
        <th>涨跌</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>xixihaha</td>
        <td>oooo</td>
        <td>24</td>
        <td>10%</td>
      </tr>
      <tr>
        <td>1</td>
        <td>xixihaha</td>
        <td>oooo</td>
        <td>24</td>
        <td>10%</td>
      </tr>
      <tr>
        <td>1</td>
        <td>xixihaha</td>
        <td>oooo</td>
        <td>24</td>
        <td>10%</td>
      </tr>
  </tbody>
  </table>
</body>
</html>

Form

input

type:text, password,
经典按钮:button, submit,reset

label提高Input的填写效率

点击input框前的文字即可激活跳转到框中

select和option

1
2
3

<select name="alugg">
    <option value="apple">爱吃苹果</option>
</select>

form

<form action="/abc" method="post">
  <div>
    <label for="username" >
    User:<input id="username" type="text" name="username">
    </label>
    <label for="password">    
      password:<input id="password" type="password" name="password">
    </label>
  </div>
  <div>
      <label for="male">
        <input id="male" type="radio" name="sex" value="male">male
      </label>
      <label for="female">
        <input id="female" type="radio" name="sex" value="female">female
      </label>
  </div>
  <button type="submit">Submit</button>
</form>

结构伪类

nth-child

nth-child(1):是父元素的第1个子元素

nth-child(2n):是父元素的第2,4,6个子元素

nth-chid(-n+5):前5个

nth-last-child:从后往前数

nth-of-type

同样也有nth-last-of-type

第几个符合类型的元素.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box > div:nth-child(4){
        color: red;
    }
    .box > div:nth-of-type(4){
        color: blue;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>xixixha</p>
    <div>list1</div>
    <h1>ooo</h1>
    <div>list2</div>     <!-- red -->
    <div>list3</div>    <!-- blue-->
    <h1></h1>
    <div>list4</div>
    <div>list5</div>
    <div>list</div>
    <div>list</div>
  </div>
</body>
</html>

其他伪类

first-child
first-of-type
only-child
only-of-type
empty

否定结构伪类

:not(xxx):不是xx的才被选中

CSS sprite

一种图像合成技术,把各种小图片合并到一张图片上,然后利用CSS的背景定位来显示对应的图片部分.

好处:

减少网页http请求数量,加快网页相应速度,减少服务器压力
减少图片总大小
解决了图片命名的困扰

获得了精灵图后,去sprite cow上定位具体的各个图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .topbar{
      background-image: url(../../image_files/cc1d8d291ea917c0.png);
      background-repeat: no-repeat;
      display: inline-block;
      }
    i.hot-icon{
      background-position:-205px 0 ;
      width: 103px;
      height: 32px;
    }
  </style>
</head>
<body>
  <i class="topbar hot-icon"></i>
</body>
</html>

Frontend-Day2——CSS

发表于 2024-04-28 分类于 Frontend
本文字数： 2.2k 阅读时长 ≈ 2 分钟

文本属性

text-decoration

none:无任何装饰线
underline:下划线
overline:上划线
line-through:删除线

text-transform(不重要)

设置文本大小写转换

capitalize:单词首字母大写
uppercase:每个字母变大写

text-indent

首行缩进.

text-index:25px;

text-align

定义行内级的元素相对于它的块级元素的位置

left
right
center
justify:两端对齐

ex:比如两个div嵌套,第二个是无法直接通过text-align实现相对于第一个div居中的

方案1:改变第二个div性质,从块级元素变为行内元素 —display:inline-block
方案2:margin: 0 auto

字体相关

font-size

px
em:使用的是默认字体单位,ex:如果默认为16, 2em
百分比:相对于父元素的百分比

font-famaily

用于设置文字的字体名称;一般只设置一次,但可以设置多个以便于适配不同的情况

font-famaily:aaa,vvvv,bbbb;

font-weight

字体粗细

100|200|300…..
normal:400
bold:700

font-style

normal
italic/oblique

line-height

一行文本所占的高度=两行文本基线baseline之间的间距.

baseline:与小写x最底部对齐的线.

font缩写

font: font-style font-weight font-size/line-height font-family

选择器

1.基本选择器

元素: li{ xxxx}
ID: #id3{xxxx}
类: .alugg{xxxx}
通配: *{}

2.属性选择器

基本属性:
- 拥有某个属性:[title]{xxxx}
- 属性等于某个值div[k1=”v1”]{xxxx}
模糊匹配
- [href$=’.png’]{xxx} 末尾等于.png
- [class*=”col-md-“]{xxxx}属性值中间包含col-md-xx
- [attr^=”alugg”]属性值以alugg开头

3.组合选择器

后代选择器(descendant)
- 所有的后代(直接/间接) 以空格分割: .c1 .c2 span{xxx}
- 直接子代以**>**分割: .c1>.c3{xxxx}
兄弟选择器(siblings)
- 相邻兄弟: .c2 + div{}
- 所有兄弟: .c3~div{}
选择器组
- 交集选择器(多个条件符合才选中):div.box{xxx}( 既是div且class=box)
- 并集选择器(只要符合一条就被选中): div, p, h1, h2{xxxx}

4. 伪类选择器

动态伪类:
- a:link{xxx}未被访问过
- a:visited{xxx}访问后
- a:focus{xxx}:a/input元素聚焦
- a:hover{xxx}鼠标悬浮上
- a:active{xxx}点下去还没松手
伪元素
- .box::first-line{xx} 第一行设置样式
- .box::first-letter{xxx}第一个字母设置样式
- .box::before{xxxx}

继承性

如果一个属性具备继承性,那么在该元素上设置后,它的后代元素都可以继承这个属性
如果后代元素自己有设置属性,那么优先使用后代元素自己的属性
与文本相关的属性一般可以继承, 其他的查文档.

层叠性

选择器权重,权重大的生效
- !important>行内css>#id>class,属性选择器>tag
先后顺序,权重相同时,后面的生效.

HTML元素类型

block level:独占父元素一行,h,p,div
inline level:多个行内级元素可以在同一行显示,img,span,a

本质上div和span是一个东西,只不过浏览器给div通过tag选择器添加了一个display:block的属性.

block:独占一行,可以设置宽度和高度(width/height)
inline:和其他行内级元素在同一行显示,不可以设置宽度和高度,宽高由内容决定的.
inline-block:既可以拥有inline的特点和别的元素同一行显示,有可以拥有Block元素设置宽高的特点.
none:隐藏元素

编写注意事项

一般块级元素的可以包含其他任何元素,p元素无法包其他块级元素
行内级元素只能放行内级

元素隐藏

display:none; 不会占据原有空间
visibility:hidden; 会占据元素应该占据的空间
color: rgba(255,0,0,0); 设置颜色:让文本变得透明,但选中的时候会显示.
opcaity:0;设置透明度,并且携带所有的子元素都有一定透明度.

Overflow元素溢出

overflow:hidden;溢出div大小的文字内容就隐藏起来

overflow:scroll; 使用滚轮来显示溢出的部分

overflow:auto;自动设置

CSS样式不生效原因

选择器优先级太低
选择器没选中对应的元素
CSS属性使用的形式不对
- 元素不支持此CSS属性,比如span默认是不支持width和height
- 浏览器不支持此CSS属性,比如旧版本的浏览器不支持一些css module3的某些熟悉
- 被同类型的CSS属性覆盖,如font覆盖font-size

将多个行内级元素中间的空格去除

删除换行符
将父级元素font-size设置为0
设置浮动同一个方向的

Frontend-Day3——BOX

发表于 2024-04-28 分类于 Frontend
本文字数： 1.4k 阅读时长 ≈ 1 分钟

Box模型

width的默认值是:auto

min-width:最小宽度

max-width:最大宽度

padding:填写顺序上右下左

border:三个属性:width, style,color

boder-radius:圆角

margin的上下传递

margin-top:块级元素的顶部线和父元素的顶部线重叠,那么块级元素的margin-top值会传递给父元素

margin-bottom(很少出现):块级元素的顶部线和父元素的底部线重叠,并且父元素高度为auto.则块级元素的margin-bottom值会传递给父元素

如何防止

给父元素设置padding-top/padding-bottom
给父元素设置border
触发BFC:设置overflow为auto

margin的上下折叠(collapse)

垂直方向上相邻的2个margin有可能会合并为1个margin,这种现象叫做collapse(折叠)

两个值取较大的.

outline

外轮廓类似于border,但它不占box的空间.

box-shadow

box-shadow:offset-x offset-y blur-radius spread-radius color

可以通过box generator网站在线查看阴影参数

text-shadow

text-shadow:offset offset-y blur color;

同样也可以通过text generator来查看阴影参数

box-sizing

content-box:padding,border都布置在width,height外边
padding,border都布置在width,height里面

boxsizing添加场景

明确设置width的时候才需要加入boxsizing:border-box,以保证不会撑出父div.

未设置width时,默认值为auto,此时即使你加border,它都不会撑出父div,

场景3 flex布局中,align-items默认值为normal,意味着不写height,可以将子元素高度拉伸至父div,此时你添加border也不会冲出父div

总之,只要是auto自动填充情况下就不需要box-sizing

块级元素水平居中

margin: 0 auto;

行内非替换元素span/a的Box

weight/height不生效
padding:上下会被撑起来但不占空间.左右正常
border:上下会被撑起来但不占空间.左右正常
margin:上下的margin不生效.左右正常

文本太多单行显示

white-space:nowrap; 不换行

overflow:hidden;

text-overflow:ellipsis;

如果是保留两行显示还需要把white-space去掉并加上如下:

display:-webkit-box;

-webkit-line-clamp:2

-webkit-box-orient:vertical;

可能与flex布局起冲突

子元素{

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;}

想要让子元素的文本超出一行时为…

父元素需要设置如下:

父元素:{display:flex; flex:1; overflow:hidden}

Frontend-Day6——flexbox

发表于 2024-04-28 分类于 Frontend
本文字数： 1.7k 阅读时长 ≈ 2 分钟

flexbox

弹性盒子是一种用于按行或按列布局元素的一维布局方法
元素可以膨胀以填充额外的空间,收缩以适应更小的空间

重要概念

flex container:开启flex布局的元素

flex item: flex container里面的直接子元素

flex item布局受flex container属性的设置来控制和布局
flex item不区分块级和行内级元素
flex item默认情况是包裹内容的,但可以设置宽高

通过设置display:flex/inline-flex可以成为flex container

flex: flex container以block-level形式存在
inlin–flex:flex-container以inline-level形式存在

flex container

flex-direction

决定主轴的方向

row:默认值
row-reverse:主轴反转
column-reverse:列主轴反转
column:列变主轴方向

flex-wrap

决定了flex container是单行还是多行

nowrap:默认单行
wrap:多行
wrap-reversse:多行从下面往上面拍

flex-flow

是flex-direction和flex-wrap的简写

flex-flow: ||

justify-content

决定了flex items在 main axis上的对齐方式

flex-start:默认值与main start对齐
flex-end:与main end对齐
center:居中对齐
space-between:
- items之间距离相等,且与start,end两端对齐
space-around:
- items之间距离相等,与start,end之间的距离是items之间距离的一半
space-evenly
- items之间的距离相等
- items与start, end之间的距离等于items之间的距离

align-items

决定了items在cross axis上的对齐方式

flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐
baseline:与基准线对齐
stretch:items在cross axis方向的size为auto时,会自动拉伸至填充flex container
normal:(默认值)在弹性布局中与stretch一样

align-content(不常用)

绝对多行items在cross axis上的对齐方式(类似于justify-content)

flex items

order

可以设置任意整数值越小越排在前面默认为0

align-self

特殊的元素不想遵循align-items设定好的对齐

参数跟align-items一样

flex-grow

决定flex items如何扩展拉伸(空间有多的就拉伸一下)可以看作为每个元素分空间时的权重.

设置为任意非负数字默认值为0,即使有空间也不划分给各个元素.
只有当flex container在main axis方向上有剩余size时,flex-grow才会生效

flex-shrink

和Grow恰恰相反,空间少了就压缩,压缩时的权重.

默认值为1.只有当flex container在main axis方向上超过size时,flex-shrink才会生效

flew-basis

flex-basis和width基本是一个东西,设定一个值.

但面对单词时,flex-basis会自动扩展长度

默认值auto.

flex

flex是flex-grow, flex-shrink,flexbasis的简写属性

grow,shrink, basis

单值:

一个无单位数会被当做flex-grow的值
有效宽度的数会被当做flex-basis的值
关键字none, auto或initial

双值:

第一个必须为无单位数:flex-grow

第二个无单位:flex-shrink;有效宽度:flex baisis

如何处理6个元素放到两行.

每一行最大容量为4,justify-content选的space-bewtten如何解决?

此时第一行正常,第二行两个元素会分到第二行的两边,

可以考虑采取元素组的末尾加3个空span来填充

Frontend-Day8——form

发表于 2024-04-28 分类于 Frontend
本文字数： 375 阅读时长 ≈ 1 分钟

代码规范

京东凹凸实验室手册

代码编写顺序

定位和布局

position

top/bottom

z-index

float/clear

flexbox

展示和可见

display

opacity

visibility

Box

margin

box-shadow

border

border-radius

width/height

padding

Font/text

font-family/font-size/font-weight/font-style

line-height

text-align/text-transform

background

transform

JS规范

函数名和参数括号无空格
多参数,每个参数前加空格
参数括号()与代码块{}之间有空格
循环逻辑代码块前后有空格
形参之间有空格
else前后加一个空格

Frontend-Day7——form

发表于 2024-04-28 分类于 Frontend
本文字数： 1.6k 阅读时长 ≈ 1 分钟

transform

transform是一个CSS属性.

对某一个元素进行某些形变,包括旋转,缩放,倾斜或平移

通常行内级元素不能进行形变

translate(x,y)

平移.

单位可以为px和百分比

百分比是参考自身宽度和高度的.

scale(x,y)

可改变元素的大小,缩放

transform:scale(0.8, 0.8);缩小

应用场景: 鼠标移动到特殊图片,里面的元素放大.

rotate(deg)

常用单位deg, radians,turns

90deg = 100 grad = 0.25 turn = 1.5708rad

整数位顺时针

复数为逆时针

transform-origin

改变当前元素的形变的原点位置

transform-origin: center top

transform-origin: 20px 30px

skew(deg, deg)

让元素倾斜,

transform:sket(15deg, 20deg)

transform简写

transform: translate(50px) scale(1.2) rotate(35deg)

如果分开写后面的会导致覆盖前面的

transition

控制css属性变化的速度,让这个变化成为持续一段时间的过程,而不是立刻生效.

哪些属性发生动画效果Property
何时开始delay
持续多久duration
如何动画 (均速? 还是先快后慢)

并非所有css属性可以执行动画,去mdn查

transition-property:

transition-duration:

transition-delay:

缺点

只能定义开始状态和结束状态,不能定义中间状态
transition无法重复执行,除非一再触发动画
需要在特定状态下才能执行

CSS animation

使用keyframes定义动画序列(每一帧如何执行)
配置动画执行的名称,持续时间,动画曲线,延迟,执行次数,方向等等

keyframes

关键帧使用percentage来指定动画发生的时间点
0%表示动画第一时刻(from),100%最终时刻(to)

水平居中和垂直居中方案

水平居中

1.行内级元素:

设置父元素的text-align:center

2.块级元素:

设置当前块级元素(宽度已设置)的margin:0 auto;

3.绝对定位

元素有宽度的情况下,left0 right0 margin: 0 auto;

4.flex

justify-content:center

垂直居中

1.绝对定位

元素有高度的情况下,top0/bottom0/margin:auto 0;

(弊端:1.绝对定位会让元素脱钩不占标准流位置了. 2.必须得设置height)

2.flex布局

align-items:center

3.top/translate

让元素先向下位移父元素50%,再向上位移自身的50%

position:relative;

top:50%;

transform:translate(0. -50%);

div包裹图片时,图片下方有空隙

原因:本质上是vertical-align默认是baseline基线对齐.

解决方案:

方案一:将图片设置为Block

方案二:vertical-align设置为top/middle/bottom都行

当inline-box中有文本时,它的基线不再是底部,基线编程了最后一行文本的基线

文本baseline是字母x的下方
inline-block默认的baseline是margin-bottom的底部
inline-block有文本时,baseline是最后一行文本x的下方

vertical-align是给行内级的元素上面设置

baseline:基线对齐
top:把行内级合作的顶部和行盒(抽象包裹内容的盒子,)对齐
middle行内级盒子的中心点与父盒基线加上x-height一半的线对齐
bottom把行内级盒子的底部跟行盒底部对齐

line-height就可以来设置包裹内容的行盒的高度

Frontend-Day5——Position

发表于 2024-04-28 分类于 Frontend
本文字数： 1.7k 阅读时长 ≈ 2 分钟

Position

static(默认)
—–定位元素——
relative
absolute
fixed
sticky

static:

按照normal flow布局
left,right,top都无作用

relative:

参照物是自己原本的位置,不脱离文档流.

**应用场景:**在不影响其他元素位置的前提下,对当前元素进行微调

fixed

参照物是浏览器Viewport,元素脱离文档流,可以通过left,xxx定位

当画布滚动时,固定不动

absolute

参照物是已经定位的祖先元素，完全脱离文档流

如果找不到这样祖先元素,相对的就是视口viewport

sticky

相对定位和固定(绝对)定位的结合体
运行被定位的元素表现得像相对应为一样,直到它滚动到某个阈值点
达到这个阈值点时,它就会变成固定(绝对)定位

ex:导航栏, 平常就待在该待的位置,一滚动下拉,它一直停留在浏览器最上面

绝对定位元素特点(absolute/fixed)

随意设置宽高
宽高默认由内容决定
不再标准流的约束
- 不再严格按照从上到下,从左到右排布
- 不再严格区分块级,行内级,行内块级级的很多特性都会消失
不再给父元素汇报宽高
脱标元素的内部默认还是按照标准流布局

对于绝对定位元素:

父元素的宽度 = 绝对定位元素的宽度+left+right+margin_left+margin_right

高度同理

ex:元素垂直,水平均居中

子元素{

position:absolute;
width:xxpx;
height:xxpx;

left:0

right:0

top:0

bottom:0

margin:auto

}

ps:auto

对于width:auto

行内非替换元素:width:包裹的内容
块级元素:width:包裹块的宽度
绝对定位元素:width:包裹内容

Z-index

兄弟关系时:
- Z-index越大越在上面
- Z-index相等,后面的元素在上面
不是兄弟关系
- 各自从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较
- 而且这2个定位元素必须有设置z-index的具体数值

Float

基本特性

元素一旦浮动后,脱离标准流
- 朝着向左或向右方向移动.直到自己边界紧贴包含块(一般是父元素)或其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面
浮动元素之间不能重叠
- 一个元素浮动,另一个浮动元素已经在那个位置,后浮动的元素将紧贴前一个浮动元素
- 如果水平方向剩余的空间不够显示浮动元素,浮动元素将向下移动
浮动元素不能与行内级内容层叠,行内级内容将会被浮动元素推出
- 比如行内级元素,inline-block元素,块级元素的文字内容
行内级元素,inline-block元素浮动后,其顶部将与所在行对齐

Ex:

多个元素平行浮动排列,遇到宽度不够的情况.

如一个大盒子宽度1190中平行放5个宽度230,margin-right:10px小盒子,合计1200px的问题

方案一:此时可以在五个小盒子外部套一个盒子a并设置Margin-right:-10px,这样盒子a的宽度会自动变为1200

方案二:通过nth-child(5n)将第五个盒子的margin-right设置为0,

高度塌陷

由于浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度
- 父元素计算总高度时,就不会计算浮动子元素的高度导致了高度坍塌的问题
解决父元素高度坍塌问题的过程,一般叫做清浮动
清浮动的目的是
- 让父元素计算总高度时,把浮动子元素的高度算进去

clear

clear属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面

left:要求元素的顶部低于之前生成的所有左浮动元素的底部
right:要求元素的顶部低于之前生成的所有右浮动元素的底部
both:要求元素的顶部低于之前生成的所有浮动元素的底部
none:默认值,无特殊要求

解决方案:

给浮动元素的父元素加一个clear-fix类就可以了

.clear-fix::after{
  content:"";
  clear: both;
  display: block;
  visibility:hidden;
  height:0;
}

Frontend-Day9——This

发表于 2024-04-28 分类于 Frontend
本文字数： 4.4k 阅读时长 ≈ 4 分钟

This的指向

绑定

默认绑定

独立的函数调用我们理解成函数没有被绑定到某个对象上进行调用


  <script>
    function foo() {
      console.log(this)
    }


    //1.直接调用
    foo()   //window

    //2.函数定义在对象中,但是独立调用
    var obj = {
      name:"why",
      bar:function() {
        console.log(this)
      }
    }
    var xx = obj.bar
    xx() //window
    
    //3.高阶函数
    function test(fn) {
      fn()
    }
    test(obj.bar)
  </script>

隐式绑定

在调用的对象内部有一个对函数的引用(比如一个属性)

// 隐式绑定

function foo(){
 console.log("xx")
}
var obj = {
 bar:foo
}
obj.bar()

new绑定

// new绑定

function foo() {
 console.log(this)
 this.name ="oooo"
}

new foo()

显式绑定

如果不希望在对象内部包含这个函数的引用,但同时有希望在这个对象上强制调用

则使用apply或call方法

apply第一个参数绑定this,第二个参数:传入额外的实参,以数组的形式 —

call第一个参数绑定this,第二个参数:后续参数是以多参数的形式传递作为实参

 
var obj = {
 name: "why"
}
function foo() {
 console.log("foo",this)
}
foo.call(obj)

bind绑定

function foo() {

 console.log(this)

}

var obj = {name:"why"}

var bar = foo.bind(obj)

bar() //this  -> obj

内置函数的调用绑定

setTimeout(function() {
 console.log("setTimeout",this) //window
},1000)


box.onclick = function(){
 console.log(this) //box
}


var name = ["abc", "sss"]
var obj = {name:"why"}
names.forEach(function (item) {
 console.log(this)  //obj
}, obj)

规则优先级

显式绑定高于隐式绑定

new绑定优先级高于隐式绑定

new不能和apply,call同时使用

new >bing/apply/call>隐式>默认

箭头函数

var names = ["abc", "bca", "nba"]
names.forEach((item, index, arr) => {
 console.log(item,index,arr)
})

names.forEach(item => {
 console.log(item)
})


var nums = [20, 30, 11, 15, 111]
//1.只有一个参数可以去掉()
var newNums = nums.filter(item => {
 return item%2===0
})
console.log(newNums)

//2.只有一行代码可以去掉{},并且这行代码返回值会作为函数返回值
var newNUms = nums.filter(item => console.log('haha'))

//3.如果返回值是一个对象,返回值需要加上()
var arrFn = () => ({ name:"alugg"})
console.log(arrFn())


var newNums = nums.filter(item => item%2===0).map(item => item*item).reduce((prevValue,item)=> prevValue+item) 
console.log(newNums)

四道面试题

var name = "window"
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name)
  }
};

function sayName() {
  var ss =person.sayName;

  ss() //window
  person.sayName(); //person
  (person.sayName)(); //person
  (b = person.sayName)(); //window
}

sayName()

var person1 = {
  name: 'person1',
  foo1: function(){
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function() {
    return function() {
      console.log(this.name)
    }
  },
  foo4: function() {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = {name:'person2'}

perons1.foo1();//person1
person1.foo1.call(person2);//person2

person1.foo2();//window
person1.foo2.call(person2);//window

person1.foo3()();//window 直接
person1.foo3.call(person2)();//window直接
person1.foo3().call(person2);//person2

person1.foo4()();//person1
person1.foo4.call(person2)();//person2
person1.foo4().call(person2);//person1

function Person(name){
  this.name = name
  this.foo1 = function() {
    console.log(this.name)
  }
  this.foo2 = () => console.log(this.name)
  this.foo3 = function () {
    return function() {
      console.log(this.name)
    }
  }
  this.foo4 = function() {
    return () => {
      console.log(this.name)
    }
  }
}

var person1 = new Person('person1')
var person2 = new Person('person2')

person1.foo1() //person1 隐
person1.foo1.call(person2) //person2 显

person1.foo2() //person1
person1.foo2.call(person2) //person1

person1.foo3()() //window
person1.foo3.call(person2)()//window 默认帮等
person1.foo3().call(person2) //person2

person1.foo4()() //person1
person1.foo4.call(person2)() //person2
person1.foo4().call(person2) //person1

function Person(name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2 :function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}

person1.obj.foo1()() //window 默认
person1.obj.foo1.call(person2)() //window
person1.obj.foo1().call(person2) //person2

person1.obj.foo2()()  // obj
person1.obj.foo2.call(person2)() //person2
person1.obj.foo2().call(person2) //obj

Frontend-Day10——浏览器渲染

发表于 2024-04-28 分类于 Frontend
本文字数： 1.5k 阅读时长 ≈ 1 分钟

浏览器渲染原理

回流reflow

第一次确定节点的大小和位置,称之为布局layout
之后对节点的大小,位置修改重新计算称之为回流

如何引起回流

DOM结构发生改变(添加新的节点或者移除节点)
改变了布局(修改了width,height,padding,font-size等值)
窗口resize(修改窗口的尺寸)
调用getComputedStyle方法获取尺寸,位置信息

回流一定会引起重绘,所以回流是非常消耗性能的事情

重绘repaint

第一次渲染内容称之为绘制(paint)
之后重新渲染称之为重绘

如何引起重绘

背景色,文字颜色,边框颜色,样式

在开发中尽量避免发生回流

修改样式时尽量一次性修改
- 通过cssText,比如通过添加class修改
尽量避免频繁的操作DOM
- 可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成,再一次性的操作
尽量避免通过getComputedStyle获取尺寸,位置信息
对某些元素使用position的absolute或fixed
- 并不是不会引起回流,而是开销相对较小,不会对其他元素造成影响

合成composite

多个图层好处,一个图层进行了修改并不会影响其他图层导致其他图层需要重新渲染

绘制的过程,可以将布局后的元素绘制到多个合成图层中
- 浏览器的一种优化手段
默认情况下,标准流的内容都是被绘制在同一个图层Layer中
一些特殊的属性,会创建一个新的合成层,并且新的图层可以利用GPU来加速绘制
- 因为每个合成层都是单独渲染的

常见的形成新的合成层的一些属性

3D transforms
video, canavas, iframe
opacity动画转换
position:fixed
will-change:提前告诉浏览器元素可能发生哪些变化
animation或transition设置了opacity,transform

分层确实可以提高性能,但是以内存管理为代价,因此不应作为web性能优化策略的一部分过度使用.

script元素和页面解析的关系

浏览器在解析HTML的过程总遇到了script元素是不能继续构建DOM树
它会停止继续构建,首先下载js代码,并且执行js的脚本
只有等到js脚本执行结束后,才会继续解析HTML,构建DOM树

这么做的原因,因为JS涉及大量DOM操作,如果等到DOM树构建完成并且渲染好了再执行JS会造成严重的回流和重绘,影响页面性能.

但这也会带来新问题,现代网页开发中,脚步往往比HTML页面更重,处理时间需要更长;所有会造成页面的解析阻塞,在脚步下载执行完成之前,用户在界面上什么都看不到

为解决这个问题script提供了两个属性defer,async

(需要注意,为了达到更好的用户体验,呈现引擎会力求尽快将内容显示在屏幕上,它不必等到整个HTML文档解析完毕之后,就会开始构建呈现树和设置布局)

defer

defer属性告诉浏览器不要等待JS下载,而继续解析HTML,构建DOM Tree

脚本会由浏览器来进行下载,但是不会阻塞DOM Tree的构建过程
脚本提前下载好了,它会等待DOM Tree构建完成,在DOMContentLoaded事件之前先执行defer中的代码

DOMContentLoaded总是会等待defer中的代码先执行完成

推荐将defer的脚本放入head中.

async

async是让一个脚本完全独立的:

浏览器不会因async脚步而阻塞
async脚步不能保证顺序,它是独立下载,独立运行,不会等待其他脚本
async不会能保证在DOMContentLoaded之前或之后执行

defer通常用于需要再文档解析后操作DOM的js代码,并且对多个script文件有顺序要求