前端（html,css,js）八股文,搞起来

瑛觑
2,103 阅读32分钟

八股文: HTML && CSS

HTML5 新特性、语义化

  1. 概念：

    HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】

  2. 语义化标签：

    header nav main article section aside footer

  3. 语义化的优点:

    • 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
    • 代码结构清晰，易于阅读，
    • 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
    • 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

HTML5有哪些更新

1. 语义化标签

  • header：定义文档的页眉（头部）；
  • nav：定义导航链接的部分；
  • footer：定义文档或节的页脚（底部）；
  • article：定义文章内容；
  • section：定义文档中的节（section、区段）；
  • aside：定义其所处内容之外的内容（侧边）；

2. 媒体标签

（1） audio：音频 （2）video视频 （3） 表单 （4） 进度条、度量器

src和href的区别

src和href都是用来引用外部的资源，它们的区别如下：

  • src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
  • href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

行内元素有哪些？块级元素有哪些？ 空元素有那些？

  • 行内元素有：a b span img input select strong；
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

  • 常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

title与h1的区别、b与strong的区别、i与em的区别？

  • strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
  • title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
  • i内容展示为斜体，em表示强调的文本

CSS 选择器及优先级

选择器

  • id选择器(#myid)
  • 类选择器(.myclass)
  • 属性选择器(a[rel="external"])
  • 伪类选择器(a:hover, li:nth-child)
  • 标签选择器(div, h1,p)
  • 相邻选择器（h1 + p）
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器(*)

优先级：

  • !important
  • 内联样式（1000）
  • ID选择器（0100）
  • 类选择器/属性选择器/伪类选择器（0010）
  • 元素选择器/伪元素选择器（0001）
  • 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

display:none与visibility:hidden的区别

这两个属性都是让元素隐藏，不可见。两者区别如下：

（1）在渲染树中

  • display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；
  • visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

（2）是否是继承属性

  • display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
  • visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

（3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

position 属性的值有哪些及其区别

固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。

默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

box-sizing属性

box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】

border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】

inherit：继承父元素的 box-sizing 值。

CSS 盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)

怪异盒模型： 一个块的总宽度 = width+margin（左右）（既 width 已经包含了 padding 和 border 值）

BFC（块级格式上下文）

BFC的概念

BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。

BFC的原理布局规则

  • 内部的Box会在垂直方向，一个接一个地放置
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反
  • BFC的区域不会与float box重叠
  • BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
  • 计算BFC的高度时，浮动元素也参与计算高度
  • 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

如何创建BFC？

  • 根元素，即HTML元素
  • float的值不为none
  • position为absolute或fixed
  • display的值为inline-block、table-cell、table-caption
  • overflow的值不为visible

BFC的使用场景

  • 去除边距重叠现象
  • 清除浮动（让父元素的高度包含子浮动元素）
  • 避免某元素被浮动元素覆盖
  • 避免多列布局由于宽度计算四舍五入而自动换行

让一个元素水平垂直居中

  • 水平居中

    • 对于 行内元素 : text-align: center;

    • 对于确定宽度的块级元素：

      （1）width和margin实现。margin: 0 auto;

      （2）绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative

    • 对于宽度未知的块级元素

      （1）table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。

      （2）inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。

      （3）绝对定位+transform，translateX可以移动本身元素的50%。

      （4）flex布局使用justify-content:center

  • 垂直居中

    1. 利用 line-height 实现居中，这种方法适合纯文字类
    2. 通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过margin实现自适应居中
    3. 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
    4. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
    5. table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

隐藏页面中某个元素的方法

1.opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如click 事件，那么点击该区域，也能触发点击事件的

2.visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件 ，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

3.display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

该问题会引出 回流和重绘

用CSS实现三角符号

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}
复制代码

页面布局

1.Flex 布局

这一块内容看 Flex 布局教程 就够了。 布局的传统解决方案，基于盒状模型，依赖 display + position + float 。它对于那些特殊布局非常不方便。

Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。

容器的属性：

  • flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
  • flex-flow： .box { flex-flow: || ; }
  • justify-content：对其方式，水平主轴对齐方式
  • align-items：对齐方式，竖直轴线方向
  • align-content

项目的属性（元素的属性）：

  • order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
  • flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
  • flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
  • flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
  • flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
  • align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
  • align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

2.Rem 布局

首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例 如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点：可以快速适用移动端布局，字体，图片高度

缺点：

