摘要: 前端开发面试知识点大纲: 前端开发面试知识点大纲: 1.请你谈谈Cookie的弊端 1.请你谈谈Cookie的弊端 cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。 第一:每个特定的域名下最多生成20个cookie IE和Opera 会清理近期最少使用的 阅读全文
posted @ 2018-03-07 22:10 墨羽如烟 阅读(166) 评论(0) 推荐(0)
摘要: 一、请解释 CSS 动画和 JavaScript 动画的优缺点。 JS动画缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况。(2)代码的复杂度高于CSS动画优点: 阅读全文
posted @ 2018-03-07 21:31 墨羽如烟 阅读(123) 评论(0) 推荐(0)
摘要: 一、使用 data- 属性的好处是什么? HTML5规范里增加了一个自定义data属性.为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取<div data-author="david" data-time=" 阅读全文
posted @ 2018-03-07 21:25 墨羽如烟 阅读(113) 评论(0) 推荐(0)
摘要: 一、你熟悉 SVG 样式的书写吗? <svg>是绘制矢量图形的HTML5的标签,它是用SVG 使用 XML 格式定义图形的。其定义格式为: <?xml version="1.0" standalone="no"?>//XML标准文件头,从左到右依次表示:版本号是1.0,standalone定义了外部 阅读全文
posted @ 2018-03-07 21:05 墨羽如烟 阅读(112) 评论(0) 推荐(0)
摘要: 一、请问为何要使用 translate() 而非 absolute positioning,或反之的理由?为什么? 使用 transform 或 position 实现动画效果时是有很大差别。 使用 transform 时,可以让 GPU 参与运算,动画的 FPS 更高。 使用 position 时 阅读全文
posted @ 2018-03-07 20:51 墨羽如烟 阅读(143) 评论(0) 推荐(0)
摘要: 一、请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处? 这就是将所有元素的border和padding算在width和height里了,就变成了ie的盒模型了。使用 * { box-sizing: border-box; }能够统一IE和非IE浏 阅读全文
posted @ 2018-03-07 20:45 墨羽如烟 阅读(245) 评论(0) 推荐(0)
摘要: 一、html 渐进式渲染 你需要尽早将 HTML 字节给到浏览器。比如:一个请求进来了,(理想状态下)你的数据被缓存起来,因此服务器能够快速获取。然后,浏览器开始解析数据,并在屏幕上呈现出来。对于此次 WebPageTest,在 1.5 秒就得到了第一屏,但是你能看到,它没有包含所有内容。它包含的内 阅读全文
posted @ 2018-03-07 20:30 墨羽如烟 阅读(173) 评论(0) 推荐(0)
摘要: 一、描述z-index和叠加上下文是如何形成的。 首先来看在CSS中叠加上下文形成的原因: 1.负边距 margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-right和mar 阅读全文
posted @ 2018-03-07 20:23 墨羽如烟 阅读(215) 评论(0) 推荐(0)
摘要: 一、请解释事件代理 (event delegation)。 首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制 那些需要创 阅读全文
posted @ 2018-03-07 20:12 墨羽如烟 阅读(109) 评论(0) 推荐(0)
摘要: 一、请解释 inline 和 inline-block 的区别? 行内元素和行内块级元素,最基本的区别就是inline元素不能设置宽高边距,inline-block则可以,block是块级元素是独占一行的,inline-block就是能放在一行的block。关于这个问题,低版本的ie是有bug的,通 阅读全文
posted @ 2018-03-07 20:08 墨羽如烟 阅读(105) 评论(0) 推荐(0)
摘要: 一、请解释浏览器是如何判断元素是否匹配某个 CSS 选择器? 先产生一个元素集合,然后从后往前判断; 浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就 阅读全文
posted @ 2018-03-07 19:55 墨羽如烟 阅读(80) 评论(0) 推荐(0)
摘要: 一、在书写高效 CSS 时会有哪些问题需要考虑? 1.样式是:浏览器是从右向左来解析一个选择器的 2.ID最快,Universal最慢 有四种类型的key selector,解析速度由快到慢依次是:ID、class、tag和universal 3.不要tag-qualify (永远不要这样做 ul# 阅读全文
posted @ 2018-03-07 19:48 墨羽如烟 阅读(108) 评论(0) 推荐(0)
摘要: 一、如何为有功能限制的浏览器提供网页? 我们知道 js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息。因而通过userAgent来限制访问是个不错的方法。 二、有哪些的隐藏内容的方法(如果同时还要保证屏幕阅读器可用呢?) 1.display:none;的缺陷 阅读全文
posted @ 2018-03-07 19:38 墨羽如烟 阅读(120) 评论(0) 推荐(0)
摘要: 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案:CSS里 {margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎 阅读全文
posted @ 2018-03-07 19:32 墨羽如烟 阅读(397) 评论(0) 推荐(0)
摘要: 一、你最喜欢的图片替换方法是什么,你如何选择使用。 设计师能够用一张背景图像替代某元素中的原始文字,以期显示出更美观的字体。 实现方法 : 1、添加span标签 该技巧的实现非常简单:用span将元素中的文本包围起来,然后通过应用CSS样式隐藏这个span中的文本,最后将背景图像应用到该元素之上即可 阅读全文
posted @ 2018-03-07 12:34 墨羽如烟 阅读(203) 评论(0) 推荐(0)
摘要: 一、列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。 首先来说明为什么要清除浮动? 当一个容器中的元素全部浮动之后,由于浮动会让元素脱离普通文档流,所以对于外面的这个容器来讲它就没有内容将它撑开,背景设置无法显示,margin设置无法显示。 清除浮动的方法: 1、添加新的元素 、应用 cle 阅读全文
posted @ 2018-03-07 12:27 墨羽如烟 阅读(176) 评论(0) 推荐(0)
摘要: 一、请描述 cookies、sessionStorage 和 localStorage 的区别。 软件编程希望通过一些手段来持久化的存储一些有用的数据。对于网络化编程,一般将这项任务交给了服务器端的数据库或者浏览器端的cookie。随着HTML5的出现,web开发又有了两种选择:Web Storag 阅读全文
posted @ 2018-03-07 12:16 墨羽如烟 阅读(122) 评论(0) 推荐(0)
摘要: 一、如果网页内容需要支持多语言,你会怎么做? 采用统一编码UTF-8方式编码:应用字符集的选择;所以对提供了多语言版本的网站来说,Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集,不管是东方文字还是西方文字,在Unicode中一律用两个字节来表示,因而至少可以定义65536个不 阅读全文
posted @ 2018-03-07 12:08 墨羽如烟 阅读(135) 评论(0) 推荐(0)
摘要: 一、doctype(文档类型) 的作用是什么? doctype使浏览器按照dtd指定的渲染方式对页面进行渲染 Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。 HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HT 阅读全文
posted @ 2018-03-07 12:02 墨羽如烟 阅读(327) 评论(0) 推荐(0)
摘要: 一、什么是跨域资源共享 (CORS)?它用于解决什么问题? 默认情况下,为预防某些而已行为,浏览器的XHR对象只能访问来源于同一个域中的资源。但是我们在日常实际开发中,常常会遇到跨域请求的需求,因此就出现了一种跨域请求的方案:CORS(Cross-Origin Resource Sharing)跨域 阅读全文
posted @ 2018-03-07 11:54 墨羽如烟 阅读(105) 评论(0) 推荐(0)
摘要: 一、你如何对网站的文件和资源进行优化? 1.尽可能减少http请求次数,将css, js, 图片各自合并 2.使用CDN,降低通信距离 3.添加Expire/Cache-Control头 4.启用Gzip压缩文件 5.将css放在页面最上面 6.将script放在页面最下面 7.避免在css中使用表 阅读全文
posted @ 2018-03-07 11:49 墨羽如烟 阅读(129) 评论(0) 推荐(0)
摘要: 一、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间) 1.减少HTTP请求;2.合并压缩Js/css文件;3.使用缓存manifest;4.服务器端开启gzip;5.使用CDN,用户可以就近获取所需要的资源,访问速度有保障,稳定性也有保障6.外部JS和CSS放底下7.尽可能 阅读全文
posted @ 2018-03-07 11:19 墨羽如烟 阅读(105) 评论(0) 推荐(0)
摘要: 1、什么是FOUC (无样式内容闪烁)?你如何来避免FOUC? 如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Co 阅读全文
posted @ 2018-03-07 10:56 墨羽如烟 阅读(167) 评论(0) 推荐(0)
摘要: 1、你如何对网站的文件和资源进行优化? 1. 确保网站信息描述全站统一 2. 清楚网站内部无效重复的信息 3. 让用户能迅速准确的在网站查看相关内容 4. 优化内部结构便于搜索引擎的理解和收录 为了达到以上这几个效果,我们一般会采取几种方法:关键词优化,网站页面优化,内部结构信息优化和如何提高网页的 阅读全文
posted @ 2018-03-07 10:53 墨羽如烟 阅读(111) 评论(0) 推荐(0)
摘要: 1、你能描述当你制作一个网页的工作流程吗? 内容分析:分清展现在网络中内容的层次和逻辑关系 结构设计:写出合理的html结构代码 布局设计:使用html+css进行布局 样式设计:首先要使用reset.css 交互设计:鼠标特效 行为设计:js代码,ajax页面行为和从服务器获取数据 测试兼容性;优 阅读全文
posted @ 2018-03-07 10:45 墨羽如烟 阅读(126) 评论(0) 推荐(0)
摘要: 在制作一个网页应用或网站的过程中,你是如何考虑其UI、安全性、高性能、SEO、可维护性以及技术因素的? 一 UI: 界面美观,要有个性,考虑用户使用的逻辑要简单,用起来舒适自由。使用习惯要符合大部分用户的习惯,比如少让用户输入,采用选择的方式,提供搜索和提示功能。 二 安全性: 1、对输入进行有效性 阅读全文
posted @ 2018-03-07 10:35 墨羽如烟 阅读(150) 评论(0) 推荐(0)
摘要: //计算数组中每个元素出现的次数 var arr = ["apple","orange","apple","orange","pear","orange"]; function getWordCnt(){ return arr.reduce(function(prev,next){ prev[nex 阅读全文
posted @ 2018-03-07 00:47 墨羽如烟 阅读(139) 评论(0) 推荐(0)