L--前端开发面试知识点(HTML相关)

时间 2019-11-10

标签前端开发面试知识 html 相关栏目快乐工作繁體版

原文原文链接

简介

前端开发面试知识点大纲：javascript

　　HTML&CSS: 对web标准的理解、浏览器内核的差别、兼容性、hack、css基本功：布局、盒子模型、选择器优先级及使用、HTML五、CSS三、移动端适应。css

　　javascript：数据类型、面向对象、继承、闭包、插件、做用域、跨域、原型链、模块化、自定义事件、内存泄露、事件机制、异步装载回调、模板引擎、nodejs、JSON、ajaxhtml

　　其余：HTTP、安全、正则、优化、重构、响应式、移动端、团队协做、可维护、SEO、UED、架构、职业生涯前端

1.请你谈谈Cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但仍是有不少局限性的。html5

第一：每一个特定域名下最多生成20个cookiejava

IE6或更低版本最多20个cookie
IE7和以后版本最多能够有50个cookie。
firefox最多50个cookie
chrome和safari没有作硬性限制

IE和opera会清理近期最少使用的cookie，firefox会随机清理cookie。node

cookie的最大大约为4096字节，为了兼容性，通常不能超过4095字节。web

IE提供了一种存储能够持久化用户数据，叫作userData，从IE5.0就开始支持。每一个数据最多128k，每一个域名下最多1M。这个持久化数据放在缓存中，若是缓存没有处理
，那么会一直存在。

优势：极高的扩展性和可用性面试

经过良好的编程，控制保存在cookie中的session对象的大小。
经过加密和安全传输技术（SSL），减小cookie被破解的可能性。
只在cookie中存放不敏感数据，即便被盗也不会有重大损失。
控制cookie的生命周期，使之不会永远有效。偷盗者极可能拿到一个过时的cookie。

缺点：ajax

cookie数量和长度的限制。每一个domain最多只能有20条cookie，每一个cookie长度不能超过4KB，不然会被截掉。
安全性问题。若是cookie被人拦截，那人就能够取得全部的session信息。即便加密也于事无补，由于拦截者并不须要知道cookie的意义，他只要原样转发cookie就能够达到目的了。
有些状态不可能保存在客户端。例如，为了防止重复提交表单，咱们须要在服务器端保存一个计数器。若是咱们把这个计数器保存在客户端，那么他起不到任何做用。

2.浏览器本地存储

在较高的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。

html5中的web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地一个会话（session）中的数据，这些数据只有在同一个绘会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别而localStorage用于持久化的本地存储，除非主动删除数据，不然数据永远不会过时的

3.web storage和cookie的区别

web storage的概念和cookie相识，区别是他是为了更大的容量存储而设计的。cookie的大小是受限的，而且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。

除此以外，web storage拥有setItem，getItem，removeItem，clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。

可是cookie也是不可或缺的：cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在，而web storage仅仅是为了本地存储数据而生

浏览器的支持除了ie7及如下不支持外，其余标准浏览器都彻底支持（ie及ff须要在web服务器里运行），值得一提的是IE老是办好事，例如IE6，IE7中的userData其实就是javascript本地存储的解决方案。经过简单的代码封装能够统一到全部的浏览器都支持web Storage。

localStorage和sessionStorage都具备相同的操做方法，例如setItem、getItem和removeItem等

4.说说你对语义化的理解？

1.去掉或者丢掉的时候可以让页面呈现出清晰的结构

2.有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重

3.方便其余设备来解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页

4.便于团队开发和维护，语义化更具可读性，是下一代网页的重要动向，遵循W3C标准的团队都遵循这个标准，能够减小差别化。

5.Doctype做用？严格模式与混杂模式如何区分？他们有何意义？

1.<!DOCTYPE>声明位于文档的最前面，处于<html>标签以前。告知浏览器以何种方式来渲染文档。

2.严格模式的排版和JS运做模式是以浏览器支持的最高标准运行。

3.在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。

4.DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

6.你知道多少种Doctype文档类型？

该标签可声明三种DTD类型，分别表示严格版本，过分版本以及基于框架的HTML文档。

HTML 4.01规定了三种文档类型：Strict、Transitional以及Frameset。

XHTML 1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。

Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

7.HTML与XHTML--两者有什么区别？

区别：

　　1.全部的标记都必需要有一个相应的结束标签

　　2.说有的标签元素和属性的名字都必须使用小写

　　3.全部的XML标记都必须合理嵌套

　　4.全部的属性都必须有引号括起来

　　5.把全部的<和&特殊字符用编码表示

　　6.给全部属性附一个值

　　7.不要在注释内容中使“--”

　　8.图片必须有说明文字

8.常见兼容问题？

1.png24位的图片在ie6浏览器上出现背景，解决方案是作成png8，也能够引用一段脚本处理。

