Some time ago, I concentrated on sorting out interview questions about the front-end. Thanks to the patient and conscientious brothers Kaihao and Wen Dong for their recent guidance and advice. You can pass these questions and you can check your level below.
https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese
I also use my spare time (Afternoon and evening when there are no classes scheduled for three days) Try to write down your own answers. My level is limited, so I hope you can understand me.
Only the first half is provided for the time being. Some answers about js and jQuery in the second half are not fully confirmed and will be released later.
During this incident, I have been sorting out interview questions about the front-end. The purpose of sorting out these questions is not only to learn how to cope with the upcoming interview, but also to supplement basic knowledge. The progress of daily project development is too fast, and many attributes or methods are forgotten after use. This will cause another hidden danger. Because the basic knowledge is not solid enough and the commonly used methods are not used proficiently enough, it will be difficult to develop projects efficiently.
With solid basic knowledge, you can expect to go further.
1) Knowing the W3C standards, when writing HTML, you will avoid the hidden dangers of "unclosed tags, random nesting, and mixed case" that may cause inconsistent display in different browsers.
2) Understand the "cascading" rules of CSS, organize and compare the methods of clear floating and centering, and also discover some uncommon attributes. Therefore, it is helpful to write style sheets efficiently in the future.
Wait, wait
What excites me most about writing code is the process of learning new technologies and trying new visual effects.
For example, on the topview recruitment website, considering the rich interactions and functions on the future pages, the script files will be larger. Although general browsers have asynchronous loading functions for files, these files refer to image and video style sheets, etc., and do not contain scripts. This means that when the script is loaded, it will cause blockage, and the loading of the script will block the loading of images on the page. This means that because the script file is too large, users may need to wait for a longer event. When the basic elements such as scripts inside the page have not been loaded, and the styles and structures have been loaded, the css3 animation appears, and the four small balls rotate and scroll smoothly until the script is completely loaded.
The front-end itself is a beautiful and interesting field. For many websites or systems, the functions provided by the backend are the core modules, but it depends on whether the website or system can continue to attract users' attention, whether it can stand out among the same type of products, and whether the front-end interaction is humane and Whether the performance is stable and efficient accounts for the vast majority of factors. A good user experience, giving them a positive and efficient user experience, and even changing the public's lifestyle is exactly my original intention of learning programming.
(The interviewer may ask: How did you achieve this effect or what other efforts have you made regarding user experience? It doesn’t matter. I prepared carefully. I even need to compare the difference between CSS3 transition and animation. , in view of the limited space, the specific use of css3 will not be listed here. The answers to user experience will be answered below)
/*@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。*/@-webkit-keyframes spin { 0% { -webkit-transform:rotate(0deg); } 50% { -webkit-transform:rotate(-180deg); } 100% { -webkit-transform:rotate(-360deg); }}/*使用 @keyframes 中创建动画，需要把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称 规定动画的时长*/-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;
For details, please refer to: http://www.w3school.com.cn/css3/css3_animation.asp
Brother Wen Dong recommends: http://www.tuicool.com/articles/NBbQjy3
(If you ask me this question, I will be very excited, because you can talk for half an hour.)
(There are two sets of development environments, one is used for the development of daily team projects, my jdk, tomcat, photoshop etc. are all deployed and installed on the wins system; the other set is used to "pretend". Well, for a patient with difficulty in choosing like me, I struggled for a while and finally decided to talk about the "pretend" development environment)
The operating system is linux ubuntu. It is very convenient for me to access common linux commands, download and install, transfer, add and delete files (will the interviewer ask what commands?)
The editor is brackets, which is a free, open source and cross-platform HTML/CSS/JavaScript front-end WEB integrated development environment that is simple, elegant and fast!
The browser is Chrome, which provides a wealth of development tools, such as single-step debugging, simulating different pixel devices, and the ability to display more CSS3 attributes.
（这个问题，用过git，用过myeclipse里的svn，用过tortoiseSVN将代码上传到sinaapp服务器，但是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）
在Git 中的绝大多数操作都只需要访问本地文件和资源，不用连网。对于任何一个文件，在Git 内都只有三种状态：已提交（committed），已修改（modified）和已暂存（staged）。已提交表示该文件已经被安全地保存在本地数据库中了；已修改表示修改了某个文件，但还没有提交保存；已暂存表示把已修改的文件放在下次提交时要保存的清单中。
基本的Git 工作流程如下所示：
1. 在工作目录中修改某些文件。
2. 对这些修改了的文件作快照，并保存到暂存区域。
3. 提交更新，将保存在暂存区域的文件快照转储到git 目录中。
常用命令：
//用git 把Git 项目仓库克隆到本地，以便日后随时更新：$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告诉Git 开始对这些文件进行跟踪，然后提交：$ git add filenme.html//每次准备提交前，先用git status 看下，是不是都已暂存起来了，然后再运行提交命令$ git commit -m 'initial project version'// 把本地仓库提交到远程仓库的master分支中$ git push origin master
1）根据需求，确定主题。透彻深入所做网站的核心功能和关键。
2）收集资料。从对比相同类型的网站（惯用而熟悉的样式，用户更乐意接受），参照别人可行的实现方法。 3）规划网站。抽离出类似的模块和可重用的部件。如果是响应式网站就需要设定断点，根据不同宽度屏幕设定样式。 4）设计数据库。 5）搭建基本的框架。引入重置样式表reset.css和字体样式表font.css，风格统一的图标还有后台需要用到的包。 6）编码和调试。注意统一命名和编码规范。当多人开发时，还需要制定规范文档。 7）上传测试。利用FTP工具，把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。 8）推广宣传 。不断宣传，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
9）维护更新 。网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者
（具体还需要集合我的实际经验：http://www.cnblogs.com/0603ljx/p/4284521.html）
它们是看待同种事物的两种观点，它们关注在同一个网站同一功能在不同设备不同浏览器下的表现：
渐进增强，一开始值构建站点的最小特性，然后不断针对个浏览器追加功能，性能越好的设备能够显示更加出众的效果。
优雅降级，一开始就构造站点的完整功能，然后针对浏览器测试和修复。
web标准对可访问性做了如下定义：web内容对于残障用户或者普通的可阅读和可理解性。无论用户是否残障，都得通过用户代理（User Agent）来访问Web内容。因此要提高可访问性，首先得考虑各种用户代理 ：桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。还得考虑用户访问Web内容时的环境限制 。比如：我们真的要考虑浏览器禁用JavaScript/CSS的情形吗？我的理解是，要考虑的其实不是禁用了JavaScript/CSS的浏览器，而是那些对JavaScript/CSS不支持或支持不好的用户代理。比如语音阅读器，手机浏览器等，JavaScript提供的是一层可访问性，不能代替内容本身。
当然，从渐进增强的角度讲，鼓励使用高级特性，只是同时要做到优雅降级，让低端用户代理上，也能保留低保真的体验。（除了用户代理，还有什么方法检测客户端设备？特性检测，css3媒体查询）
(讲讲我在平时项目中，在“渐进增强”和“优雅降级”的努力)
用一个大的CSS文件替代多个小体积的CSS文件这是一个很好的实践，可以获得更好的可维护性，但是在网站性能方面会产生一定的影响（这里指的是随着文件体积的增大，随之消耗服务器的内存也会增加）。尽管你应该把CSS文件拆分成小块，但是当浏览器请求这些文件时，会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。因此，如果你有4个Javascript和3个css文件在页面中被加载，你浪费掉了7次因网络往返过程产生的时间。在美国，延迟平均是70毫秒，这样你就浪费了7*70 = 490毫秒，大致延迟了半秒的时间。在美国之外的国家访问你的页面，平均延迟大约是200毫秒，这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的CSS完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。
Another important way to separate structure and presentation is to use semantic markup to structure documents content. The existence of an XHTML element means that the marked content has corresponding structural meaning. For example,
is used to mark paragraphs
Semantic tags are often related to the default style. For example, the Hx series indicates the title, which will be given the default block-level bold and centered style; , are used to distinguish It plays the role of emphasis on other words. Used to tell you exactly what they are used for.
Semantic tags allow everyone to more intuitively understand the uses of tags and attributes. Semantic web pages are friendly to search engines and are easier to be crawled by search engines, which is conducive to promotion.
Reduce the number of calls to other pages and files. Generally, in order to make the page lively, we will use a lot of background to load background images, and each background image will generate an HTTP request. To improve this situation, you can use a useful background-position attribute of CSS to load the background image. , we combine multiple images that need to be loaded frequently into a single image . When loading is required, you can use: background:url(....) no-repeat x-offset y-offset; Form loading can reduce the HTTP request for loading this part of the image to 1.
That is, compress the content that needs to be transmitted and then transfer it to the client and then decompress , so the amount of data transmitted on the network will be greatly increased decrease. Usually, Apache and Nginx on the server can directly enable this setting. You can also directly set the transmission file header from the code perspective, add gzip settings, or directly set it from the load balancing device. However, it should be noted that this setting will slightly increase the load on the server. It is recommended that websites whose server performance is not very good should be carefully considered.
wealthgenegene in content delivery network, is a content distribution network. The basic idea is to avoid bottlenecks and links on the Internet that may affect data transmission speed and stability as much as possible, so that content transmission can be faster and more stable. Its purpose is to enable users to obtain the required content nearby, solve the congestion situation of the Internet network, and improve the response speed of users' access to the website.
Ajax calls all use the cache call method, which is generally implemented using the additional feature parameter method. Pay attention to the
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