①目前 ie 不支持，对 pc 页面来讲使用次数不多；
②数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
③在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

3.百分比布局

通过百分比单位 " % " 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。 直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相 对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是垂直方向还是水平方向，都相对于直接父元素的 width。 除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。

缺点：

（1）计算困难 （2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

4.浮动布局

浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。

优点

这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

如何使用rem或viewport进行移动端适配

rem适配原理：

改变了一个元素在不同设备上占据的css像素的个数

rem适配的优缺点

  • 优点：没有破坏完美视口
  • 缺点：px值转换rem太过于复杂(下面我们使用less来解决这个问题)

viewport适配的原理

viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的

viewport适配的优缺点

  • 在我们设计图上所量取的大小即为我们可以设置的像素大小，即所量即所设
  • 缺点破坏完美视口

清除浮动的方式

  • 添加额外标签
<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>
复制代码
  • 父级添加overflow属性，或者设置高度
  • 建立伪类选择器清除浮动
//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}

CSS 优化和提高性能的方法有哪些？

加载性能：

（1）css压缩：将写好的css进行打包压缩，可以减小文件体积。

（2）css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。

（3）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

（4）尽量少的去对标签进行选择，而是用class。

（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

（4）属性值为0时，不加单位。

（5）属性值为浮动小数0.**，可以省略小数点之前的0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

（7）不使用@import前缀，它会影响css的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

（2）样式与内容分离：将css代码定义到外部css中。

八股文:JavaScript与es6

数据类型

JavaScript有哪些数据类型，它们的区别？

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

JS中的数据类型检测方案

1.typeof

console.log(typeof 1);               // number
console.log(typeof true);            // boolean
console.log(typeof 'mc');            // string
console.log(typeof Symbol)           // function
console.log(typeof function(){});    // function
console.log(typeof console.log());   // function
console.log(typeof []);              // object 
console.log(typeof {});              // object
console.log(typeof null);            // object
console.log(typeof undefined);       // undefined
复制代码

优点：能够快速区分基本数据类型

缺点：不能将Object、Array和Null区分，都返回object

2.instanceof

