1.在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存?
(1)DNS缓存
(2)cdn缓存
(3)浏览器缓存
(4)服务器缓存
2.一个页面上有大量的图片(大型电商网站),加载很慢,有哪些办法优化这些图片的加载,给用户更好的体验
图片懒加载,在页面上非可视区域添加一个滚动条事件,判断图片位置与浏览器顶端的距离和窗口的距离,如果前者小于后者,优先加载
如果为幻灯片,相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载
如果图片为css图片,可以使用Iconfont、Base64等技术
加载大图的时候,我们可以先显示模糊的缩略图,等到大图加载完了,再把缩略图替换掉,这样填补了图片加载期间的空白时间。
如果图片展示区域小于图片的真实大小,则在服务器端根据业务需要先进行图片压缩,图片压缩后大小与展示一致
3.如何理解HTML结构的语义化
去掉或样式丢失的时候能让页面呈现清晰地结构。
语义化的好处:
(1)当页面样式加载失败时能够让页面呈现清晰的结构
(2)有利于SEO优化,利于被搜索引擎收录(更便于被搜索引擎的爬虫程序识别,爬虫依赖于标签来确定上下文和各个关键字的权重)
(3)便于项目的开发和维护,使html更具有可读性,便于其他设备解析
4.有哪些方式可以对一个dom设置它的css样式
①外部样式表 引入一个外部css文件
②内部样式表 将css代码放在
标签内部③内联样式 将css样式直接定义在HTML元素内部
5.css都有哪些选择器?哪些属性可以继承?优先级算法如何计算?css3新增伪类有哪些
①派生选择器(用HTML标签申明)
②id选择器(用dom的id申明)
③类选择器(用一个样式类名申明)
④后代选择器
⑤群组选择器
⑥通配符选择器(*)
优先级(权重)
标签选择器权重 1
类选择器权重 10
id选择器权重 100
可继承: font-size font-family color, ul,li,dl ,dd,dt
不可继承 :border padding margin width height ;
优先级就近原则,样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例:
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
6.css中可以通过哪些属性定义使得一个dom元素不显示在浏览器可视范围内
①display:none
②visibility:hidden
③设置宽高为0
④设置透明度为0
⑤设置z-index位置在-1000
7.超链接访问过后hover样式就不出现的问题是什么?如何解决
被惦记访问过的超链接样式不再具有hover和active了,解决方法是改变css属性的排列顺序(link visited hover active)
8.什么是Css Hack?IE6,7,8的hack分别是什么?
针对不同的浏览器写不同的css code的过程就是css hack
ie6 _background-color:orange;
ie7 +background-color:orange;
ie8 background-color:orange;
9.用css写一个简单的幻灯片效果
.myDiv {
width: 600px;
height: 400px;
margin: 20px auto;
background-size: cover;
background-position: center;
-webkit-animation-name: 'loop';
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loop"{
0% {background: url(http://img5.duitang.com/uploads/blog/201408/12/20140812150016_8NMUU.jpeg) no-repeat;}
25% {background: url(http://pic29.nipic.com/20130518/9908282_142904524164_2.jpg) no-repeat;}
50% {background: url(http://uploadfile.huiyi8.com/2014/0605/20140605114503719.jpg) no-repeat;}
75% {background: url(http://img3.redocn.com/20100322/Redocn_2010032112222793.jpg) no-repeat;}
100% {background: url(http://uploadfile.huiyi8.com/2014/0605/20140605114447934.jpg) no-repeat;}
}
10.行内元素和块级元素,空(void)元素的区别?行内元素的padding和margin可设置吗?
块级元素特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度,高度,内边距和外边距都可控制
块级元素:div p h1 h2 h3 h4 form ul
内联(行内元素)元素特性:
和相邻的内联元素在同一行;只有左右的padding和margin可设置
行内元素: a b br i span input select
默认的inline-block(内联块元素)元素(拥有内在尺寸,可设置宽高,但不会自动换行)
例如:
空(void)元素: