本文探讨前端开发中的微格式应用、网页资源缓存技巧，以及如何优化电商网站大量图片加载以提升用户体验。还涉及HTML语义化、SEO最佳实践，CSS选择器和隐藏元素，以及解决超链接hover样式问题的方法。同时讲解了CSS Hack及其在IE6-8中的应用。
目录
12:从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？
13:一个页面有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
19:超链接访问过后，hover样式就不出现的问题是什么，如何解决
20: 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
11:微格式，前端中怎么考虑微格式
微格式（Microformats）是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。
作用：
a、在捉取Web内容时，能够更为准确地识别内容块的语义；
b、对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。
应用例子：
当用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我“是否保存到通讯录”，于是我很经松地保存了我所需要的信息。
12:从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？
DNS缓存，CDN缓存，客户端(浏览器缓存)，服务器缓存
DNS缓存是指在正常访问ip之后，系统会将这个ip存储起来，当再次访问的时候，系统就会把本地的DNS缓存提取显示，等于是加速了网址的解析。
CDN是Content Delivery NetWork的简称，即‘内容分发网络'的意思，主要用于分地域的集群服务器，当用户浏览网站请求数据时，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。
服务器缓存就是存放频繁访问内容的服务器。
13:一个页面有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
14:你如何理解 HTML 结构的语义化？
A:在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:裸奔时也好看；
B:用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
C:有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
D:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），更好的方式来渲染网页；
E:便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
15:以前端角度出发，有哪些注意事项有利于SEO?
(1).维护网站，提高内容质量，保持更新
(2).网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
(3).控制首页链接数量,要适中
(4).导航优化：
a:尽量采用文字方式
b:搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性
c:应该加上面包屑导航
(5).控制页面的大小:减少http请求，提高网站的加载速度
(6).适量的关键词和网页描述
title标题，强调重点即可，
meta keywords标签：关键词，列重要关键字即可
meta description标签：网页描述，要高度概括
body中的标签：尽量让代码语义化
a标签：页内链接，要加 “title” 属性加以说明
img应使用 “alt” 属性加以说明
strong、em标签 : 需要强调时使用
巧妙利用CSS布局
谨慎使用 display：none
保留文字效果
16:对DOM设置CSS样式的方式有哪些？
A:外部样式表，引入一个外部 css 文件
B:内部样式表，将 css 代码放在 <head> 标签内部，<style>里
C:内联样式，将 css 样式直接定义在 HTML 元素内部
17:css选择器有哪些，选择器权重的优先级
选择器类型
(1)、ID #id
(2)、class .class
(3)、标签 p
(4)、通用 *
(5)、属性 [type="text"]
(6)、伪类 a: hover
(7)、伪元素 li: nth - child
(8)、子选择器（ul < li） 、相邻选择器（h1 + p）、后代选择器（li a）
权重计算规则
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
!important 比 内联优先级高
(1). 第一等：代表内联样式，如: style=””，权值为1000。
(2). 第二等：代表ID选择器，如：#content，权值为0100。
(3). 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
(4). 第四等：代表标签和伪元素选择器，如div p，权值为0001。
(5). 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
(6). 继承的样式没有权值。
(7).相同权重
优先级就近原则，样式定义最近者为准,载入样式以最后载入的定位为准;
继承性
可继承： font-size font-family color;
不可继承 ：border padding margin width height ;
CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
18:css中，对DOM元素设置不显示的方式
display:none；隐藏，并且不占位 ，宽高各种属性值，都‘丢失’
visibility：hidden;隐藏，占位，仅是视觉上‘看不见’
width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示
19:超链接访问过后，hover样式就不出现的问题是什么，如何解决
问题是：a标签的四种状态，排序出问题了。
正确排序：L-V-H-A
love hate原则，即l（link）ov（visited）e h（hover）a（active）te。
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
20: 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