console.log(1 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true
复制代码

优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象

缺点：Number，Boolean，String基本数据类型不能判断

3.Object.prototype.toString.call()

var toString = Object.prototype.toString;
console.log(toString.call(1));                      //[object Number]
console.log(toString.call(true));                   //[object Boolean]
console.log(toString.call('mc'));                   //[object String]
console.log(toString.call([]));                     //[object Array]
console.log(toString.call({}));                     //[object Object]
console.log(toString.call(function(){}));           //[object Function]
console.log(toString.call(undefined));              //[object Undefined]
console.log(toString.call(null));                   //[object Null]
复制代码

优点：精准判断数据类型

缺点：写法繁琐不容易记，推荐进行封装后使用

### null和undefined区别

  • 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null
  • undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

### 0.1+0.2 ! == 0.3，如何让其相等

  • toFixed(num)
parseFloat((0.1+0.2).toFixed(10)) ===0.3
  • 或者使用将浮点数转化成整数计算。因为整数都是可以精确表示的。
0.1+0.2 => (0.1*10+0.2*10)/10

let && const && var

ES6之前创建变量用的是var,之后创建变量用的是let/const

区别：

  1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。 let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。 const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，且不能修改。
  2. var可以先使用，后声明，因为存在变量提升；let必须先声明后使用。
  3. var是允许在相同作用域内重复声明同一个变量的，而let与const不允许这一现象。
  4. 在全局上下文中，基于let声明的全局变量和全局对象GO（window）没有任何关系 ; var声明的变量会和GO有映射关系；
  5. 会产生暂时性死区：

暂时性死区是浏览器的bug：检测一个未被声明的变量类型时，不会报错，会返回undefined
如：console.log(typeof a) //undefined
而：console.log(typeof a)//未声明之前不能使用
let a

  1. let /const/function会把当前所在的大括号(除函数之外)作为一个全新的块级上下文，应用这个机制，在开发项目的时候，遇到循环事件绑定等类似的需求，无需再自己构建闭包来存储，只要基于let的块作用特征即可解决

判断数组的方式有哪些

  • 通过Object.prototype.toString.call()做判断
  • 通过原型链做判断
  • 通过ES6的Array.isArray()做判断
  • 通过instanceof做判断
  • 通过Array.prototype.isPrototypeOf

八股文: 网络

1. HTTP 和 HTTPS

1.http 和 https 的基本概念

http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。 https:是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

2.http 和 https 的区别及优缺点？

  • http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中被窃取、改变，确保数据的完整性(当然这种安全性并非绝对的，对于更深入的 Web 安全问题，此处暂且不表)。
  • http 协议的默认端口为 80，https 的默认端口为 443。
  • http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
  • https 缓存不如 http 高效，会增加数据开销。
  • Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。
  • SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗。

3.https 协议的工作原理

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：

  1. 客户端使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。
  2. web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。
  3. 客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
  4. 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
  5. web 服务器通过自己的私钥解密出会话密钥。
  6. web 服务器通过会话密钥加密与客户端之间的通信。

2. TCP三次握手

  1. 第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。
  2. 第二次握手：服务器收到syn包并确认客户的SYN（ack=j+1），同时也发送一个自己的SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
  3. 第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

3.事件触发三阶段

  • window 往事件触发处传播，遇到注册的捕获事件会触发
  • 传播到事件触发处时触发注册的事件
  • 从事件触发处往 window 传播，遇到注册的冒泡事件会触发

4.HTTP 请求跨域问题

  1. 跨域的原理 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
    同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。 跨域原理，即是通过各种方式，避开浏览器的安全限制。

解决方案

最初做项目的时候，使用的是jsonp，但存在一些问题，使用get请求不安全，携带数据较小，后来也用过iframe，但只有主域相同才行，也是存在些问题，后来通过了解和学习发现使用代理和proxy代理配合起来使用比较方便，就引导后台按这种方式做下服务器配置，在开发中使用proxy，在服务器上使用nginx代理，这样开发过程中彼此都方便，效率也高；现在h5新特性还有 windows.postMessage()

  • JSONP： ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

    步骤：

    1. 去创建一个script标签
    2. script的src属性设置接口地址
    3. 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
    4. 通过定义函数名去接受返回的数据
    //动态创建 script
var script = document.createElement('script');

// 设置回调函数
function getData(data) {
    console.log(data);
}

//设置 script 的 src 属性，并设置请求地址
script.src = 'http://localhost:3000/?callback=getData';

// 让 script 生效
document.body.appendChild(script);
复制代码

    JSONP 的缺点:
    JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据。

  • document.domain 基础域名相同 子域名不同

  • window.name 利用在一个浏览器窗口内，载入所有的域名都是共享一个window.name

  • CORS CORS(Cross-origin resource sharing)跨域资源共享 服务器设置对CORS的支持原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求

  • proxy代理 目前常用方式,通过服务器设置代理

  • window.postMessage() 利用h5新特性window.postMessage()

5.存储 Cookie、sessionStorage、localStorage 的区别

相同点：

  • 存储在客户端

不同点：

  • cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+
  • cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除
  • cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地

6.渲染机制

从输入URL到页面加载的全过程

  1. ⾸先做 DNS 查询，如果这⼀步做了智能 DNS 解析的话，会提供访问速度最快的 IP 地址

回来

  1. 接下来是 TCP 握⼿，应⽤层会下发数据给传输层，这⾥ TCP 协议会指明两端的端⼝号，

然后下发给⽹络层。⽹络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转

路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层⾯的传输了

  1. TCP 握⼿结束后会进⾏ TLS 握⼿，然后就开始正式的传输数据

  2. 数据在进⼊服务端之前，可能还会先经过负责负载均衡的服务器，它的作⽤就是将请求合

理的分发到多台服务器上，这时假设服务端会响应⼀个 HTML ⽂件

  1. ⾸先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会

报错，如果 300 的话会进⾏重定向，这⾥会有个重定向计数器，避免过多次的重定向，

超过次数也会报错

  1. 浏览器开始解析⽂件，如果是 gzip 格式的话会先解压⼀下，然后通过⽂件的编码格式知

道该如何去解码⽂件

  1. ⽂件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有 CSS 的话会去

构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer

，前者会并⾏进⾏下载并执⾏ JS，后者会先下载⽂件，然后等待 HTML 解析完成后顺序执⾏，如果以上都没有，就会阻塞住渲染流程直到 JS 执⾏完毕。遇到⽂件下载的会去下

载⽂件，这⾥如果使⽤ HTTP 2.0 协议的话会极⼤的提⾼多图的下载效率。

  1. 初始的 HTML 被完全加载和解析后会触发 DOMContentLoaded 事件

  2. CSSOM 树和 DOM 树构建完成后会开始⽣成 Render 树，这⼀步就是确定⻚⾯元素的布

局、样式等等诸多⽅⾯的东⻄

  1. 在⽣成 Render 树的过程中，浏览器就开始调⽤ GPU 绘制，合成图层，将内容显示在屏

幕上了

浏览器的渲染机制⼀般分为以下⼏个步骤

  • 处理 HTML 并构建 DOM 树。
  • 处理 CSS 构建 CSSOM 树。
  • 将 DOM 与 CSSOM 合并成⼀个渲染树。 4. 根据渲染树来布局，计算每个节点的位置。 5. 调⽤ GPU 绘制，合成图层，显示在屏幕上。

重绘（Repaint）和回流（Reflow）

  • 重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
  • 重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

如何触发重排和重绘？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

  • 添加、删除、更新DOM节点
  • 通过display: none隐藏一个DOM节点-触发重排和重绘
  • 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
  • 移动或者给页面中的DOM节点添加动画
  • 添加一个样式表，调整样式属性
  • 用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排？

  1. 集中改变样式，不要一条一条地修改 DOM 的样式。

  2. 不要把 DOM 结点的属性值放在循环里当成循环里的变量。

  3. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

  4. 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

  5. 尽量只修改position：absolute或fixed元素，对其他元素影响不大

  6. 动画开始GPU加速，translate使用3D变化

  7. 提升为合成层

    将元素提升为合成层有以下优点：

    • 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
    • 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
    • 对于 transform 和 opacity 效果，不会触发 layout 和 paint

    提升合成层的最好方式是使用 CSS 的 will-change 属性：

    #qx {
  will-change: transform;
}

