前端面试题整理

1. 前端和计算机相关知识   http://www.cnblogs.com/haoyijing/p/5789348.html
   1. 你能描述一下渐进增强和优雅降级之间的不同吗
   2. 浏览器兼容问题
   3. 如何对网站的文件和资源进行优化?
   4. 怎么学习前端?怎么接触前端新知识?
   5. 关于前后端分离
   6. 关于浏览器内核(渲染引擎)
   7. 浏览器加载文件顺序以及repaint/reflow
   8. 为什么使用多个域名来存储网络资源会更有效？
   9. 进程和线程的区别
   10. 前端开发的优化问题
   11. Flash，Ajax各自的优缺点，使用中如何取舍？
2. CSS
   1. CSS3
   2. css居中的方式
   3. 请写一个简单的幻灯效果页面
   4. 什么是无样式内容闪烁?如何避免?
   5. display:none和visibility:hidden的区别
   6. 解释浮动和工作原理
   7. 清除浮动
   8. 解释CSS Sprits,以及你要如何使用?
   9. 你最喜欢的图片替换方法是什么?你将如何使用?
   10. 讨论CSS hacks, 条件引用或其他
   11. 如何为有功能限制的浏览器提供网页
   12. 在书写高效CSS时会有哪些问题需要考虑?
   13. 如何优化网页的打印样式?
   14. 描述下你曾经使用过的CSS 预处理的优缺点
   15. 如果设计中使用了非标准的字体, 你将如何实现?

   16. 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？

   17. 解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

   18. 伪类的用法：

   19. 描述下"reset"css文件的作用和使用它的好处

   20. 请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？

   21. block, inline和inline-block的区别

   22. css动画和js动画的优缺点

   23. 你用过媒体查询，或针对移动端的布局/CSS 吗？

   24. 有哪些隐藏内容的方法(同时还要保证屏幕阅读器可用)
   25. CSS选择器级别
   26. alt和title的区别
   27. 知道bfc吗?
   28. 行内元素，块级元素，空元素各有哪些？
3. html

   1. h5的改进:

   2. 什么是语义化的html?

   3. 从前端角度出发谈谈做好seo应该注意什么?

   4. 文档类型(DOCTYPE)

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

   6. 如果网页内容需要多语言,要怎么做?

   7. data-*属性的作用

   8. 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？

   9. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

   10. 浏览器本地存储与服务器端存储之间的区别

   11. sessionStorage和页面js数据对象的区别

   12. canvas和svg的区别?

   13. href和src的区别

4. js

   1. ajax, 跨域, jsonp

   2. apply和call的用法和区别:

   3. bind函数的兼容性

   4. 解释下事件代理

   5. 解释下js中this是怎么工作的?

   6. 继承

   7. AMD vs. CommonJS？

   8. 什么是哈希表?

   9. 什么是闭包? 闭包有什么作用?

   10. 伪数组:

   11. undefined和null的区别, 还有undeclared:

   12. 事件冒泡机制:　　

   13. 解释下为什么接下来这段代码不是 IIFE(立即调用的函数表达式)：function foo(){ }();?

   14. "attribute" 和 "property" 的区别是什么？

   15. 请指出 document load 和 document ready 两个事件的区别。

   16. 什么是use strict? 其好处坏处分别是什么?

   17. 浏览器端的js包括哪几个部分?

   18. DOM包括哪些对象?

   19. js有哪些基本类型?

   20. 基本类型与引用类型有什么区别?

   21. 关于js的垃圾收集例程

   22. ES5中, 除了函数,什么能够产生作用域?

   23. js有几种函数调用方式?

   24. 描述事件模型?IE的事件模型是怎样的？事件代理是什么？事件代理中怎么定位实际事件产生的目标？

   25. js动画有哪些实现方法?

   26. 还有什么实现动画的方法?

   27. 面向对象有哪几个特点? 

   28. 如何判断属性来自自身对象还是原型链?

   29. ES6新特性

   30. 如何获取某个DOM节点，节点遍历方式

   31. 用LESS如何给某些属性加浏览器前缀？

   32. js异步模式如何实现？

   33. 事件机制，如何绑定事件处理函数

   34. 图片预加载

   35. 如果在同一个元素上绑定了两个click事件, 一个在捕获阶段执行, 一个在冒泡阶段执行. 那么当触发click条件时, 会执行几个事件? 执行顺序是什么?

   36. js中怎么实现块级作用域?

   37. 构造函数里定义function和使用prototype.func的区别？

   38. js实现对象的深克隆
5. jquery问题

6. 一些编程题

   1. 匿名函数变量
   2. this指向
   3. 定时

   4. 点击一个ul的五个li元素，分别弹出他们的序号，怎么做？

7. js算法题

   1.  js实现数组去重怎么实现?

一、前端编程

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

答:

• 定义:
  • 优雅降级（graceful degradation): 一开始就构建站点的完整功能，然后针对浏览器测试和修复
  • 渐进增强（progressive enhancement): 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。 
• 都关注于同一网站在不同设备里不同浏览器下的表现程度
• 区别:
  • “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站. 而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
  • “渐进增强”观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。
• 理解:
  • "优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
  • "渐进增强"则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能. 当浏览器升级时, 它们会自动呈现并发挥作用.

　　参考自: 渐进增强、优雅降级  渐进增强和优雅降级

2. 浏览器兼容问题:

• 问题1   不同浏览器的标签默认的外补丁和内补丁不同.
  • 即随便写几个标签, 在不加样式控制的情况下, 各自的margin和padding差异较大.
  • 解决方法: CCS里:   *{margin:0; padding:0}
• 问题2   块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大　　
  • 会使得ie6后面的一块被顶到下一行.
  • 解决方案: 在float的标签样式中加入 display: inline; 将其转化为行内属性
• 问题3  设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
  • IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
  • 解决方案: 给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
  • 原因: ie8之前的浏览器都会给标签一个最小默认的行高的高度. 即使标签是空的,这个标签的高度还是会达到默认的行高.
• 问题4  行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
  • 解决: 在display:block;后面加入display:inline;display:table;
• 问题5  图片默认有间距
  • 几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
  • 解决: 使用float属性为img布局
• 问题6  标签最低高度设置min-height不兼容
  • 因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
  • 如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
• 问题7  透明度的兼容CSS设置
  • 使用hacker
    • IE6认识的hacker是下划线_和*
    • IE7,遨游认识的hacker是*
• 问题8  IE ol的序号全为1, 不递增
  • 解决: li设置样式{display: list-item}
  问题9 

 ie6,7不支持display:inline-block

• 解决方法: 设置inline并触法haslayout
• display:inline-block; *display:inline; *zoom:1 

　　参考自: 常见浏览器兼容性问题与解决方案　　

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

答: 

• 文件合并（同上题“假若你有5个不同的 CSS 文件, 加载进页面的最好方式是？”）
  • 减少调用其他页面、文件的数量。一般我们为了让页面生动活泼会大量使用background来加载背景图，而每个 background的图像都会产生1次HTTP请求，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。
  • 每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。

• 文件最小化/文件压缩
  • 即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以 从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。
  • js和css文件在百度上搜一个压缩网站就能压缩，但是在实际开发的项目中，使用gulp、webpack等工具可以打包出合并压缩后的文件，小图片可以在打包时转换成base64方式引入，大图片可以被压缩，html文件也是可以被压缩的

• 使用 CDN 托管
  • CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

• 缓存的使用
  • Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的

你可能感兴趣的:(【前端面试点滴知识,】)

• HQL之投影查询 归来朝歌 HQLHibernate查询语句投影查询
          在HQL查询中，常常面临这样一个场景，对于多表查询，是要将一个表的对象查出来还是要只需要每个表中的几个字段，最后放在一起显示？ 针对上面的场景，如果需要将一个对象查出来： HQL语句写“from 对象”即可 Session session = HibernateUtil.openSession();
• Spring整合redis bylijinnan redis
  pom.xml <dependencies> <!-- Spring Data - Redis Library --> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redi
• org.hibernate.NonUniqueResultException: query did not return a unique result: 2 0624chenhong Hibernate
  参考：http://blog.csdn.net/qingfeilee/article/details/7052736 org.hibernate.NonUniqueResultException: query did not return a unique result: 2         在项目中出现了org.hiber
• android动画效果 不懂事的小屁孩 android动画
  前几天弄alertdialog和popupwindow的时候，用到了android的动画效果，今天专门研究了一下关于android的动画效果，列出来，方便以后使用。 Android 平台提供了两类动画。 一类是Tween动画，就是对场景里的对象不断的进行图像变化来产生动画效果（旋转、平移、放缩和渐变）。 第二类就是 Frame动画，即顺序的播放事先做好的图像，与gif图片原理类似。
• js delete 删除机理以及它的内存泄露问题的解决方案 换个号韩国红果果 JavaScript
  delete删除属性时只是解除了属性与对象的绑定，故当属性值为一个对象时，删除时会造成内存泄露  （其实还未删除） 举例： var person={name:{firstname:'bob'}} var p=person.name delete person.name p.firstname -->'bob' // 依然可以访问p.firstname，存在内存泄露
• Oracle将零干预分析加入网络即服务计划 蓝儿唯美 oracle
  由Oracle通信技术部门主导的演示项目并没有在本月较早前法国南斯举行的行业集团TM论坛大会中获得嘉奖。但是，Oracle通信官员解雇致力于打造一个支持零干预分配和编制功能的网络即服务（NaaS）平台，帮助企业以更灵活和更适合云的方式实现通信服务提供商（CSP）的连接产品。这个Oracle主导的项目属于TM Forum Live!活动上展示的Catalyst计划的19个项目之一。Catalyst计
• spring学习——springmvc（二） a-john springMVC
  Spring MVC提供了非常方便的文件上传功能。 1，配置Spring支持文件上传： DispatcherServlet本身并不知道如何处理multipart的表单数据，需要一个multipart解析器把POST请求的multipart数据中抽取出来，这样DispatcherServlet就能将其传递给我们的控制器了。为了在Spring中注册multipart解析器，需要声明一个实现了Mul
• POJ-2828-Buy Tickets aijuans ACM_POJ
  POJ-2828-Buy Tickets http://poj.org/problem?id=2828 线段树，逆序插入 #include<iostream>#include<cstdio>#include<cstring>#include<cstdlib>using namespace std;#define N 200010struct
• Java Ant build.xml详解 asia007 build.xml
  1,什么是antant是构建工具2,什么是构建概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个3,ant的好处跨平台   --因为ant是使用java实现的，所以它跨平台使用简单--与ant的兄弟make比起来语法清晰--同样是和make相比功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有
• android按钮监听器的四种技术 百合不是茶 androidxml配置监听器实现接口
  android开发中经常会用到各种各样的监听器,android监听器的写法与java又有不同的地方;    1,activity中使用内部类实现接口 ,创建内部类实例  使用add方法  与java类似   创建监听器的实例 myLis lis = new myLis();   使用add方法给按钮添加监听器  
• 软件架构师不等同于资深程序员 bijian1013 程序员架构师架构设计
          本文的作者Armel Nene是ETAPIX Global公司的首席架构师，他居住在伦敦，他参与过的开源项目包括 Apache Lucene,，Apache Nutch， Liferay 和 Pentaho等。         如今很多的公司
• TeamForge Wiki Syntax & CollabNet User Information Center sunjing TeamForgeHow doAttachementAnchorWiki Syntax
  the CollabNet user information center http://help.collab.net/   How do I create a new Wiki page? A CollabNet TeamForge project can have any number of Wiki pages. All Wiki pages are linked, and
• 【Redis四】Redis数据类型 bit1129 redis
  概述 Redis是一个高性能的数据结构服务器，称之为数据结构服务器的原因是，它提供了丰富的数据类型以满足不同的应用场景，本文对Redis的数据类型以及对这些类型可能的操作进行总结。 Redis常用的数据类型包括string、set、list、hash以及sorted set.Redis本身是K/V系统，这里的数据类型指的是value的类型，而不是key的类型，key的类型只有一种即string
• SSH2整合-附源码 白糖_ eclipsespringtomcatHibernateGoogle
  今天用eclipse终于整合出了struts2+hibernate+spring框架。 我创建的是tomcat项目，需要有tomcat插件。导入项目以后，鼠标右键选择属性，然后再找到“tomcat”项，勾选一下“Is a tomcat project”即可。具体方法见源码里的jsp图片，sql也在源码里。     补充1：项目中部分jar包不是最新版的，可能导
• [转]开源项目代码的学习方法 braveCS 学习方法
  转自： http://blog.sina.com.cn/s/blog_693458530100lk5m.html http://www.cnblogs.com/west-link/archive/2011/06/07/2074466.html   1）阅读features。以此来搞清楚该项目有哪些特性2）思考。想想如果自己来做有这些features的项目该如何构架3）下载并安装d
