深圳市同步齿科医疗股份有限公司（套题）
| 选择题 | 填空题 | 问答题 | 编程题 | 试题难度 |
|---|---|---|---|---|
| 0 | 0 | 19 | 0 | 一般 |
问答题
1、块级元素和行内元素有哪些？（写出常见即可）行内元素可在同一行显示，块级元素独占一行显示
块级元素: <h1>~<h6>,<p>,<div>, ul-li ,ol-li,dl-dt-dd,<table>
行内元素: <span>,<font>,<strong>,<a>,<img>,<input>,<em>,<iframe>,<i>,<label>
2、什么是盒子模型？答：
CSS盒子模型(也叫框模型)就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
盒子模型和我们日常生活中的盒子一样，也就是能装东西的一种容器。
它包括的属性有:边框(border)、内边距(padding)也叫填充、外边距(margin)和内容(content)也就是width和height。
盒子模型分IE和W3C两种盒子模型
W3C(标准)盒子模型的内容content宽度=width
IE(怪异)盒子模型的内容content宽度=width+padding+border 组成
所以W3C盒子的总尺寸=宽高+padding+border+margin
IE盒子的总尺寸=content+margin
最终IE盒子和W3C标准盒子的总尺寸是一样的
补充回答以下一点
在css3中，可以使用box-sizing来设定，通常我们要设定 box-sizing:border-box;指定盒子模型为IE盒子模型，方便布局。
补充知识更有说服力，面试官会给你比较深刻的印象。
3、px、em和rem的区别？px：是像素，根据屏幕的分辨率来显示的
em：相对长度单位，相对父节点font-size大小的倍数关系。
rem:是根据根节点<html>的font-size大小的倍数关系。
4、css居中的方法（能写多少写多少）文本水平居中: text-align:center;
文本垂直居中: vertical-align:middle;
盒子水平居中: margin:0px auto;
使用position定位进行居中设置：
position：fixed. top:50%; left:50%;
position:absolute; 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
弹性盒子
父元素： display:flex;
子元素：margin:auto;
单元格
父元素： display: table-cell;text-align: center;vertical-align: middle;
子元素：display: inline-block;
5、css引入的方式有哪些？link和@import的区别是？css引入方式有：文档内部引入(内部样式表)、外部引入(外部样式表)、标签引入（行内样式）
link和@import的区别：
link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。
另外link还有其他的一些用途，比如引入图标 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
6、说明css优先级顺序答：
css样式的优先级是这样的
!important优先级最高，其次就是行内样式，再次是权重值，权重值高的优先应用。
权重值计算是这样的，ID为100 class为10 标签为1，对于复合选择器，将这些权重值相加得到。
对于优先级的级别相同的情况，后面的样式会覆盖前面的样式。
注意：面试必须言简意赅，不要讲过多的废话，每句话都要说到要点上。
7、都知道哪些css浏览器兼容问题1.最常见的兼容性问题就是，不同浏览器的默认margin和padding值不同，一般都需要初始化样式
*{margin:0;padding:0;}
2.图片默认有间距，可以使用浮动图片或设置图片行内块级元素解决
3.透明度一般浏览器使用opacity，IE浏览器使用滤镜filter来设置。
强调：兼容性存在的问题很多，你只需要讲出三个常用的兼容性就可以了。
css hack主要是针对IE浏览器的不同版本这是样式。大致分为三种形式的hack
第一种：属性级Hack：比如IE6能识别下划线”_”和星号” * “，IE7能识别星号” * “，但不能识别下划线”_”，而firefox两个都不能认识。
第二种：选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
第三种：IE条件注释Hack，通常用于判断浏览器的版本。
例如针对所有IE：<!–[if IE]><!–您的代码–><![endif]–>
针对IE6及以下版本：<!–[if lt IE 7]><!–您的代码–><![endif]–>
8、JavaScript的常用数据类型有哪些？并举例说明。基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object, Array, Function
9、js数组和字符串常用函数数组方法:
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.sort( ) 对数组元素进行排序
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素
字符串方法:
String.charAt( ) 返回字符串中的第n个字符
String.concat( ) 连接字符串
String.indexOf( ) 检索字符串
String.lastIndexOf( ) 从后向前检索一个字符串
String.match( ) 找到一个或多个正则表达式的匹配
String.replace( ) 替换一个与正则表达式匹配的子串
String.search( ) 检索与正则表达式相匹配的子串
String.split( ) 将字符串分割成字符串数组
String.substr( ) 抽取一个子串
String.substring( ) 返回字符串的一个子串
String.toLowerCase( ) 将字符串转换成小写
String.toUpperCase( ) 将字符串转换成大写
10、什么是重构重构（Refactoring）就是通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。
软件产品最初制造出来，是经过精心的设计，具有良好架构的。但是随着时间的发展、需求的变化，必须不断的修改原有的功能、追加新的功能，还免不了有一些缺陷需要修改。为了实现变更，不可避免的要违反最初的设计构架。经过一段时间以后，软件的架构就千疮百孔了。bug越来越多，越来越难维护，新的需求越来越难实现，软件的架构对新的需求渐渐的失去支持能力，而是成为一种制约。最后新需求的开发成本会超过开发一个新的软件的成本，这就是这个软件系统的生命走到尽头的时候。
重构就能够最大限度的避免这样一种现象。系统发展到一定阶段后，使用重构的方式，不改变系统的外部功能，只对内部的结构进行重新的整理。通过重构，不断的调整系统的结构，使系统对于需求的变更始终具有较强的适应能力。
重构可以降低项目的耦合度，使项目更加模块化，有利于项目的开发效率和后期的维护。让项目主框架突出鲜明，给人一种思路清晰，一目了然的感觉，其实重构是对框架的一种维护。
11、浏览器的内核分别是什么？IE:trident内核
Firefox：gecko内核
safari：webkit内核
opera：以前是presto内核，现在改用google chrome的Blink内核
Chrome：Blink（基于webkit，google与opera software共同开发）
12、简述一下src和href的区别？src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
<script src =”js.js”></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href=”common.css” rel=”stylesheet”/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
13、输入url到页面出现到页面出现完成经历了什么过程答：根据域名查找服务器，下载服务器的文档内容，下载完后浏览器开始解释执行这些html代码，渲染页面，并行下载所需的资源，图片、css、js文件等。
14、常见的HTTP协议的状态消息都有哪些？200 已成功处理了请求。
304 请求的网页未修改过。
401 请求要求身份验证。
403 拒绝请求
404 找不到请求的网页。
500 服务器错误
15、测试网页包括哪些方面？1.页面效果是否美观
2.链接是否完好
3.页面功能（如验证、交互等）是否正确
4.浏览器的兼容性
5.安全性检查。不用太专业，找些免费的服务或者工具，简单扫描下自己的网站，把那些严重的漏洞补上。
6.前端页面性能检查。用各种技术手段尽可能加快页面的加载和展示，可以考虑服务端缓存，过期，压缩，重新切图等等。
7.易用性检查。检查新用户注册，参与使用等一系列基本流程是否流畅方便，引导和帮助是否到位。
8.基本信息检查。联系地址，联系方式，客服等等的信息是否准确完善。
9.搜索引擎优化。
16、前端优化1.减少http请求
HTTP协议是无状态的应用层协议，意味着每次HTTP请求都需要简历通信链路，进行数据传输，而在服务器
端，每个HTTP都需要启动独立的线程去处理，这些通信和服务的开销都很昂贵，减少HTTP请求的数目可有效
提高访问性能。
减少HTTP请求的主要手段是合并CSS，合并JavaScript，合并图片。将浏览器一次访问需要的JavaScript,CSS
合并成一个文件，这样浏览器就只需要一次请求。多张图片合并成一张，如果每张图片都有不同的超链接，
可通过CSS偏移响应鼠标点击操作，构造不同的URL。
(2)使用浏览器缓存
对一个网站而言，CSS,JavaScript,Logo,图标等这些静态资源文件更新的频率都比较低，而这些文件又几乎
是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。通过设置HTTP头中
Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天甚至是几个月。有时候，静态资源
文件变化需要及时应用到客户端浏览器，这种情况可以通过改变文件名实现，比如一般会在JavaScript后面
加上一个版本号，使浏览器刷新修改的文件。
(3)启用压缩
在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效较少通信传输的数据量。文本文件的压缩效
率科大80%以上。
(4)CSS放在页面最上面，JavaScript放在页面最下面
浏览器会在下载完全部CSS之后对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽
快下载CSS。JS则想法，浏览器在加载JS后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此JS最
好放在页面最下面。
(5)性能优化主要是围绕执行速度来做的。通常的做法是这样的
1.使用图片精灵，将多个图标放在一个图片上，然后通过背景图片定位来显示图标
2.有些图标使用使用阿里字体的，使用他们自带的云加速器下载字体文件
3.在首次加载的时候，将所需要的数据都放在一个接口上返回，减少请求的数量，经过测试这个效果还是挺
明显的.
4.在编码上，我们通过会将this对象存储到临时变量，减少this查找的时间。
5.对于频繁使用的数据，会将数据缓存起来，减少多次请求接口。
6.使用压缩工具，对html、css、js文件，进行合并压缩处理，减少文件的体积。
7，对于数据较大的加载，通常采用分页加载或是按需加载或是延迟加载来处理。
这是我们比较常见的优化手段。
17、如何做好SEO优化？这个问题看起来好像与前端没有关系，很多问道这个问题是绝对的蒙蔽。
答：seo就是搜索引擎优化，未能够让搜索引擎的爬虫程序理解我们的代码的，我们就需要将代码语义化，
尽量使用语义化标签布局页面，比如标题标题，一个页面只能包含一个h1标签，nav(导航),header（头
部）,footer（页脚）,main（主容器）等。除了语义化标签外，在<head>里经常设置以下信息
1.keywords 关键词的设定
2.description网页描述信息
3.title 网页的标题信息
4.author 作者信息
除了这些在我们的项目里不使用firame布局，对img标签加上alt属性。还有很多，以上是我在做前端比较常用到的。
18、TCP和UDP的主要优缺，https和http的区别？TCP：
优点：可靠 稳定
缺点：慢，效率低，占用系统资源高，易被攻击
UDP：
优点：快，比TCP稍安全
缺点：不可靠，不稳定
HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。
简单来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全。
HTTPS和HTTP的区别主要如下：
1、https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。