问题总结（二）

1. 说一说你对web标准的理解

它不是一个标准，而是有很多标准组合而成的结果。

网页包含结构（HTML），表现（CSS）和行为（JavaScript）。

2. 浏览器的内核与区别

• Trident(又称为MSHTML）代表 IE 浏览器

  • Trident是微软开发的一种排版引擎。
  • 基于Trident内核的浏览器有 ie6、ie7、ie8(Trident 4.0) 、ie9(trident 5.0) 、ie10(trident6.0)、ie11(trident7.0)、国内的很多双核浏览器也是基于trident内核的，例如：世界之窗、360安全浏览器、遨游2.0（3.0以上版本开始采用webkit内核）、搜狗浏览器、腾讯浏览器等

• Gecko（跨平台）代表 Mozilla Firefox

  • Gecko是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用
  • 正在和曾经使用Gecko引擎的浏览器有Firefox、网景6～9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。
  • Google Gadget引擎采用的就是Gecko浏览器引擎。

• WebKit内核（代表：Safari、Chrome）

  • WebKit 是一个开放源代码的浏览器引擎(Web Browser Engine)。WebKit也是自由软件，同时开放源代码。它的特点在于源码结构清晰、渲染速度极快。主要代表产品有Safari和Google的浏览器Chrome。
  • WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。
  • WebKit内核也广泛应用于Widget引擎产品，包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。

• Presto内核（代表：Opera）

  • Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。
  • Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。
  • Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。
  • Presto是商业引擎，除了Opera以外较少浏览器使用Presto内核，这在一定程度上限制了Presto的发展。

老的IE浏览器有一套自己的标准，其他内核的浏览器都在尽量遵守 W3C 标准

360安全浏览器

极速模式是由Chrome的内核，而兼容模式是IE内核。

3.  CSS与盒模型

IE盒模型和标准盒模型：

盒模型：内容（content）， 填充（padding），边框（border）和边界（margin）。

IE 的盒模型的content部分包含padding和border部分。

box-sizing的属性允许以特定的方式定义和匹配某个区域的特定元素，常见的border-box | content-box |inherit（继承）。

IE8+支持该属性。

content-box:

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )

此属性表现为标准模式下的盒模型。

border-box:

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

此属性表现为怪异模式下的盒模型。

4. CSS3的最新的属性

        圆角 ——border-radius；

        阴影——box-shadow；        

        文字阴影——text-shadow;

        渐变——gradient；

        转变——transform（旋转：rotate    缩放：scale   定位：translate     倾斜：skew）

        多背景——使用逗号隔开

        颜色——rgba（红、绿、蓝、透明度）

        边框背景——border-image；

        服务器端字体——font-face        

1. @font-face {
2. 　　font-family:'MyFont';/* 表示为这种字体起一个名称，可以随意设置，这里用的是MyFont */
3. 　　src: url('myfont.eot');/* 这一行表示字体位置，由于ie只支持服务器端的eot字体，所以这一行是ie专用的 */
4. 　　src:local('myfont.ttf'),
5. 　　url('myfont.woff') format('woff'),
6. 　　url('myfont.ttf') format('truetype');/* local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体格式。Firefox 3.5支持TrueType和OpenType字体，Firefox 3.6又增加了WOFF字体。其他基于Webkit引擎的浏览器（sarif，opera、chrome），目前好像只支持truetype */
7. }
8. /*使用：*/
9. h1{font-family:'MyFont';}

        选择器的增加:

        伪元素的增加selection

        媒体查询：

1. 1. 1. /** * 1200+ * 内容宽度：1190px 页面内容居中 * 匹配默认样式 */
      2. .box {
      3. width:1190px;
      4. margin:auto;
      5. }
      6. /* 1024-1199 内容宽度990 页面内容居中 */
      7. @media only screen and (max-width:1199px){
      8. .box {
      9. width:990px;
      10. }
      11. }
      12. /* 768-1023 内容宽度740 页面内容居中 */
      13. @media only screen and (max-width:1023px){
      14. .box {
      15. width:740px
      16. }
      17. }
      18. /* 768 ipad竖屏：(orientation:portrait) ipad横屏：(orientation:landscape) */
      19. @media only screen and (max-width:768px) and (orientation:portrait){}
      20. /** * 640-767 内容宽度590
      21. * 两边间距25，页面内容居中 */
      22. @media only screen and (max-width:767px){
      23. .box {
      24. width:590px
      25. }
      26. }
      27. /** *481-639
      28. * 按百分比缩放，最小缩放到320 */
      29. @media only screen and (max-width:639px){
      30. .box {
      31. width:98%;
      32. }
      33. }
      34. /** *320-479
      35. * 按百分比缩放，最小缩放到320 */
      36. @media only screen and (max-width:479px){
      37. .box {
      38. width:95%
      39. }
      40. }
      41. /* 设置320px以下的样式 */
      42. @media only screen and (max-width:320px){
      43. .box {
      44. min-width:320px;
      45. }
      46. }
       

        多栏布局和弹性布局