2.浏览器默认的margin和padding不一样。解决方案是加一个全局的*{margin：0;padding:0}来统一。

3.IE6双边距bug：块属性标签float后，又有横行的margin状况下，在ie6显示的margin比设置的大。

4.浮动ie产生双倍距离（ie6双边距问题：在ie6下，若是对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

5.渐进识别的方式，从整体中逐渐排除局部。

　　首先，巧妙的使用"\9"这一标记，将IE浏览器从全部状况中分离出来。

　　接着，再次使用“+”将IE8和IE七、IE6分离开来，这样IE8已经独立识别。

.test {
    background-color: #f1ee18;   /*全部识别*/
    .background-color: #00deff\9;/*IE六、七、8识别*/ 
    +background-color: #00deff;/*IE六、7识别*/ 
    _background-color: #00deff;/*IE6识别*/ 
}

6.IE下，可使用获取常规属性的方法来获取自定义属性，也可使用getAttribute()获取自定义属性；firfox下，只能经过使用getAttribute()获取自定义属性。

解决方法：统一使用getAttribute()获取自定义属性。

9.HTML5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

HTML5如今已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增长

新特性：

　　拖拽释放(Drag and drop) API

　　语义化更好的内容标签(header ,nav , footer ,aside, article, section)

　　音频、视频API(audio, video)

　　画布(Canvas) API

　　地理(Geolocation) API

　　本地离线存储 localStorage 长期储存数据，浏览器关闭后数据不丢失

　　sessionStorage 的数据在浏览器关闭以后自动删除

　　表单控件，calender、date、time、email、url、search

　　新的技术webworker，websocket，Geolocation

移除元素：

　　纯表现的元素：basefont, big, center, font, s, strike, tt, u;

　　对可用性产生负面影响的元素： frame， frameset， noframes；

支持HTML5新标签：

　　IE6,7,8支持经过document.createElement方法产生的标签，能够利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还须要添加默认的样式

　　固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!-- [if lt IE 9] >
    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->

如何区分： DOCTYPE声明\新增的结构元素\ 功能元素

10.iframe的优缺点？

优势：

　　解决加载缓慢的第三方内容如图标和广告等的加载问题

　　Security sandbox

　　并行加载脚本

缺点：

　　iframe会阻塞主页面的Onload时间

　　即便内容为空，加载也须要时间

　　没有语意

11.webSocket如何兼容低浏览器？

Adobe Flash Socket、Active HTMLFile(IE)、基于multipart编码发送XHR、基于长轮询的XHR

12.线程与进程的区别？

一个程序至少有一个进程，一个进程至少有一个线程。

线程的划分尺度小于进程，使得多线程程序的并发性高。

另外，进程在执行过程当中拥有独立的内存单元，而多个线程共享内存，从而极大的提升了程序的运行效率。

线程在执行过程当中与进程仍是有区别的。每一个独立的线程都有一个程序的入口、顺序执行序列和程序的出口。可是线程不可以独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分能够同时执行。但操做系统并无将多个线程看作多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的区别

进程是具备必定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位。

线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程本身基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序计数器,一组寄存器和栈),

可是它可与同属一个进程的其余的线程共享进程所拥有的所有资源.

一个线程能够建立和撤销另外一个线程;同一个进程中的多个线程之间能够并发执行.

13.你如何对网站进行优化？

1.文件合并(CSS sprites,多个js，css文件合并等)

2.文件最小化/文件压缩

3.使用CDN托管(Content Delivery Network，即内容分发网络)

4.缓存的使用(多个域名来提供缓存)

14.请说出三种减小页面加载时间的方法？

1.优化图片(gif代替png、dataUrl等)

2.图像格式的选择(gif:提供的颜色较少，可用在一些对颜色要求不高的地方)

3.优化CSS(压缩合并css，如margin-top，margin-left..)

4.网站后加斜杠(如www.cnblogs.com/目录，会判断这个“目录是什么文佳类型，或者是目录”)

5.代表高度和宽度(若是浏览器没有找到这两个参数，他须要一边下载图片一边计算大小，若是图片不少，浏览器须要不断的调整页面。这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即便

图片暂时没法显示，页面上也会腾出图片的空位，而后继续加载后面的内容，从而加载时间快了，浏览体验也更好了。)

6.减小http请求(合并问价，合并图片)

15.什么是FOUC(无样式内容闪烁)？你如何避免FOUC？

<style type="text/css" media="all">@import "../fouc.css"</style>

引用CSS文件的@import就是形成这个问题的罪魁祸首。IE会先加载整个html文档的DOM，而后再去导入外部的CSS文件，所以，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式

的，这段时间的长短跟网速，电脑速度都有关系。

解决方法：在<head>之间加入一个<link>或者<script>元素就能够了。