面试相关知识点总结（1）

amazing_thing
112 阅读6分钟
以下内容仅为个人积累以及一些看法，不代表是正确的。

1. link与import的区别

  • import是css2.1引入的，所以会有兼容性问题，在iE5以下不兼容。而link是html自带的标签，不会有兼容性问题。
  • 一般来说link的权重会比import大，会覆盖import引入的css样式。
  • link引入会与html的渲染同时进行，而import会在页面渲染完成后再执行，当用户网速慢时，会出现html渲染好了，但是css还没出现，造成布局混乱。
  • link标签上的rel属性有多种值可以选择，比如常用的stylesheet用于引入css，dns-prefecth用于dns预解析。而import只能引入css样式。

2. 语义化标签

语义化标签的使用个人感觉还是为了更好的SEO以及在更改的时候更加灵活的知道某段代码是作用。

什么是SEO呢？

  1. SEO就是搜索引擎优化，SEO友好的网站能够在我们搜索的时候拥有更好的排名。
  2. SPA页面不利用SEO，因为SEO对于HTML更加友好，而SPA页面是通过JS加载，所以服务端渲染会比SPA页面SEO更友好。
  3. SEO对于语义化的标签会更有友好，便于阅读器。
  4. 将主要内容放置在前面，SEO会有html识别的长度限制。

3. script标签的async与defer

先理解一些基础：

  1. 我们知道html的解析都是从上到下逐行的进行解析，而页面在渲染html时如果遇到js会暂停元素的解析，转而先执行完js，再解析html，就会造成阻塞。
  2. 所以如果将script标签写在body标签的前面并且没有加onload等相应的事件，就会使html的解析延后，并且js代码量大执行时间长，会导致页面长时间的空白。
  3. 一般我们会将script标签放在body闭合标签的前面，标签元素的后面。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script></script>//×
    </head>
    <body>
        <div></div>
        <script></script>//√
    </body>

</html>

回归正题

  1. 在script标签中，如果没有添加async或defer，浏览器在解析到script标签时，会立即加载并执行相应代码。
<script src='./another.js'></script>
  1. 有async时，html的解析与script加载是异步进行，script加载完成后，会立即的执行相应代码，造成html阻塞。有多个async属性的script标签，js的执行不会按照书写的顺序执行，而是先加载好先执行。因此要是互相有关联的话，可能会出现问题。
<script async src='./another,js'></script>
  1. 有defer时，html的解析与script加载是异步进行，script加载完成后，不会立即的执行相应代码，而是会等元素加载完成后，DOMContentLoaded事件之前执行。js的执行会按照书写的顺序执行。
    不过之前再看javascript高级程序设计(第四版)中却是写道：在实际开发中，推迟执行的脚本不一定总会按顺序执行或者在DOMContentLoaded事件之前执行，因此最好只包含一个这样的脚本。
    不太懂，可能是因为各个浏览器虽说实现了defer，但是实现的标准不一样吧。
<script defer src='./another,js'></script>

  1. 什么是DOMContentLoaded事件？跟onload事件的区别？
    DOMContentLoaded事件表示元素已经加载完成，但是像img的图片需要加载，iframe需要加载这些需要从别的地方加载的元素就还没有完成加载。
    onload事件表示所有的元素都加载完成了。

  2. 以上的async与defer都只适用于外联的script标签。
    另外感觉，写在body闭合标签前能够替代这两个属性的大部分功能，避免因为浏览器兼容或者实现方式不一致导致出现问题。毕竟各个浏览器有各个浏览器的"脾气"

  3. 据我了解，在head里最好使用外联的css，因为文档上从上往下解析，在解析到css生成CSSOM树，解析到html生成DOM树。这样子就会导致css与html不能够同步解析，造成render树较慢的生成。而使用外联的css，因为html与css是不会造成阻塞的，就能够异步的进行css的解析与html的解析，加快页面的渲染。

clipboard.png
这张图片简要的概括了async与defer的解析过程。

4. HTML解析流程

html解析.png

看图：

  1. 遇到html时，解析为DOM树。
  2. 遇到css时，解析成CSSOM规则树。
  3. 每个DOM节点都有一个attch方法，接收节点样式，返回render节点，所有的render节点结合形成一颗render树。
  4. 回流：根据render节点，计算出节点几何信息（位置，大小等）。
  5. 重绘：得到节点在屏幕中的像素位置。
  6. 浏览器的GPU进程拿到后，将页面绘制进行呈现。

什么时候会造成回流？当节点的位置，大小发生变化时会造成回流，也会造成重绘。

什么时候造成重绘？当节点的背景色，字体颜色等发生变化时会造成重绘。

回流一定会伴随着重绘，重绘不一定会造成回流，回流需要消耗比较大的资源，我们应该减少回流的次数

减少回流方法？

  1. 元素先隐藏，操作完后，在显示
  2. 使用文档文档，一次性的添加

主要就是避免重复性的操作DOM元素，一次性就只造成一次回流。

5. flex布局

1.写在父级，影响子集

flex 弹性布局  
flex-diretion       //行排列方式（row，column）  
flex-wrap           //开启多行  
flex-flow           //上面集成  
align-items         //交叉轴轴排列  
justify-content     //主轴排列 
align-content       //多行时交叉轴排列

尤其注意区分主轴与交叉轴
justify-content 表示主轴的排列
align-items 表示交叉轴的排列

2.写在子集，影响自身

order               //排列顺序，数字大在前面，默认为0   
flex-grow           //元素是否放大，默认为0  
flex-shrink         //元素是否缩小，默认为1  
flex-base           //元素本身大小，默认为auto，即传入的width,height
flex:1              //flex-grow:1  flex-shrink:1  flex-base:0%  
flex:auto           //flex-grow:1  flex-shrink:1  flex-base:auto
align-self          //元素自身的交叉轴位置，属性与align-items一致

困惑：之前在使用flex布局的时候，flex:dirction:column时，高度固定，宽度自适应，开启多行，在超出一列后，往第二列放数据，数据是可以的。但是宽度却没有自适应，依旧保持着一列的宽度。在查找答案的时候，好像说是一种缺陷，于是只能换一种方式写。

avatar
文章
阅读
粉丝