2021.6.30 面试刷题day1什么是SEO？遵循W3C规范，语义化的HTML代码 a. 非装饰性图片加alt b

1. 前端要注意哪些SEO?

什么是SEO？

SEO（Search Engine Optimization）搜索引擎优化

遵循W3C规范，语义化的HTML代码
a. 非装饰性图片加alt
b. 用合适的标签左合适的事情
c. 重要内容不用js输出：爬虫不会执行js获取内容
d. 爬虫不会抓取iframe内容，少用iframe
e. 重要内容HTML放前面
2.提高网站速度

2. img标签的alt和title有什么区别

共同点：都在鼠标hover上去时展示

alt是img标签的特有属性，图片内容的等价描述，没有加载出图片时展示，可以提高图片的可访问性，搜索引擎会重点分析

title：所有标签都有，鼠标悬浮展示相关内容

3. 什么是闭包？

闭包的定义：函数A内部有一个函数B，函数B可以访问到函数A内部的变量，那么函数B就是闭包闭包就是一个可以访问其他函数内部变量的函数

闭包存在的意义：我们可以间接访问函数内部的变量

闭包让你可以在一个内层函数中访问到其外层函数的作用域

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

4. typeof 类型判断？

typeof对应基本类型都可以展示正确的类型 (symbol 类型)

// 数值
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof(42) === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // 尽管它是 "Not-A-Number" (非数值) 的缩写
typeof Number(1) === 'number'; // Number 会尝试把参数解析成数值

typeof 42n === 'bigint';


// 字符串
typeof '' === 'string';
typeof 'bla' === 'string';
typeof `template literal` === 'string';
typeof '1' === 'string'; // 注意内容为数字的字符串仍是字符串
typeof (typeof 1) === 'string'; // typeof 总是返回一个字符串
typeof String(1) === 'string'; // String 将任意值转换为字符串，比 toString 更安全


// 布尔值
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(1) === 'boolean'; // Boolean() 会基于参数是真值还是虚值进行转换
typeof !!(1) === 'boolean'; // 两次调用 ! (逻辑非) 操作符相当于 Boolean()


// Symbols
typeof Symbol() === 'symbol';
typeof Symbol('foo') === 'symbol';
typeof Symbol.iterator === 'symbol';


// Undefined
typeof undefined === 'undefined';
typeof declaredButUndefinedVariable === 'undefined';
typeof undeclaredVariable === 'undefined';


// 对象
typeof {a: 1} === 'object';

// 使用 Array.isArray 或者 Object.prototype.toString.call
// 区分数组和普通对象
typeof [1, 2, 4] === 'object';

typeof new Date() === 'object';
typeof /regex/ === 'object'; // 历史结果请参阅正则表达式部分


// 下面的例子令人迷惑，非常危险，没有用处。避免使用它们。
typeof new Boolean(true) === 'object';
typeof new Number(1) === 'object';
typeof new String('abc') === 'object';

// 函数
typeof function() {} === 'function';
typeof class C {} === 'function'
typeof Math.sin === 'function';

5. == 和 === 区别？

== 相等运算符，返回boolean结果，会尝试强类型转换并且比较不同的操作数

=== 严格等于运算符，严格等于不尝试类型转换，会直接江不同类型的操作数视为不同

6. window.onload 和 DOMContentLoaded的区别

DOMOnloaded会在页面加载完成时触发，但是onload会在页面元素和资源加载完成后触发

7. http的请求方法和用途

get方法：参数会带在url内
post方法：参数可以放在body内，可以想url指定的资源提交数据
put方法：会指定资源在服务器上的位置

8. 从浏览器输入url到显示页面发生了什么（难，单独学习）

域名解析，发起请求：浏览器根据请求的url交给dns（domain name system 域名系统域名翻译成ip）解析，找到真实ip，向服务器请求。（DNS查询域名->ip DNS反向查询：ip->域名）
浏览器接收后台返回的数据：服务器交给后台处理完成后返回数据，浏览器接收文件（html，js，css和图片资源等）。
浏览器解析资源：浏览器对加载的资源解析语法解析，建立对应数据结构（HTML的DOM结构）
载入资源文件，渲染页面详细版笔记

9.http状态码和对应的含义

1xx：信息状态码 100 Continue 一般在发送post请求是，已发送header后服务端返回此信息表示确认
2xx: 成功状态码 200 OK 201 created 202 accepted
3xx: 重定向
4xx: 客户端错误
5xx: 服务器错误 TODO 解析

10.如何优化图片的加载

TODO 解析

图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。