1. flex-box:
3. 弹性布局，适应性强，在做不同屏幕分表率的界面时非常实用
4. 可以随意按照宽度、比例划分元素的宽高
5. 可以轻松改变元素的显示顺序
6. 自适应布局实现快捷，易维护
7. 属性：
8. .flex{
9. display: box;// 将一个元素的子元素以弹性布局进行布局
10. box-flex:1;// 子元素如何分配剩余空间
11. box-orient: horizontal | vertical |inline-axis | block-axis | inherit;// 子元素的排列方式（横向或者竖向）
12. box-direction: normal | reverse | inherit;// 子元素排列顺序
13. box-align: start |end| center | baseline | stretch;// 垂直对齐方式
14. box-pack: start |end| center | justify;// 水平对齐方式
15. box-ordinal-group:;// 子元素的显示顺序
16. }

5. HTML5新特性

        新增加了语义化的标签：footer，header，main，aside，article，nav等

        删除了一些无意义的标签：basefont、big、center、font、s、strike、tt、u等

        input标签新增属性

• 1. email 
  2. 必须输入email
  3. url 
  4. 必须输入url地址
  5. number 
  6. 必须输入数值
  7. range 
  8. 必须输入一定范围内数值
  9. DatePickers（日期选择器） 
  10. 拥有多个可供选取日期和时间的新输入类型： 
  11. date -选取日、月、年 
  12. month -选取月、年 
  13. week -选取周和年 
  14. time -选取时间（小时和分钟） 
  15. datetime -选取时间、日、月、年（UTC 时间） 
  16. datetime-local -选取时间、日、月、年（本地时间）
  17. search 
  18. 用于搜索域，域显示为常规的文本域。
  19. color
  音频视频等元素的增加
  画布canvas API的增加
  获取地理位置的Geolocation API
  本地存储 LocalStorage （长期数据存储，不手动删除则一直存在）http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
  sessionStroage（数据在浏览器关闭后自动删除）
  http://www.cnblogs.com/zhanglm125/p/4206482.html

  6. JavaScript的数据类型

  基本数据类型，实际值保存在变量中：

  undefined

  null

  number

  string

  boolean    

  引用数据类型，引用类型的值保存在内存中的对象

  Object

  Date

  Array

  RegExp

  引用数据类型得指向只是一个路径，例如a = b（b是引用类型），a的值改变b的值也会改变

  7. 前端语义化的理解

  去掉或者是失去样式的时候页面能够呈现出清晰的结构。

  有利于SEO 和搜索引擎建立良好的沟通，有利于爬虫抓取更多有效信息，爬虫是通过标签来给与权重，如(

  h1的权重要高于p)

  方便其他设备解析（屏幕阅读器，盲人阅读器，移动设备等）以有意义的方式来渲染网页。

  便于团队的开发与维护，语义化可以增加网页的可读性，遵循W3C的标准，更高效的开发。

  8. JQuery的优缺点

  2. 优点：
  1. jQuery实现脚本与页面的分离
  2. 性能：在大型JavaScript框架中，jQuery对性能的理解最好。
  3. 它是一个“标准”：虽然并不是官方标准，但业内对jQuery的支持经非常广泛
  4. 丰富的插件：基于jQuery开发的插件种类很多，能解决大部分问题，前端工程师还可以根据项目需要自行封装不同需求的插件。
  5. 入门简单、易学，节约学习成本。
  6. 轻量级，最新的版本压缩的jquery代码只有十几k
  7. 强大的选择器，提供多重选择
  8. 出色的DOM操作的封装：jQuery封装了大量常用DOM操作，使你编写DOM操作相关程序的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序
  9. 完善的Ajax
  10. 可靠的事件处理机制
  11. 不污染顶级变量
  12. 出色的浏览器兼容性
  13. 链式操作方式
  14. 行为层与结构层的分离
  15. 完善的文档
  16. 开源
  3. 缺点：
  1. 从上面的介绍可以看出 jquery的优点很多，当然任何一个框架都不是完美的，jQuery也有自身的缺陷，下面就罗列下jQuery的缺点和劣势。
  2. 不能向后兼容：每一个新版本不能兼容早期的版本
  3. 插件兼容性
  4. 在同一页面上使用多个插件时，很容易碰到冲突现象
  5. jQuery的稳定性
  6. 在大型框架中，jQuery核心代码库对动画和特效的支持相对较差

  9. 前端安全的检测与预防

      基本攻击可以分为三大类——资源枚举、参数操作、其他攻击

      资源枚举：遍历所有可以访问的目录，然后将一些常见的"备胎"文件名（sql.bak, index.html）如果枚举到就直接下载。
  

      参数操作：包含Sql注入，XXS，会话劫持等，xss指的是在web中插入恶意的html代码。
  

      cookie劫持，通过获取用户的权限，到恶意站点的访问，并携带用户的cookie，获取用户的cookie后直接用被盗用户的身份登录站点。
  

      解决方案：
  

      永远不要相信客户端传过来的信息，对传过来的信息进行过滤和编码处理。

      使用黑名单和白名单处理（即“不允许哪些敏感信息”或“只允许哪些信息”，白名单的效果更好但局限性高）

      检查、验证请求来源，对每一个重要的操作都进行重新验证使用SSL防止第三方监听通信（但无法阻止XSS、CSRF、SQL注入攻击）

      不要将重要文件、备份文件存放在公众可访问到的地方

      会话ID无序化

      对用户上传的文件进行验证（不单单是格式验证，比方一张gif图片还应将其转为二进制并验证其每帧颜色值<无符号8位>和宽高值<          无符号16位>）

      WSDL文档应当要求用户注册后才能获取

   

  参考地址： http://www.iqianduan.net/blog/web-front-interview-question

   
   

   

   

   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

来自为知笔记(Wiz)