• 编程之美-子数组的最大和（二维） bylijinnan 编程之美
  package beautyOfCoding; import java.util.Arrays; import java.util.Random; public class MaxSubArraySum2 { /** * 编程之美 子数组之和的最大值（二维） */ private static final int ROW = 5; private stat
• 读书笔记-3 chengxuyuancsdn jquery笔记resultMap配置ibatis一对多配置
  1、resultMap配置 2、ibatis一对多配置 3、jquery笔记 1、resultMap配置 当<select resultMap="topic_data"> <resultMap id="topic_data">必须一一对应。 (1)<resultMap class="tblTopic&q
• [物理与天文]物理学新进展 comsci
        如果我们必须获得某种地球上没有的矿石,才能够进行某些能量输出装置的设计和建造,而要获得这种矿石,又必须首先进行深空探测,而要进行深空探测,又必须获得这种能量输出装置,这个矛盾的循环,会导致地球联盟在与宇宙文明建立关系的时候,陷入困境       怎么办呢?  
• Oracle 11g新特性:Automatic Diagnostic Repository daizj oracleADR
  Oracle Database 11g的FDI（Fault Diagnosability Infrastructure）是自动化诊断方面的又一增强。 FDI的一个关键组件是自动诊断库（Automatic Diagnostic Repository-ADR）。 在oracle 11g中，alert文件的信息是以xml的文件格式存在的，另外提供了普通文本格式的alert文件。 这两份log文
• 简单排序:选择排序 dieslrae 选择排序
  public void selectSort(int[] array){ int select; for(int i=0;i<array.length;i++){ select = i; for(int k=i+1;k<array.leng
• C语言学习六指针的经典程序，互换两个数字 dcj3sjt126com c
  示例程序，swap_1和swap_2都是错误的，推理从1开始推到2，2没完成，推到3就完成了 # include <stdio.h> void swap_1(int, int); void swap_2(int *, int *); void swap_3(int *, int *); int main(void) { int a = 3; int b =
• php 5.4中php-fpm 的重启、终止操作命令 dcj3sjt126com PHP
  php 5.4中php-fpm 的重启、终止操作命令: 查看php运行目录命令：which php/usr/bin/php 查看php-fpm进程数：ps aux | grep -c php-fpm 查看运行内存/usr/bin/php  -i|grep mem 重启php-fpm/etc/init.d/php-fpm restart 在phpinfo()输出内容可以看到php
• 线程同步工具类 shuizhaosi888 同步工具类
  同步工具类包括信号量（Semaphore）、栅栏（barrier）、闭锁（CountDownLatch）   闭锁（CountDownLatch） public class RunMain { public long timeTasks(int nThreads, final Runnable task) throws InterruptedException { fin
• bleeding edge是什么意思 haojinghua DI
  不止一次，看到很多讲技术的文章里面出现过这个词语。今天终于弄懂了——通过朋友给的浏览软件，上了wiki。  我再一次感到，没有辞典能像WiKi一样，给出这样体贴人心、一清二楚的解释了。为了表达我对WiKi的喜爱，只好在此一一中英对照，给大家上次课。   In computer science, bleeding edge is a term that
• c中实现utf8和gbk的互转 jimmee ciconvutf8&gbk编码
  #include <iconv.h> #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <fcntl.h> #include <string.h> #include <sys/stat.h> int code_c
• 大型分布式网站架构设计与实践 lilin530 应用服务器搜索引擎
  1.大型网站软件系统的特点？ a.高并发，大流量。 b.高可用。 c.海量数据。 d.用户分布广泛，网络情况复杂。 e.安全环境恶劣。 f.需求快速变更，发布频繁。 g.渐进式发展。 2.大型网站架构演化发展历程？ a.初始阶段的网站架构。 应用程序，数据库，文件等所有的资源都在一台服务器上。 b.应用服务器和数据服务器分离。 c.使用缓存改善网站性能。 d.使用应用
• 在代码中获取Android theme中的attr属性值 OliveExcel androidtheme
  Android的Theme是由各种attr组合而成, 每个attr对应了这个属性的一个引用, 这个引用又可以是各种东西.   在某些情况下, 我们需要获取非自定义的主题下某个属性的内容 (比如拿到系统默认的配色colorAccent), 操作方式举例一则: int defaultColor = 0xFF000000; int[] attrsArray = { andorid.r.
• 基于Zookeeper的分布式共享锁 roadrunners zookeeper分布式共享锁
  首先，说说我们的场景，订单服务是做成集群的，当两个以上结点同时收到一个相同订单的创建指令，这时并发就产生了，系统就会重复创建订单。等等......场景。这时，分布式共享锁就闪亮登场了。   共享锁在同一个进程中是很容易实现的，但在跨进程或者在不同Server之间就不好实现了。Zookeeper就很容易实现。具体的实现原理官网和其它网站也有翻译，这里就不在赘述了。   官
• 两个容易被忽略的MySQL知识 tomcat_oracle mysql
  1、varchar(5)可以存储多少个汉字，多少个字母数字？ 　　相信有好多人应该跟我一样，对这个已经很熟悉了，根据经验我们能很快的做出决定，比如说用varchar(200)去存储url等等，但是，即使你用了很多次也很熟悉了，也有可能对上面的问题做出错误的回答。 　　这个问题我查了好多资料，有的人说是可以存储5个字符，2.5个汉字（每个汉字占用两个字节的话），有的人说这个要区分版本，5.0
• zoj 3827 Information Entropy(水题) 阿尔萨斯 format
  题目链接：zoj 3827 Information Entropy 题目大意：三种底，计算和。 解题思路：调用库函数就可以直接算了，不过要注意Pi = 0的时候，不过它题目里居然也讲了。。。limp→0+plogb(p)=0，因为p是logp的高阶。 #include <cstdio> #include <cstring> #include <cmath&

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.