前端常见问题整理
1.前端性能优化
a.请求数量：合并脚本和样式表，CSS Sprites;
b.请求带宽：精简压缩JavaScript⽂件，移出重复脚本，图⽚优化；
c.使⽤CDN，使⽤外部JavaScript和CSS，添加Expires头，减少DNS查，配置ETag，使AjaX可缓存；
d. 页⾯结构：将样式表放在顶部，将脚本放在底部，尽早刷新⽂档的输出；
e. 代码校验：避免CSS表达式，避免重定向
2.在浏览器中输⼊⼀个⽹址之后浏览器都做了什么？
①浏览器查该域名的 IP 地址
②浏览器根据解析得到的IP地址向 web 服务器发送⼀个 HTTP 请求
③服务器收到请求并进⾏处理
④服务器返回⼀个响应
⑤浏览器对该响应进⾏解码，渲染显⽰
⑥页⾯显⽰完成后，浏览器发送异步请求。
3.简述盒模型
⽂档中的每个元素被描绘为矩形盒⼦。
盒⼦有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
4.浏览器本地存储
在HTML5中提供了sessionStorage和localStorage.
sessionStorage⽤于本地存储⼀个会话（session）中的数据，这些数据只有在同⼀个会话中的页⾯才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
localStorage⽤于持久化的本地存储，除⾮主动删除数据，否则数据是永远不会过期的。
5.减少页⾯加载时间的⽅法
a. 尽量减少页⾯中重复的HTTP请求数量
b. 服务器开启gzip压缩
c. css样式的定义放置在⽂件头部
d. Javascript脚本放在⽂件末尾
e. 压缩合并Javascript、CSS代码
f. 使⽤多域名负载⽹页内的多个⽂件、图⽚
6.浏览器的内核有哪些？
IE浏览器的内核Trident，
Mozilla的Gecko，
Chrome的Blink（WebKit的分⽀），
Opera内核原为Presto，现为Blink；
7.前端的三层结构和作⽤
a. 结构层：由 HTML 或 XHTML 之类的标记语⾔负责创建，仅负责语义的表达。解决了页⾯“内容是什么”的问题。
b. 表⽰层：由CSS负责创建，解决了页⾯“如何显⽰内容”的问题。
c. ⾏为层：由脚本负责。解决了页⾯上“内容应该如何对事件作出反应”的问题。
8.⼀个页⾯有⼤量的图⽚，如何提⾼加载速度，提⾼⽤户体验。
a. 图⽚懒加载，滚动到相应位置才加载图⽚。
b. 图⽚预加载，如果为幻灯⽚、相册等，将当前展⽰图⽚的前⼀张和后⼀张优先下载。
c. 使⽤CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图⽚为css图⽚的话。
d. 如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的缩略图，以提⾼⽤户体验。
9.从前端⾓度做好SEO
// SEO全称：Search English Optimization，搜索引擎优化。⾃从有了搜索引擎，SEO便诞⽣了。
// 存在的意义：为了提升⽹页在搜索引擎⾃然搜索结果中的收录数量以及排序位置⽽做的优化⾏为。简⾔之，就是希望百度等搜索引擎能多多我们收录精⼼制作后的⽹站，并且在别⼈访问时⽹站能排在前⾯。
a.⽹站结构布局优化；
b.代码优化，如：
<title>标题：只强调重点即可，尽量把重要的关键词放在前⾯，关键词不要重复出现，尽量做到每个页⾯的<title>标题中不要设置相同的内容。
<meta keywords>标签：关键词，列举出⼏个页⾯的重要关键字即可，切记过分堆砌。
<meta description>标签：⽹页描述，需要⾼度概括⽹页内容，切记不能太长，过分堆砌关键词，每个页⾯也要有所不同。
<body>中的标签：尽量让代码语义化，在适当的位置使⽤适当的标签，⽤正确的标签做正确的事。让阅读源码者和“蜘蛛”都⼀⽬了然。⽐如：h1-h6 是⽤于标题类的，<nav>标签是⽤来设置页⾯主导航的等。
<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。⽽外部链接，链接到其他⽹站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为⼀旦“蜘蛛”爬了外部链接之后，就不会再回来了。
sessionstorage和localstorage10.<img>标签上title属性与alt属性的区别
alt属性是为了给那些不能看到你⽂档中图像的浏览者提供⽂字说明的。且长度必须少于100个英⽂字符或者⽤户必须保证替换⽂字尽可能的短。
这包括那些使⽤本来就不⽀持图像显⽰或者图像显⽰被关闭的浏览器的⽤户，视觉障碍的⽤户和使⽤屏幕阅读器的⽤户等。
title属性为设置该属性的元素提供建议性的信息。使⽤title属性提供⾮本质的额外信息。
11.标签语义化的理解
a. 去掉或者丢失样式的时候能够让页⾯呈现出清晰的结构
b. 有利于SEO：和搜索引擎建⽴良好沟通，有助于爬⾍抓取更多的有效信息：爬⾍依赖于标签来确定上下⽂和各个关键字的权重；
c. ⽅便其他设备解析（如屏幕阅读器、盲⼈阅读器、移动设备）以意义的⽅式来渲染⽹页；
d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
12.Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 声明位于⽂档中的最前⾯，处于 <html> 标签之前。告知浏览器以何种模式来渲染⽂档。
严格模式的排版和 JS 运作模式是以该浏览器⽀持的最⾼标准运⾏。
在混杂模式中页⾯以宽松的向后兼容的⽅式显⽰。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。 DOCTYPE不存在或格式不正确会导致⽂档以混杂模式呈现。
13.Doctype⽂档类型
标签可声明三种 DTD 类型，分别表⽰严格版本、过渡版本以及基于框架的 HTML ⽂档。
HTML 4.01 规定了三种⽂档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML ⽂档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）⽤于呈现遵循最新标准的⽹页，
Quirks（包容）模式（也就是松散呈现模式或者兼容模式）⽤于呈现为传统浏览器⽽设计的⽹页。
14.HTML与XHTML的区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须⽤⼩写字母。
d. XHTML ⽂档必须拥有根元素。
15.html5有哪些新特性、移除了那些元素？
a. HTML5 现在已经不是 SGML 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加。
b. 拖拽释放(Drag and drop) API
c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
d. ⾳频、视频API(audio,video)
e. 画布(Canvas) API
f. 地理(Geolocation) API
g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
h. sessionStorage 的数据在页⾯会话结束时会被清除
i. 表单控件，calendar、date、time、email、url、search
j. 新的技术webworker, websocket等
移除的元素：
a. 纯表现的元素：basefont，big，center, s，strike，tt，u；
b. 对可⽤性产⽣负⾯影响的元素：frame，frameset，noframes；
16.iframe的优缺点？
优点：
a. 解决加载缓慢的第三⽅内容如图标和⼴告等的加载问题
b. iframe⽆刷新⽂件上传
c. iframe跨域通信
缺点：
a. iframe会阻塞主页⾯的Onload事件
b. ⽆法被⼀些搜索引擎索引到
c. 页⾯会增加服务器的http请求
d. 会产⽣很多页⾯，不容易管理。
17.简述⼀下src与href的区别
src⽤于替换当前元素；href⽤于在当前⽂档和引⽤资源之间确⽴联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置
href是Hypertext Reference的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接
18.DOM操作 - 添加、移除、移动、复制、创建和查节点
（1）创建新节点
createDocumentFragment() //创建⼀个DOM⽚段
createElement() //创建⼀个具体的元素
createTextNode() //创建⼀个⽂本节点
（2）添加、移除、替换、插⼊
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的⼦节点前插⼊⼀个新的⼦节点
（3）查
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能⼒较强，会得到⼀个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯⼀性
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论