First, theoretical knowledge
Recommended video course: HTML+CSS+JS+ VUE front-end basic introduction ~www.bilibili.com/video/av823…)
More learning content: My Learning exchange group click:Web front-end learning Exchange Group
1.1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
参考《一次完整的HTTP事务是怎样一个过程》
1.2、谈谈你对前端性能优化的理解
a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体
c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
e. 代码校验：避免CSS表达式，避免重定向
参考《前端工程与性能优化》
1.3、前端 MV*框架的意义
早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。
随着 AJAX 的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了。
如果是页面型产品，多数确实不太需要它，因为页面中的 JavaScript代码，处理交互的绝对远远超过处理模型的，但是如果是应用软件类产品，这就太需要了。
长期做某个行业软件的公司，一般都会沉淀下来一些业务组件，主要体现在数据模型、业务规则和业务流程，这些组件基本都存在于后端，在前端很少有相应的组织。
从协作关系上讲，很多前端开发团队每个成员的职责不是很清晰，有了前端的 MV框架，这个状况会大有改观。
之所以感受不到 MV*框架的重要性，是因为Model部分代码较少，View的相对多一些。如果主要在操作View和Controller，那当然 jQuery 这类库比较好用了。
参考《前端 MV*框架的意义》
1.4、请简述盒模型
IE6盒子模型与W3C盒子模型。
文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content。
CSS3中有个box-sizing属性可以控制盒子的计算方式，
content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）
border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）
参考《盒模型》
1.5、请你谈谈Cookie的弊端
a. 每个特定的域名下最多生成的cookie个数有限制
b. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
c. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
d. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。
1.6、浏览器本地存储
在HTML5中提供了sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
1.7、web storage和cookie的区别
a. Cookie的大小是受限的
b. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
c. cookie还需要指定作用域，不可以跨域调用
d. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
e. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
f. IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage
1.8、对BFC规范的理解
BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。
BFC是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
利用BFC可以闭合浮动，防止与浮动元素重叠。
参考《Learning BFC》
1.9、线程与进程的区别
a. 一个程序至少有一个进程，一个进程至少有一个线程
b. 线程的划分尺度小于进程，使得多线程程序的并发性高
c. 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率
d. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制
e. 多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配
1.10、请说出三种减少页面加载时间的方法
a. 尽量减少页面中重复的HTTP请求数量
b. 服务器开启gzip压缩
c. css样式的定义放置在文件头部
d. Javascript脚本放在文件末尾
e. 压缩合并Javascript、CSS代码
f. 使用多域名负载网页内的多个文件、图片
参考《减低页面加载时间的方法》
1.11、你都使用哪些工具来测试代码的性能？
JSPerf, Dromaeo
1.12、你遇到过比较难的技术问题是？你是如何解决的？
1.13、常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
1.14、列举IE与其他浏览器不一样的特性？
a. IE的排版引擎是Trident （又称为MSHTML）
b. Trident内核曾经几乎与W3C标准脱节（2005年）
c. Trident内核的大量 Bug等安全性问题没有得到及时解决
d. JS方面，有很多独立的方法，例如绑定事件的attachEvent、创建事件的createEventObject等
e. CSS方面，也有自己独有的处理方式，例如设置透明，低版本IE中使用滤镜的方式
参考《Trident（排版引擎）》
1.15、什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
参考《优雅降级和渐进增强的区别》
1.16、WEB应用从服务器主动推送Data到客户端有那些方式？
a. html5 websoket
b. WebSocket 通过 Flash
c. XHR长时间连接
d. XHR Multipart Streaming
e. 不可见的Iframe
f. 标签的长时间连接(可跨域)
1.17、对前端界面工程师这个职位是怎么样理解的？
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。
1.18、你在现在的团队处于什么样的角色，起到了什么明显的作用？
1.19、你的优点是什么？缺点是什么？
1.20、如何管理前端团队?
1.21、最近在学什么？能谈谈你未来3，5年给自己的规划吗？
1.22、平时如何管理你的项目？
a. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
b. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
c. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
d. 页面进行标注（例如 页面 模块 开始和结束）；
e. CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
f. JS 分文件夹存放 命名以该JS功能为准的英文翻译。
g. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
1.23、说说最近最流行的一些东西吧？常去哪些网站？
CSDN、SegmentFault、php.net、MDN、css参考手册、iconfont、
underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse
1.24、Flash、Ajax各自的优缺点，在使用中如何取舍？
Flash：
a. Flash适合处理多媒体、矢量图形、访问机器
b. 对CSS、处理文本上不足，不容易被搜索
Ajax：
a. Ajax对CSS、文本支持很好，支持搜索
b. 多媒体、矢量图形、机器访问不足
共同点：
a. 与服务器的无刷新传递消息
b. 可以检测用户离线和在线状态
c. 操作DOM
1.25、请解释一下 JavaScript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
1.26、AMD和CMD 规范的区别？
AMD 提前执行依赖 – 尽早执行，requireJS 是它的实现
CMD 按需执行依赖 – 懒执行，seaJS 是它的实现
参考《SeaJS与RequireJS最大的区别》、《与 RequireJS 的异同》
1.27、网站重构的理解
重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
a. 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
b. 对于移动平台的优化，针对于SEO进行优化
c. 减少代码间的耦合，让代码保持弹性
d. 压缩或合并JS、CSS、image等前端资源
1.28、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
1.29、请介绍下cache-control
每个资源都可以通过 Cache-Control HTTP 头来定义自己的缓存策略
Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久
Cache-Control 头在 HTTP/1.1 规范中定义，取代了之前用来定义响应缓存策略的头（例如 Expires）。
1.30、前端页面有哪三层构成，分别是什么？作用是什么？
a. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。
b. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
c. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。
1.31、知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg
Webp：谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
Apng：全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，可以实现png格式的动态图片效果。04年诞生，但一直得不到各大浏览器厂商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成为下一代动态图标准。
1.32、一次js请求一般情况下有哪些地方会有缓存处理？
a. 浏览器端存储
b. 浏览器端文件缓存
c. HTTP缓存304
d. 服务器端文件类型缓存
e. 表现层&DOM缓存
参考《一次HTTP请求中有哪些地方可以缓存》
1.33、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
1.34、谈谈以前端角度出发做好SEO需要考虑什么？
a. 了解搜索引擎如何抓取网页和如何索引网页
b. meta标签优化
c. 关键词分析
d. 付费给搜索引擎
e. 链接交换和链接广泛度（Link Popularity）
f. 合理的标签使用
Second, the HTML
2.1,<image>What is the difference between the title attribute on a tag and the Alt attribute?
The Alt attribute is intended to provide text for visitors who cannot see the images in your document. The length must be less than 100 Characters or the user must ensure that the replacement text is as short as possible.
This includes users who use browsers that do not support images or have them turned off, visually impaired users, and screen readers.
The title attribute provides advisory information for the element on which it is set. Use the title attribute to provide additional information that is not essential. See the Difference and Application of Alt and Title attributes.
2.2. Write the following HTML tags: bold, subscript, center and font
Bold: ,
The subscript: < sub >
Center: < center >
Font: ,
2.3 please write at least 5 new html5 tags and explain their semantics and application scenarios
Section: Defines a section in a document
Nav: Defines a section that contains only navigation links
Header: Defines the header of a page or section. It often contains logos, page titles, and a navigational table of contents.
Footer: Defines the end of a page or section. It often contains copyright information, links to legal information, and addresses for feedback suggestions.
Aside: Define content that is not related to the content of the page — if removed, the rest of the content still makes sense.
See the HTML5 Tag List
2.4. Please tell us your understanding of semantic labeling.
A. Remove or lose styles so that the page shows clear structure
B. Good for SEO: establish good communication with search engines and help crawlers capture more effective information: crawlers rely on tags to determine the context and weight of each keyword;
C. Facilitate parsing by other devices (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;
D. Easy for team development and maintenance, more readable semantics, teams following the W3C standard follow this standard, can reduce differentiation.
2.5. What does Doctype do? How to distinguish strict mode from promiscuous mode? What do they mean?
The declaration is first in the document, before the tag. Tells the browser which mode to render the document in.
Strict mode typography and JS mode of operation is to run at the highest standards supported by the browser.
In promiscuous mode, pages are displayed in a loosely backward compatible manner. Emulate the behavior of older browsers in case the site doesn’t work.
A non-existent or improperly formatted DOCTYPE will cause the document to be rendered in promiscuous mode.
2.6. How many docTypes do you know?
The tag can declare three DTD types, representing strict versions, transitional versions, and frame-based HTML documents.
HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.
XHTML 1.0 specifies three XML document types: Strict, Transitional, and Frameset.
Standards mode (also known as strict rendering mode) is used to render web pages that comply with the latest Standards,
Quirks (loosely rendered or compatible) mode is used to render web pages designed for traditional browsers.
2.7. HTML vs. XHTML — What’s the difference
A. XHTML elements must be properly nested.
B. XHTML elements must be closed.
C. Label names must be lowercase letters.
D. XHTML documents must have a root element.
See the Differences between XHTML and HTML
2.8. What are the new features and elements removed from HTML5?
A. HTML5 is no longer a subset of SGML, mainly about the addition of graphics, location, storage, multitasking and other functions.
B. Drag and drop API
C. semantic better content label (header, nav, footer, value, the article, section)
D. Audio and video API(Audio and Video)
E. Canvas API
F. Geolocation API
G. Local offline storage localStorage Stores data for a long time. Data is not lost after the browser is closed
H. SessionStorage data will be cleared at the end of the page session
I. Form controls, Calendar, Date, time, Email, URL, search
J. New technologies webworker, Websocket, etc
Removed elements:
A. Pure performance elements: Basefont, Big, Center, S, Strike, TT, U;
B. Elements that negatively affect usability: Frame, Frameset, Noframes;
2.9 Advantages and disadvantages of IFrame?
Advantages:
A. Solve the loading problem of slow-loading third-party content such as ICONS and advertisements
B. Iframe No updated file upload
C. Iframe cross-domain communication
Disadvantages:
A. Iframe blocks the Onload event on the main page
B. Cannot be indexed by some search engines
C. HTTP requests from the server are added to the page
D. Many pages are generated and not easy to manage.
See “Some Records of Iframe”
2.10. What is Quirks mode? How is it different from Standards mode?
When we write programs, we often encounter the problem of how to keep the original interface unchanged while providing more powerful functionality, especially when the new functionality is incompatible with the old functionality. Before IE6, no one wrote a DTD, so IE6 assumed that if a DTD was written, it meant that the page would have a better CSS layout, and if not, it would have a compatible layout. This is called Quirks mode.
Differences: Overall there will be differences in layout, style resolution, and script execution.
A. Box model: In the W3C standard, setting the width and height of an element refers to the width and height of the element’s content, while in Quirks mode, IE width and height also includes the padding and border.
B. Set the width and height of inline elements: In Standards mode, setting wdith and height for inline elements does not take effect, while in quirks mode, setting wdith and height for inline elements takes effect.
C. Set percentage height: In Standards mode, the height of an element is determined by the content it contains. Setting a percentage height for a child element is invalid if the parent element does not set a percentage height
D. Horizontal center: Margin :0 auto allows horizontal center in Standards mode, but does not work in quirks mode.
2.11. Please elaborate the disadvantages of table
A. Deep nesting, such as table>tr> TD >h3, will make it difficult for search engines to read, and the most immediate loss is a significant increase in the amount of redundant code.
B. If you want to set tr to border, you need to pass TD
C. Bloated code. When applying table in table, reading the code will appear extremely chaotic
D. Chaotic colspan and RowSpan. Frequent use of them for layout causes the entire document to be out of order.
E. Semantic inadequacy
See “Why is table layout Bad?”
2.12. Outline the difference between SRC and href
SRC replaces the current element; Href is used to establish a link between the current document and the referenced resource.
SRC, short for source, refers to the location of an external resource, which will be embedded in the document at the current tag location
Href is short for Hypertext Reference. It refers to the location of a web resource and establishes a link between the current element (anchor) or document (link)
Talk about your understanding of CSS layout
3.2 list at least two ways to clear the float
Floats float above normal flow, like clouds, but only from left to right. It is this property that causes the inside of the box to show a height of zero (height collapse) because there are no other normal flow elements.
A. Add additional tags, such as
B. Use the BR tag and its own HTML attributes, such as
C. Set overflow: hidden; In IE6 you also need to trigger hasLayout, such as Zoom: 1;
D. the parent element sets overflow: auto; Again, IE6 needs to trigger hasLayout
E. The parent element is also set to float
F. Set display:table for the parent element
G. Use :after pseudo-element; Since Internet Explorer 6-7 does not support :after, use Zoom :1 to trigger hasLayout.
One of the most important concepts in CSS2.1 is Block formatting contexts, or BFC.
The element that creates the BFC is a separate box, its child elements do not affect the layout of the outside elements, and the BFC still belongs to the normal flow in the document.
The display engine in IE6-7 uses an internal concept called layout.
See float We Cleared together over the Years
3.3. List some ways to hide elements
A. the visibility: hidden; This attribute simply hides an element, but the space occupied by the element still exists.
B. opacity: 0; A CSS3 property, set to 0, makes an element completely transparent, creating the same effect as visibility. In contrast to visibility, it can be transformed by transition and animate
C. the position: absolute; Take the element out of the document flow and above the normal document, giving it a large left negative position so that the element is positioned outside of the visible area.
D. the display: none; Elements become invisible and no longer take up space in the document.
E. the transform: scale (0); If you set an element to infinitesimal, the element will not be visible. The element will be retained where it was.
F. HTML5 hidden attribute; Hidden property effect and display: None; Again, this property is used to record the state of an element
g. height: 0; Overflow: hidden; Shrink the element to 0 vertically, making the element disappear. This technique works as long as the element has no visible border.
H. filter: the blur (0); An element “disappears” from the page by setting its ambiguity to 0.
See 4 Common ways to Hide HTML Elements with CSS 4 Common Ways to Hide and Show Elements with HTML and CSS
3.4. How to capitalize the first letter of all English words in a text
The text – transform:
(none | capitalize the first letter of each word will be converted to uppercase) | uppercase (to convert each word to uppercase) | lowercase (to convert each word to lowercase)
3.5. Briefly describe CSS style sheet inheritance
CSS style sheet inheritance means that specific CSS attributes are passed down to descendant elements. The inherited properties are as follows: See CSS Style Sheet Inheritance in Detail.
Text-related: font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, color
List related: list-image, list-style-position, list-style-type, list-style
3.6. Describe the SELectors of the CSS
Element selectors: *, E, E#id, E.class
Relationship selectors: E, F, E>F, E+F, E~F
Attribute selectors: E (att), E [att = “val”], [att ~ = “val”], E E [att ^ = “val”], [att $= “val”], E E [att * = “val”], E/att | = “val”
Pseudoclass selectors: E: Link, E:visited, E: Hover, E:active, E: Focus, E: Lang (FR), E: Not (S), E:root, E:first-child, E:last-chil, etc
Pseudo-object selectors: E:first-letter/E::first-letter, E:first-line/E::first-line, E:before/E::before, E:after/E::after, E:: Selection
See the List of selectors
3.7. Differences between CSS pseudo-classes and CSS pseudo-objects
CSS introduced the concept of pseudo classes and pseudo elements to describe something that existing CSS cannot
The fundamental difference is whether they create new elements (abstractions)
Pseudo-classes: Originally used to represent the dynamic state of some elements, the CSS2 standard has expanded the concept to include all logically existing “ghost” classes that do not need to be identified in the document tree
Pseudo-object: Represents a child of an element that exists logically but does not actually exist in the document tree
Refer to CSS Pseudo-classes and CSS pseudo-elements and their Origin.
3.8. Briefly describe the weight rules of the CSS
One inline style +1000, one ID +100, one attribute selector /class class/pseudo-class selector +10, one element name/pseudo-object selector +1.
The relational selector will be split into two selectors and then evaluated. See CSS Weights.
3.9. Please write multiple contour layouts
A. False contour column: use the background image to lay the Y-axis on the parent element of the column, so as to realize a false contour column
B. Use a separate background color for container divs (fixed layout) (fluid layout) : use the maximum height in the element to support the other container heights
C. Create a two-column contour layout with a border: use border-left, only two columns can be used.
D. Use positive padding and negative margin hedging to implement multi-column layout method: use positive padding and negative padding and negative margin hedging in all columns, and put a container on all columns. Set overflow:hiden to cut out overflow background
E. Use borders and position analog columns equal height: but do not use in multiple columns
F. Imitation of high column effect such as table layout: Poor compatibility and cannot run normally in IE6-7
3.10. What are the advantages and disadvantages of using PX and EM in CSS styles? What are the differences in performance?
Px is a unit of relative length, relative to the screen resolution of a display.
Em is a unit of relative length, relative to the font size of the text in the current object.
Font defined by PX cannot be enlarged by browser font.
The em value is not fixed, it inherits the font size of the parent element, 1 ÷ the font size of the parent element × the pixel value to be converted = em value.
3.11. What is the difference between link and @import in CSS?
A. Link is an HTML tag, while @import is provided by the CSS and can load only the CSS
B. When the page is loaded, link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded
C. Import can be identified only in IE5 or higher, and link is an HTML tag without compatibility problems
D. link style has a higher weight than @import
E. When using Javascript to control DOM to change styles, only link mode can be used, because @import only has CSS control, not DOM control
3.12 Common points and differences between Absolute and fixed of position
The same:
A. Change the rendering of elements in the line. Display is set to block
B. Keep elements out of normal flow without taking up space
C. By default, unpositioned elements are overwritten
The difference between:
Absolute “root elements” are settable, while fixed “root elements” are fixed to the browser window.
When you scroll the page, the distance between the fixed element and the browser window is the same.
3.13. To whom are the values of position, relative and Absolute respectively positioned?
Absolute: Generates an absolute position relative to the first ancestor element other than the static position
Fixed: Generates an absolutely positioned element, positioned relative to the browser window. (Not supported by IE6)
Relative: Generates elements that are positioned relative to their position in a normal flow
Static: the default value. Without positioning, the element appears in normal flow
3.14 what are the new features of CSS3?
CSS3 implements border-radius, box-shadow, text-shadow, gradient, transform
Added more CSS selectors multi-background RGBA, the only pseudo-elements introduced in CSS3 are :selection, media query, multi-column layout
Refer to CSS3 animation Record, CSS3 border-radius, box-shadow and gradient thing
3.15. Why should CSS styles be initialized?
Because of browser compatibility issues, different browsers have different default values for some tags. If CSS is not initialized, the page display will often be different between browsers.
Of course, initialization styles can have an impact on SEO, but you can’t have your cake and eat it, but try to initialize with minimal impact.
3.16. Explain the principle, advantages and disadvantages of CSS Sprites
CSS Sprites is basically a combination of background images from a web page into an image file,
The combination of “background-image”, “background-repeat” and “background-position” of CSS is used for background positioning.
Background-position can be used to accurately locate the position of the background image.
Advantages:
A. Reduce HTTP requests for web pages
B. Reduce the size of the image in bytes
C. Solved the trouble of web designers in naming pictures, only a collection of pictures can be named, do not need to name every small element
D. Change the style is convenient, only need to modify the color or style of the picture on one or less pictures, the style of the whole web page can be changed.
Disadvantages:
A. In widescreen, high-resolution adaptive pages, it’s easy to break the background if your image is not wide enough
B. CSS Sprites in the development of photoshop or other tools to measure and calculate the precise location of each background unit
C. It is troublesome to maintain. If the background of the page is slightly changed, it is generally necessary to change the merged picture
3.17. Explain float and how it works?
A. Floating elements are separated from the document flow and do not occupy space (causing “height collapse”)
B. The floating element touches the border containing it or stays in the border of the floating element.
3.18 problems caused by floating elements
A. The height of the parent element cannot be spread out, affecting elements of the same level as the parent element
B. Non-floating elements at the same level as floating elements follow
C. If the first element does not float, the element before it must float as well. Otherwise, the structure of the page will be affected
3.19. What is FOUC (unstyled content flicker)? How do you avoid FOUC?
If you use the import method to import CSS, some pages will appear strange in IE under Windows:
The Flash of Unstyled page Content is called Flash of Unstyled Content, or FOUC.
How it works: When the stylesheet loads later than the structural HTML, the page stops rendering when it is loaded into the stylesheet. After the stylesheet is downloaded and parsed, the page is rerendered, and the screen briefly flickers.
Workaround: Use the LINK tag to place the stylesheet in the document HEAD.
3.20. What are the differences between the three assignment methods of line-height? (with units, pure figures, percentages)
With units: px does not count, em uses its parent element’s font size as reference to calculate its own line height
Pure numbers: Pass the ratio to offspring, for example, if the parent line height is 1.5 and the child element font is 18px, then the child element line height is 1.5*18=27px
Percentage: Passes the calculated value to descendants
See the “Understanding of Line height”, “Analysis of Line height and vertical”, see the online source code.
3.21, : Link, :visited, :hover, :active?
L-v-h-a, L (Link)ov(visited)e H (hover) A (active)te, namely, love and hate two words to summarize
3.22. What are some common browser compatibilities? How to solve it?
A. Margin and padding are different by default
B. IE6 bilateral distance bug
C. In Internet Explorer 6, the element height exceeds the preset height. The reason is that previous browsers in IE8 set the default line height for elements
D. Min-height does not work in Internet Explorer 6
While IE uses filter:Alpha(Opacity=60), other mainstream browsers use Opacity :0.6
F. Input border problem, remove the input border generally use border:none; This will work, but it will not work under IE6 due to a BUG in parsing input styles
3.23. Is there a way to set CSS styles for a DOM?
A. External style sheets: Introduce an external CSS file via the tag
B. Internal style sheets: Place the CSS code inside the
C. Inline styles: Define CSS styles directly inside HTML elements
3.24. What is margin overlap? What’s the result of the overlap?
Margin overlap is margin-collapse.
In CSS, the margins of two adjacent boxes (which may be siblings or ancestors) can be combined to form a single margin. This way of combining margins is called folding, and the resulting margins are called folded margins.
The folding results follow the following calculation rules:
A. When two adjacent margins are both positive, the result of folding is the greater value between them.
B. When two adjacent margins are both negative, the result of folding is the greater value of their absolute values.
C. When two margins are positive and negative, the result of folding is the sum of the two.
3.25 what is the difference between opacity and opacity of rGBA ()?
Rgba () only applies to the element’s color or its background color.
B. Set child elements of rGBA transparent elements not to inherit transparent effects!
3.26. What does the CSS property Content do? What are the applications?
The CONTENT property of CSS applies exclusively to the before/after pseudo-element, which is used to insert generated content.
Special symbols can be displayed with custom fonts.
Four, JavaScript,
4.1. Please explain what is a closure
A closure is a special kind of object. It consists of two parts: the function and the environment in which the function is created.
A closure can be understood simply as “a function defined inside a function.” A closure is a bridge between the inside of a function and the outside of a function. Closures have the following features:
A. JavaScript allows you to use variables defined outside of the current function
B. The current function can reference variables defined in the external function even if the external function has returned
C. Closures can update the values of external variables
D. Simulate private methods with closures
Because closures cause variables in a function to be stored in memory, which can be very memory consuming, you should not abuse closures because they can cause performance problems on your web page
4.2 What is the difference between call and apply?
Call and apply are used to change the direction of this inside the function body.
The difference is that from the second argument, call passes the arguments in order, whereas apply puts the arguments in an array.
Call and apply can be used when arguments are clear, and apply and arguments can be used when arguments are unclear
4.3 how to deeply clone an object using native Javascript code (pay attention to the object type)
I found a function on the Internet, and I copied it recursively. The parameter passed in must be Array or Object.
Json. stringify and json. parse are also used. View the online code. See Object Cloning in JavaScript
$(‘.class’) or $(‘div. Class ‘) is more efficient.
JQuery uses the Sizzle engine internally to handle various selectors. The Sizzle engine selects from right to left, so this statement selects.class,
The second one filters out the div tag directly, while the first one doesn’t filter and lists all related tags. See jQuery Best Practices
4.5. Realize the name and type of all members in the output Document object
Loop through the document with a for in and console out the content,
If you see an article and you judge document.hasownProperty and then print it, I’ve tested it and it doesn’t print.
View the online code. See the JavaScript Essentials Archive: DOM
Get the absolute position of a DOM element
OffsetTop: Returns the distance of the current element relative to the top of its offsetParent element
OffsetLeft: Returns the distance of the current element to the left of its offsetParent element
GetBoundingClientRect () : The return value is a DOMRect object that contains a set of read-only attributes — left, top, right, and bottom — that describe the border, in pixels
See “Dimensions and Coordinates in JavaScript” for online code.
4.7, how to use JS to generate a table?
Create a table with createElement and set the table attributes with setAttribute.
AppendChild then sets the contents of tr and TD with the for loop, splices the content with appendChild, and sets td with innerHTML and style.padding.
View the online code. See JavaScript Essentials Archiving: DOM Tables
4.8. Pre-load a picture, display it in the web page after loading, and set its height and width to 50px
New Image() gets an Image object and sets the width and height in the onLoad of the Image object. View the online code.
If you have a table with 4 rows of tr, reverse the order of tr in the table
Rows are retrieved from the current tBody by table.tbodies [0].rows, followed by two methods. The retrieved rows do not have the reverse method.
The first is to push the rows into another array
The second is to use an Array. The prototype. Slice. The call () will be those rows into an Array,
And then reverse, table appendChild. View the online code.
In appendChild, instead of adding the column at the end, replace it.
4.10. Simulate a HashTable class, register four methods on a class: including add, remove, contains, length methods
We define an array in the constructor, then simulate add with push, and remove with splice.
All four methods are on top of Prototype. View the online code.
4.11 Ajax reads and parses an instance of an XML document
A. Initialize an HTTP request and import it as an ActiveX object. Later, standard browsers provided the XMLHttpRequest class, which supported the methods and properties provided by ActiveX objects
B. To send a request, you can call the open() and send() methods of the HTTP request class
C. to deal with the server’s response, through the http_request onreadystatechange = nameOfTheFunction. To specify the function
See AJAX, Getting Started with AJAX, for online code.
4.12. How does JS implement object-oriented and inheritance mechanism?
Create object methods:
A. Create objects using JSON
B. Use the JavaScript Object type
C. Create functions to generate objects
Inheritance mechanism:
A. Constructor binding, using the call or apply method, binds the constructor of the parent object to the child object
B. Prototype mode, inheriting new function mode
C. Inherit function prototype property directly, an improvement on B
D. Use empty objects as mediators
E. ECMAScript5 defines a new method object.create () to create a new method
F. Copy inheritance: Copy all the attributes and methods of the parent object into the child object to achieve inheritance. See Object Cloning in JavaScript
See “Design Ideas for Javascript Inheritance Mechanisms” and “Constructor Inheritance” for online code.
4.13, JS module encapsulation methods, such as how to achieve private variables, can not directly assign values, only through the public method
A. Using JSON to generate the original schema of the object, it would be cumbersome to write more than one and would not reflect that they are instances of the same prototype object
B. Improvement of the original pattern, you can write a function to solve the problem of code duplication. Nor does it reflect that they are instances of the same prototype object
C. The constructor pattern, which is a normal function, uses the this variable internally, but has a waste of memory problem.
D. Prototype mode, where each constructor has a Prototype property that points to another object. All properties and methods of this object are inherited by the constructor instance, and those properties and methods can be defined directly on the Prototype object. Prototype mode validation methods: isPrototypeOf(), hasOwnProperty(), and in operators.
See Encapsulation for online code.
4.14. How many cases can this pointer be used?
This refers to the object on which the function is called.
A. A pure function call, which is Global, so this represents the Global object.
B. As a call to an object method, this refers to the parent object.
C. Called as a constructor by using this function to create a new object. In this case, this refers to the new object.
D. Call of apply and call. Their function is to change the calling object of the function, and its first parameter represents the changed calling object.
Refer to Javascript for this to see the online code.
4.15. What are the common methods of binding events in JavaScript?
A. Bind directly to the DOM element, which can be interpreted as an HTML tag, onXXX=”JavaScript Code”, and view the event list.
Elementobject. onXXX=function(){}, known as DOM0 event system
C. Bind event listener functions. Standard browsers use addEventListener(), IE11 version below attachEvent() to bind event listener functions, commonly known as DOM2 event system.
See JavaScript Methods for Binding Events
4.16. Explain bubbling and capturing in javascript
<div id="click1">
<div id="click2">
<div id="click3"> Event </div> </div>Copy the codeA. Netscape insists that the events of element 1 occur first, in a sequence known as capture
B. Microsoft keeps element 3 in priority, and this sequence of events is known as bubbling
C. W3C chose an alternative. Any event that occurs in the W3C event model enters the capture phase, reaches the target element, and then bubbles
The third argument to the event-listener function addEventListener() controls whether the method catches or bubbles
See “Events,” “Bubbling and Capturing javascript,” for online code.
4.17. Features of jQuery
A. A lightweight JS library
B. Rich and fast DOM selectors
C. chain expression
D. Event, style, animation and other special effects support
E. Ajax operation encapsulation, cross-domain support
F. Cross-browser compatibility
G. Plug-in extension development
See JQuery features, Advantages and Disadvantages and Common Operations
4.18. What are the advantages and disadvantages of Ajax?
Advantages:
A. None Refresh Updated data
B. Asynchronously communicate with the server
C. Front-end and back-end load balancing
D. widely supported based on standards
E. Interface and application separation
Disadvantages:
A. AJAX kills the Back and History functions, which break the browser mechanics
B. AJAX security issues
C. Weak support for search engines
D. violate the purpose of URL and resource positioning
See How AJAX works and Its Pros and Cons
4.19, Null and undefined difference?
Null:
A. Null is an object representing “none” and is 0 when converted to a value
B. Null indicates “no object”, that is, there should be no value.
Undefined:
A. Undefined is a primitive value representing “none”, which is NaN when converted to a value.
B. Undefined means “missing value”, that is, there should be a value here, but it is not defined yet.
See the Difference between undefined and NULL.
4.20. What does the new operator do?
A. A new object is created. It inherits from function prototypes
B. The constructor is executed. When executed, the corresponding message is passed in
C. The context (this) will be specified as the new instance
D. If the constructor returns an “object”, that object replaces the entire new result
See the New operator
4.21. What are the ways of JS lazy loading?
A. Place the script node before the end
B. Use the script tag’s defer and async properties. The defer property is lazy loading and is loaded after the page is rendered, while the async property is loaded in parallel with the document
C. Dynamically add script nodes by listening for onload events
D. Download JS scripts through Ajax and dynamically add script nodes
See Javascript Lazy Loading
4.22. How to solve cross-domain problems?
A. JSONP (JSON with Padding), Padding JSON
B. the iframe across domains
C. HTML5’s window.postmessage method is cross-domain
D. Set the SRC attribute of img to send cross-domain requests
E. Cross-domain resource Sharing (CORS). Browsers will Allow cross-domain requests after the server sets the ACCESS-Control-allow-originHTTP response header
4.23 Documen.write vs. innerHTML
Write:
A. Change the HTML output stream
B. When document.write() is used after the document is loaded, this overwrites the document. For example, in the onLoad event
C. Input the CSS style tag to change the style, for example document.write(“*b{color:red; font-weight:bold; } * “);
InnerHTML:
A. Change the HTML content
B. Input the style tag of the CSS
See JavaScript HTML DOM – Changing HTML
4.24. What operations cause memory leaks?
A. When the page element is removed or replaced, if the event bound to the element is still not removed, IE will not handle it properly. In this case, manually remove the event first, otherwise there will be memory leakage.
B. In IE, if any object in a circular reference is a DOM node or an ActiveX object, the garbage collection system does not process it.
C. Closures can hold local variables in a function without releasing them.
D. When destroying the object, iterate over the attributes and delete them in sequence; otherwise, the object will be leaked.
See “Several cases of JS Memory Leaks”, “JavaScript Memory Analysis”
4.25. Variable declaration enhancement in JavaScript?
Function and variable declarations are always implicitly promoted by the JavaScript interpreter to the top of the scope that contains them.
Only the name is promoted in the function expression, and the function body is assigned only when the assignment statement is executed.
function foo() {
bar();
var x = 1;
}
function foo() {// same as var x; bar(); x = 1; }function test() {
foo(); // TypeError "foo is not a function"
bar(); // "this will run!"
var foo = function() {}// Function expressions are assigned to variables'foo'
function bar() {}// Name'bar'Function declaration}Copy the code4.26. How to determine whether the script is running in a browser or node environment?
Check whether the Global object is window. If so, the script is currently running in the browser
4.27. What is “use strict”
ECMAscript 5 adds a second mode: “Strict Mode”
The main objectives of the Strict Mode are as follows:
A. Eliminate some unreasonable and inaccurate Javascript syntax and reduce some weird behaviors;
B. Eliminate some unsafe parts of code operation to ensure the safety of code operation;
C. Improve the efficiency of the compiler and increase the running speed;
D. Pave the way for future versions of Javascript.
Note: After testing IE6,7,8, and 9 do not support strict mode
See Javascript Strict Mode in detail
4.28 what does Eval do?
The eval() function evaluates a string and executes the JavaScript code inside it.
Eval () is a top-level function and is independent of any object.
If a string represents an expression, eval() evaluates the expression. If the argument represents one or more JavaScript declarations, eval() executes the declaration.
4.29. JavaScript prototype, prototype chain?
Prototype:
A. A stereotype is an object from which other objects can implement property inheritance.
B. The true Prototype of an object is held by the [[Prototype]] property inside the object. Browsers support the nonstandard accessor __proto__.
C. In javascript, an object is any unordered set of key-value pairs. If it is not a primary data type (undefined, NULL, Boolean, number, string), it is an object.
The prototype chain:
A. Because every object and prototype has a prototype, and the prototype of the object points to the parent of the object, and the parent’s prototype points to the parent’s parent, we link this relationship through the prototype layers as the prototype chain.
B. The end of the chain is always the default object prototype.
a.__proto__ = b;
b.__proto__ = c;
c.__proto__ = {}; //default object
{}.__proto__.__proto__; //null
Copy the codeSee Understanding JavaScript Prototypes
4.30 draw a memory map of this object
View the online code.
4.31. What is the difference between JQuery and JQuery UI?
JQuery is a JS library that provides functions such as selectors, property modification and event binding.
JQuery UI is a plug-in designed on the basis of jQuery and using the extensibility of jQuery. Provides some common interface elements, such as dialog boxes, drag behavior, resizing behavior, and so on
4.32. Have you seen the jQuery source code? Can you briefly explain how it works?
JQuery gives us a simple and convenient coding model (1> create jQuery objects; 2> Use jQuery object properties/methods/events),
A powerful DOM element finder ($), plug-in programming interface (jquery.fn), and the idea of a “configuration” object for plug-in initialization
Refer to “jQuery Working Principle Analysis and source code Examples”
4.33. How to convert an array to a JSON string in jQuery
In jQuery1.8.3 there is a method called “parseJSON” that does the conversion from string to json.
If the current browser supports window.JSON, the method in this object is called directly.
(new Function(“return “+ data))(); Execute code return.
There is a difference between eval and New Function.
4.34 Write out the contents of console.log
var msg = 'hello'; // The top-level scope window has a variable MSGfunction great(name, attr) {
var name = 'david';
var greating = msg + name + '! ';
var msg = 'hello';
for (var i = 0; i < 10; i++) {
var next = msg + 'Your ID is' + i * 2 + i;
}
console.log(arguments[0]);
console.log(arguments[1]);
console.log(greating);
console.log(next);
}
great('Tom')
Copy the codeView the online code.
A. arguments[0] is overridden
B. MSG has a declaration boost, see 4.25 for an example
Implicit type conversions occur in c. next
4.35. Please explain the execution process of the following codes
var t=true;
window.setTimeout(function(){
t=false; }, 1000);while(t){
console.log(1);
}
alert('end');
Copy the codeView the online code.
A. JavaScript engines are single-threaded, and browsers have only one and only one thread running JavaScript programs at any given time
B. setTimeout is an asynchronous thread that needs to wait for the JS engine to finish processing the synchronous code (while statement) before execution. The while statement is directly an infinite loop. The JS engine is not idle and will not execute the following alert or insert setTimeout. I’m executing online code in Chrome, and the browser ends up terminating an alert loop.
C. The working mechanism of JavaScript is as follows: asynchronous code will be executed only when no synchronous code is executed in the thread. SetTimeout is asynchronous code, so setTimeout can only be executed when JS is idle. However, an infinite loop will never be idle, so setTimeout will never be executed.
4.36. Print today’s date in YYYY-MM-DD format, for example, today is September 26, 2014, then print 2014-09-26
See JavaScript Date Objects
4.37. What are the roles of Callee and Caller in Javascript?
The arguments.callee property contains the currently executing function.
Caller returns a reference to a Function that calls the current Function.
Recommended video course: HTML+CSS+JS+ VUE front-end basic introduction ~www.bilibili.com/video/av823…)
More learning content: My Learning exchange group click:Web front-end learning Exchange Group