摘要:把标签恰好放在之前脚本在下载和执行期间会阻止解析。表示引用资源,替换当前元素,用在,,上,是页面内容不可缺少的一部分。声明是用来指示浏览器关于页面使用哪个版本进行编写的指令。声明必须是文档的第一行,位于标签之前。
项目地址 HTML问题 HTML5语义化
什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。
好处易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析,如盲人阅读器根据语义渲染网页
有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。
http://www.daqianduan.com/654...
为什么最好把 CSS 的标签放在之间?为什么最好把 JS 的标签恰好放在之前,有例外情况吗?
把放在中
把标签放在之间是规范要求的内容。此外,这种做法可以让页面逐步呈现,提高了用户体验。将样式表放在文档底部附近,会使许多浏览器(包括 Internet Explorer)不能逐步呈现页面。一些浏览器会阻止渲染,以避免在页面样式发生变化时,重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。
把标签恰好放在之前
脚本在下载和执行期间会阻止 HTML 解析。把标签放在底部,保证 HTML 首先完成解析,将页面尽早呈现给用户。
例外情况是当你的脚本里包含document.write()时。但是现在,document.write()不推荐使用。同时,将标签放在底部,意味着浏览器不能开始下载脚本,直到整个文档(document)被解析。也许,对此比较好的做法是,使用defer属性,放在中。
什么是渐进式渲染(progressive rendering)?渐进式渲染是用于提高网页性能(尤其是提高用户感知的加载速度),以尽快呈现页面的技术。
在以前互联网带宽较小的时期,这种技术更为普遍。如今,移动终端的盛行,而移动网络往往不稳定,渐进式渲染在现代前端开发中仍然有用武之地。
一些举例:
图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时,JavaScript 将加载并显示图像。
确定显示内容的优先级(分层次渲染)——为了尽快将页面呈现给用户,页面只包含基本的最少量的 CSS、脚本和内容,然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
异步加载 HTML 片段——当页面通过后台渲染时,把 HTML 拆分,通过异步请求,分块发送给浏览器。更多相关细节可以在这里找到。
viewportViewport :字面意思为视图窗口,在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动web站点跨设备显示效果基本一致。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
在移动端浏览器当中,存在着两种视口,一种是可见视口(也就是我们说的设备大小),另一种是视窗视口(网页的宽度是多少)。
举个例子:如果我们的屏幕是320像素 * 480像素的大小(iPhone4),假设在浏览器中,320像素的屏幕宽度能够展示980像素宽度的内容。那么320像素的宽度就是可见视口的宽度,而能够显示的980像素的宽度就是视窗视口的宽度。
为了显示更多的内容,大多数的浏览器会把自己的视窗视口扩大,简易的理解,就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容(将网页等比例缩小)。
Viewport属性值width 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许这些属性可以同时使用,也可以多带带使用或混合使用,多个属性同时使用时用逗号隔开就行了。
Reflow和Repaint Reflow当涉及到DOM节点的布局属性发生变化时,就会重新计算该属性,浏览器会重新描绘相应的元素,此过程叫Reflow(回流或重排)。
Repaint当影响DOM元素可见性的属性发生变化 (如 color) 时, 浏览器会重新描绘相应的元素, 此过程称为Repaint(重绘)。因此重排必然会引起重绘。
引起Repaint和Reflow的一些操作调整窗口大小
字体大小
样式表变动
元素内容变化,尤其是输入控件
CSS伪类激活,在用户交互过程中发生
DOM操作,DOM元素增删、修改
width, clientWidth, scrollTop等布局宽高的计算
Repaint和Reflow是不可避免的,只能说对性能的影响减到最小,给出下面几条建议:避免逐条更改样式。建议集中修改样式,例如操作className。
避免频繁操作DOM。创建一个documentFragment或div,在它上面应用所有DOM操作,最后添加到文档里。设置display:none的元素上操作,最后显示出来。
避免频繁读取元素几何属性(例如scrollTop)。绝对定位具有复杂动画的元素。
绝对定位使它脱离文档流,避免引起父元素及后续元素大量的回流
https://harttle.land/2015/08/...
http://www.blueidea.com/tech/...
img的alt属性
如果无法显示图像,浏览器将显示alt指定的内容
元素title属性
在鼠标移到元素上时显示title的内容
href和src区别href
href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系
若在文档中添加href ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式。
src
src表示引用资源,替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。
当浏览器解析到src ,会暂停其他资源的下载和处理(图片不会暂停其他资源下载和处理),直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
https://blog.csdn.net/lhjueji...
浏览器的渲染过程解析HTML生成DOM树。
解析CSS生成CSSOM规则树。
将DOM树与CSSOM规则树合并在一起生成渲染树。
遍历渲染树开始布局,计算每个节点的位置大小信息。
将渲染树每个节点绘制到屏幕。
https://baijiahao.baidu.com/s...
为何会出现浏览器兼容问题同一产品,版本越老 bug 越多
同一产品,版本越新,功能越多
不同产品,不同标准,不同实现方式
处理兼容问题的思路要不要做
产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
成本的角度 (有无必要做某件事)
2.做到什么程度
让哪些浏览器支持哪些效果
3..如何做
根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
条件注释、CSS Hack、js 能力检测做一些修补
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 (graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
https://github.com/jirengu/fr...
doctype有什么用doctype是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档。
声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
声明必须是HTML文档的第一行,位于html标签之前。
浏览器本身分为两种模式,一种是标准模式,一种是怪异模式,浏览器通过doctype来区分这两种模式,doctype在html中的作用就是触发浏览器的标准模式,如果html中省略了doctype,浏览器就会进入到Quirks模式的怪异状态,在这种模式下,有些样式会和标准模式存在差异,而html标准和dom标准值规定了标准模式下的行为,没有对怪异模式做出规定,因此不同浏览器在怪异模式下的处理也是不同的,所以一定要在html开头使用doctype。
行内元素和块级元素有哪些 行内元素一个行内元素只占据它对应标签的边框所包含的空间
一般情况下,行内元素只能包含数据和其他行内元素
b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea块级元素
占据一整行,高度、行高、内边距和外边距都可以改变,可以容纳块级标签和其他行内标签
header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footeriframe框架有那些优缺点 优点:
iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
缺点:搜索引擎的爬虫程序无法解读这种页面
框架结构中出现各种滚动条
使用框架结构时,保证设置正确的导航链接。
iframe页面会增加服务器的http请求
label标签有什么作用label 标签通常是写在表单内,它关联一个控件,使用 label 可以实现点击文字选取对应的控件。
HTML5的form如何关闭自动完成功能
将不想要自动完成的 form 或 input 设置为 autocomplete=off
MDN
DOM和BOM有什么区别DOM
Document Object Model,文档对象模型
DOM 是为了操作文档出现的 API,document 是其的一个对象
DOM和文档有关,这里的文档指的是网页,也就是html文档。DOM和浏览器无关,他关注的是网页本身的内容。
BOM
Browser Object Model,浏览器对象模型
BOM 是为了操作浏览器出现的 API,window 是其的一个对象
window 对象既为 javascript 访问浏览器提供API,同时在 ECMAScript 中充当 Global 对象
浏览器通过优先级规则,判断元素展示哪些样式。优先级通过 4 个维度指标确定,我们假定以a、b、c、d命名,分别代表以下含义:
a表示是否使用内联样式(inline style)。如果使用,a为 1,否则为 0。
b表示 ID 选择器的数量。
c表示类选择器、属性选择器和伪类选择器数量之和。
d表示标签(类型)选择器和伪元素选择器之和。
优先级的结果并非通过以上四个值生成一个得分,而是每个值分开比较。a、b、c、d权重从左到右,依次减小。判断优先级时,从左到右,一一比较,直到比较出最大值,即可停止。所以,如果b的值不同,那么c和d不管多大,都不会对结果产生影响。比如0,1,0,0的优先级高于0,0,10,10。
当出现优先级相等的情况时,最晚出现的样式规则会被采纳。如果你在样式表里写了相同的规则(无论是在该文件内部还是其它样式文件中),那么最后出现的(在文件底部的)样式优先级更高,因此会被采纳。
在写样式时,我会使用较低的优先级,这样这些样式可以轻易地覆盖掉。尤其对写 UI 组件的时候更为重要,这样使用者就不需要通过非常复杂的优先级规则或使用!important的方式,去覆盖组件的样式了。
https://www.smashingmagazine....
https://www.sitepoint.com/web...
重置(resetting)CSS 和 标准化(normalizing)CSS 的区别是什么?你会选择哪种方式,为什么?重置(Resetting): 重置意味着除去所有的浏览器默认样式。对于页面所有的元素,像margin、padding、font-size这些样式全部置成一样。你将必须重新定义各种元素的样式。
标准化(Normalizing): 标准化没有去掉所有的默认样式,而是保留了有用的一部分,同时还纠正了一些常见错误。
当需要实现非常个性化的网页设计时,我会选择重置的方式,因为我要写很多自定义的样式以满足设计需求,这时候就不再需要标准化的默认样式了。
https://stackoverflow.com/que...
请阐述Float定位的工作原理。浮动(float)是 CSS 定位属性。浮动元素从网页的正常流动中移出,但是保持了部分的流动性,会影响其他元素的定位(比如文字会围绕着浮动元素)。这一点与绝对定位不同,绝对定位的元素完全从文档流中脱离。
CSS 的clear属性通过使用left、right、both,让该元素向下移动(清除浮动)到浮动元素下面。
如果父元素只包含浮动元素,那么该父元素的高度将塌缩为 0。我们可以通过清除(clear)从浮动元素后到父元素关闭前之间的浮动来修复这个问题。
有一种 hack 的方法,是自定义一个.clearfix类,利用伪元素选择器::after清除浮动。另外还有一些方法,比如添加空的和设置浮动元素父元素的overflow属性。与这些方法不同的是,clearfix方法,只需要给父元素添加一个类,定义如下:
.clearfix::after { content: ""; display: block; clear: both; }
值得一提的是,把父元素属性设置为overflow: auto或overflow: hidden,会使其内部的子元素形成块格式化上下文(Block Formatting Context),并且父元素会扩张自己,使其能够包围它的子元素。
https://css-tricks.com/all-ab...
请阐述z-index属性,并说明如何形成层叠上下文(stacking context)。CSS 中的z-index属性控制重叠元素的垂直叠加顺序。z-index只能影响position值不是static的元素。
没有定义z-index的值时,元素按照它们出现在 DOM 中的顺序堆叠(层级越低,出现位置越靠上)。非静态定位的元素(及其子元素)将始终覆盖静态定位(static)的元素,而不管 HTML 层次结构如何。
层叠上下文是包含一组图层的元素。 在一组层叠上下文中,其子元素的z-index值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上,则即使元素 A 的子元素 C 具有比元素 B 更高的z-index值,元素 C 也永远不会在元素 B 之上.
每个层叠上下文是自包含的:当元素的内容发生层叠后,整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文,例如opacity小于 1,filter不是none,transform不是none。
https://css-tricks.com/almana...
https://philipwalton.com/arti...
https://developer.mozilla.org...
请阐述块格式化上下文(Block Formatting Context)及其工作原理。块格式上下文(BFC)是 Web 页面的可视化 CSS 渲染的部分,是块级盒布局发生的区域,也是浮动元素与其他元素交互的区域。
一个 HTML 盒(Box)满足以下任意一条,会创建块格式化上下文:
float的值不是none.
position的值不是static或relative.
display的值是table-cell、table-caption、inline-block、flex、或inline-flex。
overflow的值不是visible。
在 BFC 中,每个盒的左外边缘都与其包含的块的左边缘相接。
两个相邻的块级盒在垂直方向上的边距会发生合并(collapse)。更多内容请参考边距合并(margin collapsing)。
https://developer.mozilla.org...
https://www.sitepoint.com/und...
有哪些清除浮动的技术,都适用哪些情况?空div方法:。
Clearfix 方法:上文使用.clearfix类已经提到。
overflow: auto或overflow: hidden方法:上文已经提到。
在大型项目中,我会使用 Clearfix 方法,在需要的地方使用.clearfix。设置overflow: hidden的方法可能使其子元素显示不完整,当子元素的高度大于父元素时。
请解释什么是雪碧图(css sprites),以及如何实现?雪碧图是把多张图片整合到一张上的图片。它被运用在众多使用了很多小图标的网站上(Gmail 在使用)。实现方法:
使用生成器将多张图片打包成一张雪碧图,并为其生成合适的 CSS。
每张图片都有相应的 CSS 类,该类定义了background-image、background-position和background-size属性。
使用图片时,将相应的类添加到你的元素中。
好处:
减少加载多张图片的 HTTP 请求数(一张雪碧图只需要一个请求)。但是对于 HTTP2 而言,加载多张图片不再是问题。
提前加载资源,防止在需要时才在开始下载引发的问题,比如只出现在:hover伪类中的图片,不会出现闪烁。
https://css-tricks.com/css-sp...
如何解决不同浏览器的样式兼容性问题?在确定问题原因和有问题的浏览器后,使用多带带的样式表,仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
使用已经处理好此类问题的库,比如 Bootstrap。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Reset CSS 或 Normalize.css。
如何为功能受限的浏览器提供页面? 使用什么样的技术和流程?优雅的降级:为现代浏览器构建应用,同时确保它在旧版浏览器中正常运行。
Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
渐进式增强:构建基于用户体验的应用,但在浏览器支持时添加新增功能。
利用 caniuse.com 检查特性支持。
使用 autoprefixer 自动生成 CSS 属性前缀。
使用 Modernizr进行特性检测。
有什么不同的方式可以隐藏内容(使其仅适用于屏幕阅读器)?这些方法与可访问性(a11y)有关。
visibility: hidden:元素仍然在页面流中,并占用空间。
width: 0; height: 0:使元素不占用屏幕上的任何空间,导致不显示它。
position: absolute; left: -99999px: 将它置于屏幕之外。
text-indent: -9999px:这只适用于block元素中的文本。
Metadata: 例如通过使用 Schema.org,RDF 和 JSON-LD。
WAI-ARIA:如何增加网页可访问性的 W3C 技术规范。
即使 WAI-ARIA 是理想的解决方案,我也会采用绝对定位方法,因为它具有最少的注意事项,适用于大多数元素,而且使用起来非常简单。
https://www.w3.org/TR/wai-ari...
https://developer.mozilla.org...
http://a11yproject.com/
除了screen,你还能说出一个 @media 属性的例子吗?all
适用于所有设备。
print
为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media(媒体屏幕尺寸), 以满足个别设备网页尺寸不匹配等问题。
screen
主要适用于彩色的电脑屏幕
speech
解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.
https://developer.mozilla.org...
首先,浏览器从最右边的选择器,即关键选择器(key selector),向左依次匹配。根据关键选择器,浏览器从 DOM 中筛选出元素,然后向上遍历被选元素的父元素,判断是否匹配。选择器匹配语句链越短,浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器,因为它们会匹配大量的元素,浏览器必须要进行大量的工作,去判断这些元素的父元素们是否匹配。
BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
BEM (Block Element Modifier)原则上建议为独立的 CSS 类命名,并且在需要层级关系时,将关系也体现在命名中,这自然会使选择器高效且易于覆盖。
搞清楚哪些 CSS 属性会触发重新布局(reflow)、重绘(repaint)和合成(compositing)。在写样式时,避免触发重新布局的可能。
https://developers.google.com...
https://csstriggers.com/
使用 CSS 预处理的优缺点分别是什么?优点:
提高 CSS 可维护性。
易于编写嵌套选择器。
引入变量,增添主题功能。可以在不同的项目中共享主题文件。
通过混合(Mixins)生成重复的 CSS。
Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
将代码分割成多个文件。不进行预处理的 CSS,虽然也可以分割成多个文件,但需要建立多个 HTTP 请求加载这些文件。
缺点:
需要预处理工具。
重新编译的时间可能会很慢。
对于你使用过的 CSS 预处理,说说喜欢和不喜欢的地方?喜欢:
绝大部分优点上题以及提过。
Less 用 JavaScript 实现,与 NodeJS 高度结合。
Dislikes:
我通过node-sass使用 Sass,它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时,我必须经常重新编译。
Less 中,变量名称以@作为前缀,容易与 CSS 关键字混淆,如@media、@import和@font-face。
如何实现一个使用非标准字体的网页设计?使用@font-face并为不同的font-weight定义font-family。
解释浏览器如何确定哪些元素与 CSS 选择器匹配。这部分与上面关于编写高效的 CSS 有关。浏览器从最右边的选择器(关键选择器)根据关键选择器,浏览器从 DOM 中筛选出元素,然后向上遍历被选元素的父元素,判断是否匹配。选择器匹配语句链越短,浏览器的匹配速度越快。
例如,对于形如p span的选择器,浏览器首先找到所有元素,并遍历它的父元素直到根元素以找到
元素。对于特定的,只要找到一个
,就知道"`已经匹配并停止继续匹配。
https://stackoverflow.com/que...
描述伪元素及其用途。CSS 伪元素是添加到选择器的关键字,去选择元素的特定部分。它们可以用于装饰(:first-line,:first-letter)或将元素添加到标记中(与 content:...组合),而不必修改标记(:before,:after)。
:first-line和:first-letter可以用来修饰文字。
上面提到的.clearfix方法中,使用clear: both来添加不占空间的元素。
使用:before和after展示提示中的三角箭头。鼓励关注点分离,因为三角被视为样式的一部分,而不是真正的 DOM。如果不使用额外的 HTML 元素,只用 CSS 样式绘制三角形是不太可能的。
https://css-tricks.com/almana...
说说你对盒模型的理解,以及如何告知浏览器使用不同的盒模型渲染布局。CSS 盒模型描述了以文档树中的元素而生成的矩形框,并根据排版模式进行布局。每个盒子都有一个内容区域(例如文本,图像等)以及周围可选的padding、border和margin区域。
CSS 盒模型负责计算:
块级元素占用多少空间。
边框是否重叠,边距是否合并。
盒子的尺寸。
盒模型有以下规则:
块级元素的大小由width、height、padding、border和margin决定。
如果没有指定height,则块级元素的高度等于其包含子元素的内容高度加上padding(除非有浮动元素,请参阅下文)。
如果没有指定width,则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。
元素的height是由内容的height来计算的。
元素的width是由内容的width来计算的。
默认情况下,padding和border不是元素width和height的组成部分。
https://www.smashingmagazine....
* { box-sizing: border-box; }会产生怎样的效果?元素默认应用了box-sizing: content-box,元素的宽高只会决定内容(content)的大小。
box-sizing: border-box改变计算元素width和height的方式,border和padding的大小也将计算在内。
元素的height = 内容(content)的高度 + 垂直方向的padding + 垂直方向border的宽度
元素的width = 内容(content)的宽度 + 水平方向的padding + 水平方向border的宽度
display的属性值都有哪些?none, block, inline, inline-block, table, table-row, table-cell, list-item.
inline和inline-block有什么区别?我把block也加入其中,为了获得更好的比较。
block | inline-block | inline | |
---|---|---|---|
大小 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
定位 | 从新的一行开始,并且不允许旁边有 HTML 元素(除非是float) | 与其他内容一起流动,并允许旁边有其他元素。 | 与其他内容一起流动,并允许旁边有其他元素。 |
能否设置width和height | 能 | 能 | 不能。 设置会被忽略。 |
可以使用vertical-align对齐 | 不可以 | 可以 | 可以 |
边距(margin)和填充(padding) | 各个方向都存在 | 各个方向都存在 | 只有水平方向存在。垂直方向会被忽略。 尽管border和padding在content周围,但垂直方向上的空间取决于"line-height" |
浮动(float) | - | - | 就像一个block元素,可以设置垂直边距和填充。 |
经过定位的元素,其position属性值必然是relative、absolute、fixed或sticky。
static:默认定位属性值。该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative:该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。
absolute:不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
fixed:不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。
sticky:盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
https://developer.mozilla.org...
你使用过哪些现有的 CSS 框架?你是如何改进它们的?Bootstrap: 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中广泛使用的微调按钮组件。
Semantic UI:源代码结构使得自定义主题很难理解。非常规主题系统的使用体验很差。外部库的路径需要硬编码(hard code)配置。变量重新赋值没有 Bootstrap 设计得好。
Bulma: 需要很多非语义的类和标记,显得很多余。不向后兼容,以至于升级版本后,会破坏应用的正常运行。
你了解 CSS Flex 和 Grid 吗?Flex 主要用于一维布局,而 Grid 则用于二维布局。
Flexflex容器中存在两条轴, 横轴和纵轴, 容器中的每个单元称为flex item。
在容器上可以设置6个属性:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
注意:当设置 flex 布局之后,子元素的 float、clear、vertical-align 的属性将会失效。
Flex 项目属性有六种属性可运用在 item 项目上:
order
flex-basis
flex-grow
flex-shrink
flex
align-self
GridCSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。
响应式设计与自适应设计有何不同?响应式设计和自适应设计都以提高不同设备间的用户体验为目标,根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。
响应式设计的适应性原则:网站应该凭借一份代码,在各种设备上都有良好的显示和使用效果。响应式网站通过使用媒体查询,自适应栅格和响应式图片,基于多种因素进行变化,创造出优良的用户体验。就像一个球通过膨胀和收缩,来适应不同大小的篮圈。
自适应设计更像是渐进式增强的现代解释。与响应式设计单一地去适配不同,自适应设计通过检测设备和其他特征,从早已定义好的一系列视窗大小和其他特性中,选出最恰当的功能和布局。与使用一个球去穿过各种的篮筐不同,自适应设计允许使用多个球,然后根据不同的篮筐大小,去选择最合适的一个。
https://developer.mozilla.org...
http://mediumwell.com/respons...
https://css-tricks.com/the-di...
你有没有使用过视网膜分辨率的图形?当中使用什么技术?我倾向于使用更高分辨率的图形(显示尺寸的两倍)来处理视网膜显示。更好的方法是使用媒体查询,像@media only screen and (min-device-pixel-ratio: 2) { ... },然后改变background-image。
对于图标类的图形,我会尽可能使用 svg 和图标字体,因为它们在任何分辨率下,都能被渲染得十分清晰。
还有一种方法是,在检查了window.devicePixelRatio的值后,利用 JavaScript 将 btn.onclick = function() {} btn.onclick = null
DOM2
DOM2级事件可以冒泡和捕获
通过addEventListener绑定
通过removeEventListener解绑
// 绑定 btn.addEventListener("click", sayHi) // 解绑 btn.removeEventListener("click", sayHi)
DOM3
DOM3具有更多事件类型
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型,全部类型如下:
UI事件,当用户与页面上的元素交互时触发,如:load、scroll 焦点事件,当元素获得或失去焦点时触发,如:blur、focus 鼠标事件,当用户通过鼠标在页面执行操作时触发如:dbclick、mouseup 滚轮事件,当使用鼠标滚轮或类似设备时触发,如:mousewheel 文本事件,当在文档中输入文本时触发,如:textInput 键盘事件,当用户通过键盘在页面上执行操作时触发,如:keydown、keypress 合成事件,当为IME(输入法编辑器)输入字符时触发,如:compositionstart 变动事件,当底层DOM结构发生变化时触发,如:DOMsubtreeModified
https://www.jianshu.com/p/3ac...
如何自定义事件原生提供了3个方法实现自定义事件
createEvent,设置事件类型,是 html 事件还是 鼠标事件
initEvent 初始化事件,事件名称,是否允许冒泡,是否阻止自定义事件
dispatchEvent 触发事件
MDN
target和currentTarget区别event.target
返回触发事件的元素
event.currentTarget
返回绑定事件的元素
prototype和__proto__的关系是什么所有的对象都拥有__proto__属性,它指向对象构造函数的prototype属性
let obj = {} obj.__proto__ === Object.prototype // true function Test(){} test.__proto__ == Test.prototype // true
所有的函数都同时拥有__proto__和protytpe属性
函数的__proto__指向自己的函数实现 函数的protytpe是一个对象 所以函数的prototype也有__proto__属性 指向Object.prototype
function func() {} func.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__指向null
Object.prototype.__proto__ // null原型继承
所有的JS对象都有一个prototype属性,指向它的原型对象。当试图访问一个对象的属性时,如果没有在该对象上找到,它还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。
继承JS高程第3版 第6章 继承
寄生组合式继承
function SuperType(name) { this.name = name this.colors = ["red"] } SuperType.prototype.sayName = function() { console.log(this.name) } // 继承实例属性 function SubType(name, age) { SuperType.call(this, name) this.age = age } function inheritPrototype(subType, superType) { let prototype = Object.create(superType.prototype) prototype.constructor = subType subType.prototype = prototype } // 继承原型方法 inheritPrototype(SubType, SuperType) // 定义自己的原型方法 SubType.prototype.sayAge = function() { console.log(this.age) }闭包
闭包是指有权访问另一个函数作用域中的变量的函数。
function sayHi(name) { return () => { console.log(`Hi! ${name}`) } } const test = sayHi("xiaoming") test() // Hi! xiaoming
虽然sayHi函数已经执行完毕,但是其活动对象也不会被销毁,因为test函数仍然引用着sayHi函数中的变量name,这就是闭包。
但也因为闭包引用着另一个函数的变量,导致另一个函数已经不使用了也无法销毁,所以闭包使用过多,会占用较多的内存,这也是一个副作用。
这个题目是考察闭包的使用
function sayHi() { console.log("hi") } function threeTimes(fn) { let times = 0 return () => { if (times++ < 3) { fn() } } } const newFn = threeTimes(sayHi) newFn() newFn() newFn() newFn() newFn() // 后面两次执行都无任何反应
通过闭包变量 times 来控制函数的执行
实现add函数,让add(a)(b)和add(a,b)两种调用结果相同function add(a, b) { if (b === undefined) { return function(x) { return a + x } } return a + b }Ajax
Ajax(asynchronous JavaScript and XML)是使用客户端上的许多 Web 技术,创建异步 Web 应用的一种 Web 开发技术。借助 Ajax,Web 应用可以异步(在后台)向服务器发送数据和从服务器检索数据,而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离,Ajax 允许网页和扩展 Web 应用程序动态更改内容,而无需重新加载整个页面。实际上,现在通常将 JSON 替换为 XML,因为 JavaScript 对 JSON 有原生支持优势。
XMLHttpRequest API 经常用于异步通信。此外还有最近流行的fetch API。
let xmlhttp if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest() } else { // IE6, IE5 浏览器执行代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } xmlhttp.onreadystatechange = () => { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText } } xmlhttp.open("GET", "/ajax/test.txt", true) xmlhttp.send()使用Ajax的优缺点分别是什么
优点
交互性更好。来自服务器的新内容可以动态更改,无需重新加载整个页面。
减少与服务器的连接,因为脚本和样式只需要被请求一次。
状态可以维护在一个页面上。JavaScript 变量和 DOM 状态将得到保持,因为主容器页面未被重新加载。
基本上包括大部分 SPA 的优点。
缺点
动态网页很难收藏。
如果 JavaScript 已在浏览器中被禁用,则不起作用。
有些网络爬虫不执行 JavaScript,也不会看到 JavaScript 加载的内容。
基本上包括大部分 SPA 的缺点。
https://github.com/yangshun/f...
Ajax和Fetch区别ajax是使用XMLHttpRequest对象发起的,但是用起来很麻烦,所以ES6新规范就有了fetch,fetch发一个请求不用像ajax那样写一大堆代码。
使用fetch无法取消一个请求,这是因为fetch基于Promise,而Promise无法做到这一点。
在默认情况下,fetch不会接受或者发送cookies
fetch没有办法原生监测请求的进度,而XMLHttpRequest可以
fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
fetch由于是ES6规范,兼容性上比不上XMLHttpRequest
变量提升var会使变量提升,这意味着变量可以在声明之前使用。let和const不会使变量提升,提前使用会报错。
变量提升(hoisting)是用于解释代码中变量声明行为的术语。使用var关键字声明或初始化的变量,会将声明语句“提升”到当前作用域的顶部。 但是,只有声明才会触发提升,赋值语句(如果有的话)将保持原样。
用var声明的变量的作用域是它当前的执行上下文,它可以是嵌套的函数,也可以是声明在任何函数外的变量。let和const是块级作用域,意味着它们只能在最近的一组花括号(function、if-else 代码块或 for 循环中)中访问。
function foo() { // 所有变量在函数中都可访问 var bar = "bar"; let baz = "baz"; const qux = "qux"; console.log(bar); // bar console.log(baz); // baz console.log(qux); // qux } console.log(bar); // ReferenceError: bar is not defined console.log(baz); // ReferenceError: baz is not defined console.log(qux); // ReferenceError: qux is not defined
if (true) { var bar = "bar"; let baz = "baz"; const qux = "qux"; } // 用 var 声明的变量在函数作用域上都可访问 console.log(bar); // bar // let 和 const 定义的变量在它们被定义的语句块之外不可访问 console.log(baz); // ReferenceError: baz is not defined console.log(qux); // ReferenceError: qux is not defined
var会使变量提升,这意味着变量可以在声明之前使用。let和const不会使变量提升,提前使用会报错。
console.log(foo); // undefined var foo = "foo"; console.log(baz); // ReferenceError: can"t access lexical declaration "baz" before initialization let baz = "baz"; console.log(bar); // ReferenceError: can"t access lexical declaration "bar" before initialization const bar = "bar";
用var重复声明不会报错,但let和const会。
var foo = "foo"; var foo = "bar"; console.log(foo); // "bar" let baz = "baz"; let baz = "qux"; // Uncaught SyntaxError: Identifier "baz" has already been declared
let和const的区别在于:let允许多次赋值,而const只允许一次。
// 这样不会报错。 let foo = "foo"; foo = "bar"; // 这样会报错。 const baz = "baz"; baz = "qux";
https://github.com/yangshun/f...
对象浅拷贝和深拷贝有什么区别在 JS 中,除了基本数据类型,还存在对象、数组这种引用类型。
基本数据类型,拷贝是直接拷贝变量的值,而引用类型拷贝的其实是变量的地址。
let o1 = {a: 1} let o2 = o1
在这种情况下,如果改变 o1 或 o2 其中一个值的话,另一个也会变,因为它们都指向同一个地址。
o2.a = 3 console.log(o1.a) // 3
而浅拷贝和深拷贝就是在这个基础之上做的区分,如果在拷贝这个对象的时候,只对基本数据类型进行了拷贝,而对引用数据类型只是进行了引用的传递,而没有重新创建一个新的对象,则认为是浅拷贝。反之,在对引用数据类型进行拷贝的时候,创建了一个新的对象,并且复制其内的成员变量,则认为是深拷贝。
怎么实现对象深拷贝let o1 = {a:{ b:1 } } let o2 = JSON.parse(JSON.stringify(o1))
另一种方法
function deepCopy(s) { const d = {} for (let k in s) { if (typeof s[k] == "object") { d[k] = deepCopy(s[k]) } else { d[k] = s[k] } } return d }数组去重
ES5
function unique(arry) { const temp = [] arry.forEach(e => { if (temp.indexOf(e) == -1) { temp.push(e) } }) return temp }
ES6
function unique (arr) { return Array.from(new Set(arr)) }数据类型
Undefined
Null
Boolean
Number
String
Object
symbol(ES6新增)
内置函数(原生函数)String
Number
Boolean
Object
Function
Array
Date
RegExp
Error
Symbol
原始值 "I am a string" 并不是一个对象,它只是一个字面量,并且是一个不可变的值。
如果要在这个字面量上执行一些操作,比如获取长度、访问其中某个字符等,那需要将其
转换为 String 对象。
幸好,在必要时语言会自动把字符串字面量转换成一个 String 对象,也就是说你并不需要
显式创建一个对象。
Array.isArray([]) // true Array.isArray({}) // false typeof [] // "object" typeof {} // "object" Object.prototype == [].__proto__ // false Object.prototype == {}.__proto__ // true Array.prototype == [].__proto__ // true Array.prototype == {}.__proto__ // false自动分号
有时 JavaScript 会自动为代码行补上缺失的分号,即自动分号插入(Automatic SemicolonInsertion,ASI)。
因为如果缺失了必要的 ; ,代码将无法运行,语言的容错性也会降低。ASI 能让我们忽略那些不必要的 ; 。
请注意,ASI 只在换行符处起作用,而不会在代码行的中间插入分号。
如果 JavaScript 解析器发现代码行可能因为缺失分号而导致错误,那么它就会自动补上分
号。并且,只有在代码行末尾与换行符之间除了空格和注释之外没有别的内容时,它才会
这样做。
https://www.css88.com/archive...
cookie、localStorage、sessionStorage区别特性 | cookie | localStorage | sessionStorage |
---|---|---|---|
由谁初始化 | 客户端或服务器,服务器可以使用Set-Cookie请求头。 | 客户端 | 客户端 |
数据的生命周期 | 一般由服务器生成,可设置失效时间,如果在浏览器生成,默认是关闭浏览器之后失效 | 永久保存,可清除 | 仅在当前会话有效,关闭页面后清除 |
存放数据大小 | 4KB | 5MB | 5MB |
与服务器通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端保存 | 仅在客户端保存 |
用途 | 一般由服务器生成,用于标识用户身份 | 用于浏览器缓存数据 | 用于浏览器缓存数据 |
访问权限 | 任意窗口 | 任意窗口 | 当前页面窗口 |
自执行函数:1、声明一个匿名函数2、马上调用这个匿名函数。
作用:创建一个独立的作用域。
好处:防止变量弥散到全局,以免各种js库冲突。隔离作用域避免污染,或者截断作用域链,避免闭包造成引用变量无法释放。利用立即执行特性,返回需要的业务函数或对象,避免每次通过条件判断来处理
场景:一般用于框架、插件等场景
多个页面之间如何进行通信有如下几个方式:
cookie
web worker
localeStorage和sessionStorage
css动画和js动画的差异代码复杂度,js 动画代码相对复杂一些
动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css动画不能添加事件
动画性能看,js 动画多了一个js 解析的过程,性能不如 css 动画好
https://zhuanlan.zhihu.com/p/...
如何实现文件断点续传断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器,但是这看似简单的上传过程却有着无数的坑。
首先是文件的识别,一个文件被分成了若干份之后如何告诉服务器你切了多少块,以及最终服务器应该如何把你上传上去的文件进行合并,这都是要考虑的。
因此在文件开始上传之前,我们和服务器要有一个“握手”的过程,告诉服务器文件信息,然后和服务器约定切片的大小,当和服务器达成共识之后就可以开始后续的文件传输了。
前台要把每一块的文件传给后台,成功之后前端和后端都要标识一下,以便后续的断点。
当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分,如果是的话,那么我们可以接着上次的进度继续传文件,以达到续传的功能。
有了HTML5 的 File api之后切割文件比想想的要简单的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
参数start是开始切片的位置,end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块
如
file.slice(0,1000); file.slice(1000,2000); file.slice(2000,3000); // ......
在把文件切成片之后,接下来要做的事情就是把这些碎片传到服务器上。
如果中间掉线了,下次再传的时候就得先从服务器获取上一次上传文件的位置,然后以这个位置开始上传接下来的文件内容。
https://www.cnblogs.com/zhwl/...
new一个对象经历了什么function Test(){} const test = new Test()
创建一个新对象:
const obj = {}
设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象
obj.constructor = Test obj.__proto__ = Test.prototype
使用新对象调用函数,函数中的this被指向新实例对象
Test.call(obj)
将初始化完毕的新对象地址,保存到等号左边的变量中
bind、call、apply的区别call和apply其实
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103907.html
摘要:每天会折腾一道及以上题目,并将其解题思路记录成文章,发布到和微信公众号上。三汇总返回目录在月日月日这半个月中,做了汇总了数组知识点。或者拉到本文最下面,添加的微信等会根据题解以及留言内容,进行补充,并添加上提供题解的小伙伴的昵称和地址。 LeetCode 汇总 - 2019/08/15 Create by jsliang on 2019-08-12 19:39:34 Recently...
摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...
摘要:整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次,彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要:希望大家在这浮夸的前端圈里,保持冷静,坚持每天花分钟来学习与思考。 今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点,受到很多朋友的关注,都强烈要求再出多些React相前的面试题,受到大家的邀请,我又找了20多个React的使用者,他们给出了328道React的面试题,由我整理好发给大家,同时发布在了前端面试每日3+1的React专题,希望对大家有所帮助,同时大...
摘要:如何考察一个人是不是经验丰富我们需要在问答式的面试中,对其项目经验进行挖掘。如何设置笔试题现在网上有大量的面经的存在,对于我们面试是一个巨大的挑战。尊重应聘者我们要尊重每一个来应聘的人,不要轻视别人,或者故意刁难别人。 时光荏苒,2个月前,我才刚总结了如何应对面试官,现在的我开始总结如何面试别人了。笑哭.png 1.我们需要什么样的人 招聘肯定要有标准,这样我们才能更快的找到我们需要的...
阅读 821·2021-11-15 11:37
阅读 3577·2021-11-11 16:55
阅读 3254·2021-11-11 11:01
阅读 982·2019-08-30 15:43
阅读 2718·2019-08-30 14:12
阅读 658·2019-08-30 12:58
阅读 3352·2019-08-29 15:19
阅读 1960·2019-08-29 13:59