性能

DNS 预解析

  • DNS 解析也是需要时间的，可以通过预解析的⽅式来预先获得域名所对应的 IP。

缓存

  • 强缓存和协商缓存
  • 实现强缓存可以通过两种响应头实现： Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求， state code 为 200
  • 如果缓存过期了，我们就可以使⽤协商缓存来解决问题。协商缓存需要请求，如果缓存有效会返回 304。

预加载

  • 在开发中，可能会遇到这样的情况。有些资源不需要⻢上⽤到，但是希望尽早获取，这时候就可以使⽤预加载。

  • 预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使⽤以下代码开启预加载

<link rel="preload" href="http://example.com">
  • 预加载可以⼀定程度上降低⾸屏的加载时间，因为可以将⼀些不影响⾸屏但重要的⽂件延后加载，唯⼀缺点就是兼容性不好。

预渲染

  • 可以通过预渲染将下载的⽂件预先在后台渲染，可以使⽤以下代码开启预渲染
<link rel="prerender" href="http://example.com">
  • 预渲染虽然可以提⾼⻚⾯的加载速度，但是要确保该⻚⾯百分百会被⽤户在之后打开，否则就⽩⽩浪费资源去渲染

优化渲染过程

懒执⾏

  • 懒执⾏就是将某些逻辑延迟到使⽤时再计算。该技术可以⽤于⾸屏优化，对于某些耗时逻辑并不需要在⾸屏就使⽤的，就可以使⽤懒执⾏。懒执⾏需要唤醒，⼀般可以通过定时器或者事件的调⽤来唤醒。

懒加载

  • 懒加载就是将不关键的资源延后加载。懒加载的原理就是只加载⾃定义区域（通常是可视区域，但也可以是即将进⼊可视区域）内需要加载的东⻄。对于图⽚来说，先设置图⽚标签的 src 属性为⼀张占位图，将真实的图⽚资源放⼊⼀个⾃定义属性中，当进⼊⾃定义区域时，就将⾃定义属性替换为 src 属性，这样图⽚就会去下载资源，实现了图⽚懒加载。懒加载不仅可以⽤于图⽚，也可以使⽤在别的资源上。⽐如进⼊可视区域才开始播放视频等等。

⽂件优化

图片优化

  • 不⽤图⽚。很多时候会使⽤到很多修饰类图⽚，其实这类修饰图⽚完全可以⽤ CSS 去代替。
  • 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。⼀般图⽚都⽤CDN 加载，可以计算适配屏幕的宽度，然后去请求相应裁剪好的图⽚。
  • ⼩图使⽤ base64 格式
  • 将多个图标⽂件整合到⼀张图⽚中（雪碧图）

其他优化

  • CSS ⽂件放在 head 中
  • 静态资源尽量使⽤ CDN 加载
  • 服务端开启⽂件压缩功能
avatar
文章
阅读
粉丝