2020-03-23

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写一个简单的幻灯片效果

   

   

   

10.行内元素和块级元素,空(void)元素的区别?行内元素的padding和margin可设置吗?

块级元素特性:

总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;宽度,高度,内边距和外边距都可控制

块级元素:div p h1 h2 h3 h4 form ul

内联(行内元素)元素特性:

和相邻的内联元素在同一行;只有左右的padding和margin可设置

行内元素: a b br i span input select

默认的inline-block(内联块元素)元素(拥有内在尺寸,可设置宽高,但不会自动换行)

例如: