最新文章:

您的位置: 富录-前端开发|web技术博客 > 前端面试题汇总 > 前端面试题(三)

前端面试题(三)

发布时间:2017年10月30日 评论数:抢沙发阅读数: 6305

    前端需要注意哪些SEO

    合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可

    语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页

    重要内容HTML代码放在最前:搜索引擎抓取HTMl顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取

    重要内容不要用js输出:爬虫不会执行js获取内容

    少用iframe:搜索引擎不会抓取iframe中的内容

    非装饰性图片必须加alt

    提高网站速度:网站速度是搜索引擎排序的一个重要指标

     

    web开发中会话跟踪的方法有哪些

    cookie

    session

    url重写

    隐藏input

    ip地址

     

    <img>的title和alt有什么区别

    title是global attributes之一,用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。

    alt是<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析。

     

    简述一下src与href的区别

    href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

    src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。


    简述同步和异步的区别

    同步是阻塞模式,异步是非阻塞模式。

    同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;

    异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

     

     px和em的区别

    px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。

    浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

     

    什么是CSS Hack?

    一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。

    IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack。例如:

    // 1、条件Hack <!--[if IE]> <style> .test{color:red;} </style> <![endif]-->

    // 2、属性Hack .test{ color:#090\9; /* For IE8+ */ *color:#f00; /* For IE7 and earlier */ _color:#ff0; /* For IE6 and earlier */ }

    // 3、选择符Hack * html .test{color:#090;} /* For IE6 and earlier */ * + html .test{color:#ff0;} /* For IE7 */

     

    语义化的理解

    用正确的标签做正确的事情!

    html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;

    在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。

    搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。

    使维护人员对网站更容易将网站分块,便于阅读维护理解。

     

    响应式布局的理解:

    响应式布局无非就是利用css3的新特性来使页面适应不同的分辨率

    简单点说响应式布局它是通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。

    布局也可以使用相对单位替换绝对单位,如百分比控制页面缩放

     

    页面重构

    简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。

    所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”

    经常会问到的前端面试题,至于页面重构和前端的关系,可理解为:页面重构是前端工作细化的结果。

     

    CSS隐藏元素的几种方法(至少说出三种)

       - Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

       - Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;

       - Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

       - Position:不会影响布局,能让元素保持可以操作;

       - Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;


二维码加载中...
本文作者:DGF      文章标题: 前端面试题(三)
本文地址: https://arbays.com/post/46     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论