• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >编程技巧 > 常见前端面试题及答案

常见前端面试题及答案

作者:mdxy-dxy 字体:[增加 减小] 来源:互联网 时间:2017-05-12

mdxy-dxy 通过本文主要向大家介绍了常见前端面试题及答案等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

前言

本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典、很有代表性。上面没有答案,我就整理了一下,从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有进行考证,不少答案都来源于网络,或许会有疏漏之处,仅供大家参考哦!(还有一部分问题答案还未整理,大家也可以自己搜索一下答案)

1.你能描述一下渐进增强和优雅降级之间的不同吗?

优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。

2.线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程,使得多线程程序的并发性高。

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

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。

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

3.说说你对语义化的理解?

•1:去掉或样式丢失的时候能让页面呈现清晰的结构:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
•2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。
•3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱)。
•4.有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重。
•6.便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

4.你如何对网站的文件和资源进行优化?

期待的解决方案包括:文件合并文件最小化/文件压缩使用CDN托管缓存的使用(多个域名来提供缓存)其他。

5.为什么利用多个域名来提供网站资源会更有效?

•1.CDN缓存更方便
•2.突破浏览器并发限制(一般每个域名建立的链接不超过6个)
•3.Cookieless,节省带宽,尤其是上行带宽一般比下行要慢
•4.对于UGC的内容和主站隔离,防止不必要的安全问题(上传js窃取主站cookie之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名,而是一个完全独立的第三方域名。
•5.数据做了划分,甚至切到了不同的物理集群,通过子域名来分流比较省事。这个可能被用的不多。

PS:关于Cookie的问题,带宽是次要的,安全隔离才是主要的。关于多域名,也不是越多越好,虽然服务器端可以做泛解释,浏览器做dns解释也是耗时间的,而且太多域名,如果要走https的话,还有要多买证书和部署的问题。

6.请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)

•1.优化图片
•2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方)
•3.优化CSS(压缩合并css,如margin-top,margin-left...)
•4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。)
•5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。)
•6.减少http请求(合并文件,合并图片)。

7.如果你参与到一个项目中,发现他们使用Tab来缩进代码,但是你喜欢空格,你会怎么做?

•建议这个项目使用像EditorConfig(http://editorconfig.org/)之类的规范
•为了保持一致性,接受项目原有的风格
•直接使用VIM的retab命令

8.请写一个简单的幻灯效果页面

如果不使用JS来完成,可以加分。(如:纯CSS实现的幻灯片效果)

9.你都使用哪些工具来测试代码的性能?

Profiler,JSPerf(http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout),Dromaeo。

10.如果今年你打算熟练掌握一项新技术,那会是什么?

nodejs,html5,css3,less等。

11.请谈一下你对网页标准和标准制定机构重要性的理解。

w3c存在的意义就是让浏览器兼容性问题尽量小,首先是他们对浏览器开发者的约束,然后是对开发者的约束。

12.什么是FOUC(无样式内容闪烁)?你如何来避免FOUC?

FOUC(Flash Of Unstyled Content)--文档样式闪烁

<style type="text/css"media="all">@import"../fouc.css";</style>而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。解决方法简单的出奇,只要在<head>之间加入一个<link>或者<script>元素就可以了。

13.doctype(文档类型)的作用是什么?你知道多少种文档类型?

此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档。

HTML 4.01规定了三种文档类型:Strict、Transitional以及Frameset。
XHTML 1.0规定了三种XML文档类型:Strict、Transitional以及Frameset。
Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

14.浏览器标准模式和怪异模式之间的区别是什么?

W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode和Standars mode,两种渲染方法共存在一个浏览器上。IE盒子模型和标准W3C盒子模型:ie的width包括:padding\border。标准的width不包括:padding\border
• 在js中如何判断当前浏览器正在以何种方式解析?

         document对象有个属性compatMode,它有两个值:BackCompat对应quirks mode,CSS1Compat对应strict mode。

15.使用XHTML的局限有哪些?

XHTML 与HTML的区别为:
•XHTML 元素必须被正确地嵌套。
•XHTML 元素必须被关闭。
•标签名必须用小写字母。
•XHTML 文档必须拥有根元素。

局限:

所有的 XHTML 元素都必须被正确地嵌套,XHTML 必须拥有良好的结构,所有的标签必须小写,并且所有的 XHTML 元素必须被关闭。所有的 XHTML 文档必须拥有 DOCTYPE 声明,并且 html、head、title 和 body 元素必须存在。虽然代码更加的优雅,但缺少容错性,不利于快速开发。

16.如果网页内容需要支持多语言,你会怎么做?

下面这些问题需要考虑:
•应用字符集的选择,选择UTF-8编码
•语言书写习惯&导航结构
•数据库驱动型网站

17.data-属性的作用是什么?

data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:
•属性名不应该包含任何大

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-12页面制作统一的头尾的方法(asp+js)
  • 2017-05-12代码着色之SyntaxHighlighter项目(最流行的代码高亮)
  • 2017-05-12GBK字符编码(字符集)缺陷导致web安全漏洞
  • 2017-05-12对Web开发人员有用的8个网站小结
  • 2017-05-12程序员趣味读物 谈谈Unicode编码
  • 2017-09-20windows下不常见的自启动方式
  • 2017-05-12vs快捷键 用好Ctrl+Enter与Ctrl+Shift+Enter组合键让你的编辑代码速度快了很多
  • 2017-05-12HTTPS的七个误解
  • 2017-05-12浏览器缓存知识小结及应用分析
  • 2017-05-12命令行下的2款网页截图工具推荐

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 关于代码阅读问题的小技巧 脚本之家原创(适合所有网站)不定时更新
    • HTTP状态码
    • 两分钟学会如何在github托管代码
    • Get方法和Post方法的区别深入理解
    • react-native在项目中使用半年后的感受
    • 关于IE11修改User-agent不再支持document.all等
    • IE条件语句 IE hack大全
    • GitHub Eclipse配置使用教程详解
    • NIOS EDS最容易出错的地方
    • 代码着色之SyntaxHighlighter项目(最流行的代码高亮)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有