美文网首页@IT·互联网程序员
HTML & CSS: 总结面试问题

HTML & CSS: 总结面试问题

作者: 乱来丶Fack | 来源:发表于2018-06-15 10:18 被阅读98次

    1.盒子模型?

    content

    padding

    border

    margin

    2.src与href的区别?

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

        src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

    3.简述同步和异步的区别

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

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

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

    4、Ajax的优缺点及工作原理?

    定义和用法:

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

    优点:

    1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求

    2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验

    3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离

    缺点:

    1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.

    2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.

    3.对流媒体还有移动设备的支持不是太好等

    AJAX的工作原理:

    1.创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))

    2.判断数据传输方式(GET/POST)

    3.打开链接 open()

    4.发送 send()

    5.当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数

    5.web前端开发,如何提高页面性能优化?

    内容方面:

    1.减少 HTTP 请求 (Make Fewer HTTP Requests)

    2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

    3.使得 Ajax 可缓存 (Make Ajax Cacheable)

    针对CSS:

    1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

    2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

    3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)

    4.避免 CSS 表达式 (Avoid CSS Expressions)

    针对JavaScript :

    1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

    2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

    3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

    4. 移除重复脚本 (Remove Duplicate Scripts)

    面向图片(Image):

    1.优化图片

    2 不要在 HTML 中使用缩放图片

    3 使用恰当的图片格式

    4 使用 CSS Sprites 技巧对图片优化

    如何优化图像?图像格式的区别?

    1、不用图片,尽量用css3代替。 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。

    2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!

    图像格式的区别:

    矢量图:图标字体,如 font-awesome;svg 

    位图:gif,jpg(jpeg),png

    区别:

      1、gif:是是一种无损,8位图片格式。具有支持动画,索引透明,压缩等特性。适用于做色彩简单(色调少)的图片,如logo,各种小图标icons等。

      2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片,不适合做色彩简单(色调少)的图片,如logo,各种小图标icons等。

      3、png:PNG可以细分为三种格式:PNG8,PNG24,PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

    关于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位(256阶)的alpha通道透明;

    优缺点:

      1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

      2、对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。 


    开发及性能优化

    1、规避javascript多人开发函数重名问题

    命名空间

    封闭空间

    js模块化mvc(数据层、表现层、控制层)

    seajs

    变量转换成对象的属性

    对象化

    2、请说出三种减低页面加载时间的方法

    压缩css、js文件

    合并js、css文件,减少http请求

    外部js、css文件放在最底下

    减少dom操作,尽可能用变量替代不必要的dom操作

    相关文章

      网友评论

        本文标题:HTML & CSS: 总结面试问题

        本文链接:https://www.haomeiwen.com/subject/gispeftx.html