前端基础css篇

多看书，多总结项目收获与不足
最普通的面试题

1.前端性能优化

雪碧图、字体图标代替图片、代码压缩、模块按需加载、资源懒加载与资源预加载、避免使用层级较深的选择器及减少DOM深度

2.SPA和MPA优缺点

SPA：
优点：加载速度快，用户体验好，内容的改变不需要重新加载整个页面，基于这一点SPA对服务器压力较小。
前后端分离
页面视觉效果良好
缺点：不利于SEO（搜索引擎优化）
页面初次加载时比较慢
页面复杂度提高很多
MPA：
优点：首屏加载时间快，SEO效果好
缺点：页面切换慢，每次切换页面都需要选择性的重新加载公共资源

3.var，let，const的区别

var：var的作用域是函数作用域，在一个函数内利用var声明一个变量，则这个函数只能在这个函数内有效，存在变量提升
let：作用域是块级作用域不存在变量提升不允许重新定义
const：一般用来声明常量，且声明的常量是不允许被改变的，声明的时候就赋值，不存在变量提升，不允许重复定义

4.箭头函数和普通函数的区别

箭头函数
this指向：箭头函数指向，定义时所在的作用域中的this指向
箭头函数作为匿名函数，是不能作为构造函数的，不能使用new
箭头函数不能换行
普通函数
this指向：谁调用指向谁

5.流式布局和响应式布局

流式布局：使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充

6.css优先级算法

!important>内联>id>class>元素选择器>通配符选择器(*)>继承>浏览器默认属性

7.null和undefined的区别

undefined:类型只有一个，即undefined,当声明变量还未被初始化时就是undefined
null:类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

8.http和https的区别

https：是以安全为目标的HTTP通道，简单讲就是HTTP的安全版本，通过SSL加密。
http：超文本传输协议。是一个客户端和服务器端请求的应答的标准（tcp），使浏览器更加高效，使网络传输减少。
https://www.cnblogs.com/zhuoqingsen/p/9456787.html

9.ajax的理解

ajax原理：
相当于在用户和服务器之间加一个中间层（ajax引擎），使用户操作与服务器响应异步化。
ajax优点：
再不刷新整个页面的前提下与服务器通信维护数据。不会导致页面重载可以把前端服务器的任务转到客户端来处理，减轻服务器负担，节省带宽。
ajax劣势：
不支持back。对搜索引擎的支持比较弱；

10.Html5新增哪些特性？移除了哪些元素

canvas，video，audio，header，footer，acticle，nav，section，calender，date，time，email，url，search，localStroage
移除了：basefont，big，center，font，s，strike，tt，u

11.移动端点透的问题，如何解决

问题：点透问题出现的原因就是移动端click时间300ms延迟问题，当点击上层元素时，先触发touchStart事件，然后再300ms后触发click事件，而此时上层元素已经消失，所以下边的元素会触发click事件，这就是点透问题。
解决方法：
1.fastclick通用库

12.rem em px

px:像素。绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位。
em：是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体是出兑。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem：是css3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

13.http常见的状态码

405：客户端请求的方法被禁止
408：服务器等待客户端发送的请求时间过长，超时
200：服务器成功处理了请求
400：客户端发送了一个错误的请求
404：未找到资源
500：服务器内部出现错误
501：服务器遇到错误，使其无法对请求提供服务

14.什么是同步，什么是异步？

同步：js是单线程，同步任务都在主线程上排队执行，前面任务没有执行完成，后面的任务会一直等待。
异步：不进入主线程，进入任务队列，等待主线程任务执行完成，开始执行。最基本的异步操作，setTimeout和setInterval。等到主线程任务执行完成，再开始执行里面的函数。

15.DOCTYPE

<!DOCTYPE>位于文档最顶部，它可以告诉浏览器按何种规范解析页面

16.请描述一个cookies，sessionStroage和localStroage的区别

sessionStroage：用于本地存储一个回话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也会随之销毁。
localStroage:用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
cookie：他的大小是受限的，并且每次你请求一个新的页面时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还要指定作用域，不可以跨域调用。
webStroage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发自己封装setCookie、getCookie。但是cookie也是不可或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而webStroage仅仅是为了在本地"存储"数据而生。

function setcookie(name, value) {
      var days = 1;
      var exp = new Date();
      // 写入cookie,toGMTstring将时间转换为字符串
      document.cookie = name + "=" + encodeURI(value) + ";expiress=" + exp.toGMTString;
    }

17.src和href区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立关系

18.一个页面上有大量的图片，优化方式

1.图片懒加载
2.如果为幻灯片、相册等，可以使用图片预加载技术，将当前图片的前一张后一张有优先下载
3.如果图片为css图片，可以使用CSSsprite，SVGspite，iconfont，base64（直接引用）
4.如果图片过大、可以使用特殊编码的图片，加载时会先加载一个压缩的缩略图，以提升用户体验
5.如果图片展示区域小于图片的真实大小，则应在服务端根据业务需要先进性图片压缩，图片压缩后大小与展示一致。

19.做好SEO需要考虑什么

1.了解搜索引擎如何抓取网页和如何索引网页，以及如何对搜索结果进行排序
2.mate标签优化：title,description,keywords,Author,category,language
3.关键词（一般5个上下），词密度，相关度，突出性
4.了解主要的搜索引擎，不同的搜索引擎对页面的抓取和索引、排序的规则不一样
5.按点击付费的搜索引擎里面也大有优化和排名的学问，得学会用最少的广告投入获得最多的点击
6.发外链
7.合理使用标签

20.有哪些方式可以对一个DOM设置它的css样式

1.内联样式表（行内式）
2.嵌入样式表（head里面）
3.外部样式表（link）

21. 行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

行内元素特性：和相邻的行内元素在同一行；宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

22.CSS中link和@import的区别是？

Link属于html标签，而@import是CSS中提供的。
在页面加载的时候，link会同时被加载，而@import引用的CSS会在页面加载完成后才会加载引用的CSS。
@import只有在ie5以上才可以被识别，而link是html标签，不存在浏览器兼容性问题。
Link引入样式的权重大于@import的引用（@import是将引用的样式导入到当前的页面中）

23.为什么要初始化样式？

由于浏览器兼容问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间显示差异