前端问题总结（一）

用哪几个浏览器做测试

IE -trident
谷歌 -webkit
欧朋 -presto
苹果 -webkit
火狐 -gecko

Doctype是什么

一个声明
告诉浏览器按照何种规范解析页面

div+css 布局优点

改版方便，只用修改CSS文件

结构与表现分离

页面加载更快，显示更简洁，结构更清晰

易于SEO优化

img 中 alt title区别

alt:当无法加载图片的时候，会使用alt里面的文字代替

title:当鼠标放在上面有一些建议性信息

strong&em

strong：粗体强调内容的重要性

em:斜体强烈强调内容的强调点

渐进增强&优雅降级

渐进增强：

针对低版本浏览器进行构建页面，保证最基本功能，然后对高级浏览器追加新的功能

优雅降级：

一开始就构建完整功能，然后再针对低版本浏览器进行兼容

区别：

一个从简单到复杂，一个从复杂到简单

为什么利用多个域名来存储网站资源更有效

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

网页标准和标准制定机构的重要性

为了让WEB发展更健康，开发者遵循同一的标准，降低了开发的难度和成本，SEO也会更好做，提高网站的易用性

cookies, sessionStorage,localStorage，webStorage

sessionStorage:不是一种持久化的本地储存，当会话结束，数据销毁

localStorage:用于持久化的本地储存，除非主动删除数据，否则数据不过期

webStorage:它是为了更大容量储存设计，作用是在本地“储存”数据

cookie：

src&href

src:

替换当前元素

是source的缩写，指向外部资源的位置，在请求src资源时会将其指向的资源下载并应用到当前文档中

当浏览器解析该元素时，会暂停其他资源的下载和处理，直到将该资源加载，编译执行完毕

href:在当前文档和引用资源之间确立联系，建立和当前元素之间的连接

图片格式

png-8

png-24

jpeg

gif

svg

webp

一次JS请求一般那些地方有缓存处理

dns缓存

cdn缓存

浏览器缓存

服务器缓存

图片加载慢的情况如何优化

图片预加载

CSS图片可用：CSSsprite、SVGsprite（图片）

优先加载一张压缩图片

HTML语义化

含义：用相对应的有一定语义的英文字母的标签来表示，在去掉CSS样式表之后，依然能很好的呈现内容的结构，代码结构

优点：

代码结构化

用户体验好

利于SEO

方便其他设备解析

提高可读性和代码的可维护性

前端做好SEO

优化html标签——语义化

定义meta标签（关键词、网站描述）

<img>添加alt属性 title属性定义宽高（width、hieght）——提高页面加载速度的

<a>标签适当添加 rel=‘’nofollow‘

内链采用绝对路径，减少服务器的响应时间

导航栏的层级数不宜太深

提高页面加载速度，压缩图片，雪碧图

结构、表现、行为分离

使用浏览器缓存

嵌入方式

行间

外部引用

css选择器

类

派生

属性

群组

伪类及伪元素

选择器越特殊越高级

css属性使一个DOM元素不显示

display：none

visibility:hidden

width:0 height:0

opacity:0

z-index:-1000

超链接访问后hover样式不出现的问题

被访问后不再具有hover和active 通过改变css属性解决（linked visited hover active）

什么是Css Hack?

行内元素和块级元素的区别：

块元素：<div>|<p>|<ul>|<li>|<h1-6>|<dd>|<dt>|<dl>

独占一行，即使设置了宽度

支持全部样式

如果没设置宽度，宽度为父级宽度的100%

内联元素：<a>|<span>|<b>|<strong>|<em>|<i>

支持部分样式（不支持宽高，margin上下，padding上下）

盒子并在一行

宽高由内容决定

产生间距

内联块元素：<input>|<img>|<button>|<textarea>|<label>

支持全部样式

如果没设置宽高，由内容决定

盒子自占一行

有间距

解释外边距重叠

即margin-collapse

相邻两个盒子的外边距可以结合成一个单独的外边距这种合并外边距的方式称为折叠

两个相邻外边距都是整数，折叠结果是两者较大值

两个相邻外边距都是负数，折叠结果是两者绝对值得较大值

两个外边距一正一负时，折叠结果是两者相加的和

rgba()&opacity

两者都能实现透明效果

opacity作用于元素，以及元素内的所有内容的透明度

rgba()只作用于元素的颜色或背景色（子元素不继承）

文字垂直||水平居中

垂直：line-height

水平：letter-spacing (可用于消除inline-block元素间的换行符空格间隙问题)

如何垂直居中一个浮动元素

px&em

都是长度单位

px:固定值

em：不是固定值，继承父元素字体大小

reset.css

用于样式重置，兼容各浏览器

normalize.css提供一套合理的默认样式值

SASS & LESS

css预处理器

用一种特殊的语法编译成css

好处：清晰结构，易于扩展实现多重继承

display:none & visibility:hidden

display：隐藏对应的元素挤占该元素原来的空间，宽高等属性消失

visibility：隐藏对应元素但不挤占改元素原来的空间，仅仅是视觉上看不见，浏览器继续解析

css的link & @import

link属于html标签，页面加载时同时加载,权重更大

@import是css提供的，页面加载完成后才会加载引用的css，ie5以上可用