前端笔试题

前端笔试题2.CSS5.jquery问题6.一些编程题1.匿名函数变量2.this指向3.定时7.js算法题2.一、前端编程答:•定义:•优雅降级（graceful degradation): 一开始就构建站点的完整功能，然后针对浏览器测试和修复•渐进增强（progressive enhancement): 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。

•都关注于同一网站在不同设备里不同浏览器下的表现程度•区别:•“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站. 而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla 等）的前一个版本。

•“渐进增强”观点则认为应关注于内容本身。

请注意其中的差别：我甚至连“浏览器”三个字都没提。

•理解:•"优雅降级"就是首先完整地实现整个网站,包括其中的功能和效果. 然后再为那些无法支持所有功能的浏览器增加候选方案, 使之在旧式浏览器上以某种形式降级体验却不至于完全失效.•"渐进增强"则是从浏览器支持的基本功能开始, 首先为所有设备准备好清晰且语义化的html及完整内容, 然后再以无侵入的方法向页面增加无害于基础浏览器的额外样式和功能. 当浏览器升级时, 它们会自动呈现并发挥作用.•问题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}问题9ie6,7不支持display:inline-block•解决方法: 设置inline并触法haslayout•display:inline-block; *display:inline; *zoom:1答:•文件合并（同上题“假若你有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调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。

•css文件放置在head，js放置在文档尾•在服务器端配置control-cache last-modify-date••在服务器配置Entity-Tag if-none-match•用更少的时间下载更多的文件，提高网站加载速度，提高用户体验，可以使用以下方法：• 1.css sprites----将小图片合并为一张大图片，使用background-position 等css属性取得图片位置• 2.将资源放在多个域名下-----打开控制台，可以看到很多网站都是这么做的~ •3.图片延迟加载-----很多电商网站、新闻网站，尤其是用到瀑布流展示图片的时候，很多都这么做了，这个技术已经很普遍~•书写代码的时候要注意优化：• 1.css•将可以合并的样式合并起来，比如margin-top、margin-bottom等。

•给img图片设置宽高，因为浏览器渲染元素的时候没有找到这两个参数，需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。

这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。

从而加载时间快了，浏览体验也更好了。

• 2.js•少改变DOM元素，少触发reflow，可以复用的代码提出来写成公共的等等……• 3.img•优化图片，不失真的情况下尽量减少图片大小，使用iconfont等4. 怎么学习前端? 怎么接触web新知识?5. 关于前后端分离:•前端：负责View和Controller层。

•后端：只负责Model层，业务处理/数据等。

•先说一下浏览器的结构：•①、用户界面（UI） - 包括菜单栏、工具栏、地址栏、后退/前进按钮、书签目录等，也就是能看到的除了显示页面的主窗口之外的部分；•②、浏览器引擎（Rendering engine） - 也被称为浏览器内核、渲染引擎，主要负责取得页面内容、整理信息（应用CSS）、计算页面的显示方式，然后会输出到显示器或者打印机；•③、JS解释器 - 也可以称为JS内核，主要负责处理javascript脚本程序，一般都会附带在浏览器之中，例如chrome的V8引擎；•④、网络部分 - 主要用于网络调用，例如：HTTP请求，其接口与平台无关，并为所有的平台提供底层实现；•⑤、UI后端 - 用于绘制基本的窗口部件，比如组合框和窗口等。

•⑥、数据存储 - 保存类似于cookie、storage等数据部分，HTML5新增了web database技术，一种完整的轻量级客户端存储技术。

•注：IE只为每个浏览器窗口启用单独的进程，而chrome浏览器却为每个tab 页面单独启用进程，也就是每个tab都有独立的渲染引擎实例。

•现在的主要浏览器：•IE、Firefox、Safari、Chrome、Opera。

•它们的浏览器内核（渲染引擎）：•IE--Trident、•FF(Mozilla)--Gecko、•Safari--Webkit、•Chrome--Blink（WebKit的分支）、•Opera--原为Presto，现为Blink。

•因此在开发中，兼容IE、FF、Opera（Presto引擎是逐步放弃的）、Chrome 和Safari中的一种即可，Safari、Chrome的引擎是相似的。

•文件加载顺序•浏览器加载页面上引用的CSS、JS文件、图片时，是按顺序从上到下加载的，每个浏览器可以同时下载文件的个数不同，因此经常有网站将静态文件放在不同的域名下，这样可以加快网站打开的速度。

•reflow•在加载JS文件时，浏览器会阻止页面的渲染，因此将js放在页面底部比较好。

•因为如果JS文件中有修改DOM的地方，浏览器会倒回去把已经渲染过的元素重新渲染一遍，这个回退的过程叫reflow。

•CSS文件虽然不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。

因为可能会有var width =$('#id').width()这样的语句，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。

•办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面。

•常见的能引起reflow的行为：• 1.改变窗囗大小• 2.改变文字大小• 3.添加/删除样式表• 4.脚本操作DOM• 5.设置style属性•等等……•reflow是不可避免的，只能尽量减小，常用的方法有：• 1.尽量不用行内样式style属性，操作元素样式的时候用添加去掉class类的方式• 2.给元素加动画的时候，可以把该元素的定位设置成absolute或者fixed，这样不会影响其他元素•repaint•另外，有个和reflow相似的术语，叫做repaint（重绘），在元素改变样式的时候触发，这个比reflow造成的影响要小，所以能触发repaint解决的时候就不要触发reflow……•动静分离需求，使用不同的服务器处理请求。