少し前、私はフロントエンドに関するインタビューの質問を整理することに集中していました。最近の指導とアドバイスをくださった忍耐強く良心的な兄弟、カイ・ハオとウェン・ドンに感謝します。これらの質問に合格すると、以下で自分のレベルを確認できます。
https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/English
この事件の際、私はフロントエンドに関する面接の質問を整理していましたが、これらの質問を整理する目的は、今後の面接に対処する方法を学ぶだけでなく、基礎知識を補足することでもあります。日々のプロジェクト開発の進行が速すぎて、使用後に多くの属性やメソッドが忘れられてしまいます。これは、基礎知識が十分に確立されておらず、一般的に使用されるメソッドが十分に使いこなされていないため、別の隠れた危険を引き起こします。プロジェクトを効率的に開発するため。
1) W3C 標準を知っていれば、HTML を記述するときに、異なるブラウザーで表示の不一致を引き起こす可能性がある「閉じられていないタグ、ランダムな入れ子、大文字と小文字の混合」の隠れた危険を回避できます。
2) CSS の「カスケード」ルールを理解し、明確なフローティングとセンタリングの方法を整理して比較し、いくつかの珍しい属性も発見します。したがって、スタイルシートを効率的に作成することは、将来的に役立ちます。
例えば、topview採用サイトでは、将来のページでの豊富なインタラクションや機能を考慮すると、スクリプトファイルのサイズが大きくなります。一般的なブラウザにはファイルの非同期読み込み機能がありますが、これらのファイルは画像や動画のスタイルシートなどを参照しており、スクリプトが含まれていないため、スクリプトを読み込むとブロックが発生し、スクリプトの読み込みが停止します。つまり、スクリプト ファイルが大きすぎるため、ユーザーはより長いイベントを待つ必要がある可能性があります。ページ内のスクリプトなどの基本要素がまだ読み込まれておらず、スタイルと構造が読み込まれている場合、css3 アニメーションが表示され、スクリプトが完全に読み込まれるまで 4 つの小さなボールがスムーズに回転およびスクロールします。
フロントエンド自体は美しくて面白い分野です。多くの Web サイトやシステムでは、バックエンドで提供される機能がコアモジュールとなりますが、その Web サイトやシステムがユーザーの注目を集め続けることができるか、同種の製品の中で目立つことができるか、フロントエンドが優れているかどうかによって決まります。 -エンドインタラクションは人道的であり、パフォーマンスが安定していて効率的であるかどうかが要因の大部分を占めます。優れたユーザーエクスペリエンスを提供し、ポジティブで効率的なユーザーエクスペリエンスを提供し、さらには一般の人々のライフスタイルを変えることは、まさに私がプログラミングを学ぶ当初の目的でした。
(面接官は次のように尋ねるかもしれません: この効果をどのように達成したのか、ユーザー エクスペリエンスに関して他にどのような努力をしましたか? それは問題ではありません。私は慎重に準備しました。CSS3 トランジションとアニメーションの違いを比較する必要さえありますスペースが限られているため、css3 の具体的な使用法についてはここには記載しません。css3_animation.asp
Web アプリケーションや Web サイトを作成する過程で、その UI、セキュリティ、パフォーマンスの高さ、パフォーマンス、SEO、保守性、技術的要素をどのように考慮しますか?
(開発環境は 2 セットあり、1 つは毎日のチーム プロジェクトの開発に使用され、私の JDK、Tomcat、Photoshop などはすべてデプロイされ、インストールされています)勝利システムでは、もう 1 つは「ふり」に使用されます。まあ、私のように選択が難しい患者のために、しばらく悩んだ結果、「ふり」の開発環境について話すことにしました)
運用用。システム Linux の Ubuntu なので、一般的な Linux コマンドへのアクセス、ファイルのダウンロードとインストール、転送、追加と削除が非常に便利です (面接官はどのような指示を尋ねますか?)
（这个问题，用过git，用过myeclipse里的svn，用过tortoiseSVN将代码上传到sinaapp服务器，但是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）
用一个大的CSS文件替代多个小体积的CSS文件这是一个很好的实践，可以获得更好的可维护性，但是在网站性能方面会产生一定的影响（这里指的是随着文件体积的增大，随之消耗服务器的内存也会增加）。尽管你应该把CSS文件拆分成小块，但是当浏览器请求这些文件时，会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。因此，如果你有4个Javascript和3个css文件在页面中被加载，你浪费掉了7次因网络往返过程产生的时间。在美国，延迟平均是70毫秒，这样你就浪费了7*70 = 490毫秒，大致延迟了半秒的时间。在美国之外的国家访问你的页面，平均延迟大约是200毫秒，这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的CSS完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。
タグ リストは使用しません。 ;div> ; セマンティック タグはデフォルトのスタイルに関連付けられることがよくあります。たとえば、Hx シリーズはデフォルトのブロックレベルの太字と中央揃えのスタイルが与えられ、 が使用されます。他のテキストと区別するための役割を果たします。それらが何に使用されるかを正確に伝えるために使用されます。
セマンティックタグを使用すると、誰もがタグと属性の使用法をより直観的に理解できるようになります。セマンティック Web ページは検索エンジンにとって親しみやすく、検索エンジンによってクロールされやすいため、プロモーションに役立ちます。
- *Web サイトのファイルとリソースをどのように最適化しますか?
- 私たちが期待しているソリューションには次のものが含まれます:
- ファイルの結合 (上記の質問「5 つの異なる CSS ファイルがある場合、それらをページに読み込む最適な方法は何ですか?」と同じです )
「5 つの異なる CSS ファイルがある場合、それらをページにロードする最良の方法は何ですか?」という質問に移ります。一般に、ページを活気のあるものにするために、背景画像を読み込むために多くの背景を使用します。各背景画像は HTTP リクエストを生成します。この状況を改善するには、CSS の便利な background-position 属性を使用して読み込むことができます。背景画像。頻繁にロードする必要がある複数の画像を 1 つの画像に合成します。background:url(....) no-repeat の形式でロードできます。 x-offset y-offset; 画像のこの部分をロードするための HTTP リクエストを 1 に減らします。
ファイルの最小化/ファイル圧縮-
つまり、送信する必要のあるコンテンツを圧縮してクライアントに転送し、その後解凍することで、ネットワーク上で送信されるデータ量が大幅に削減されます。通常、サーバー上の Apache および Nginx は、この設定を直接有効にすることができます。また、コードの観点から送信ファイルのヘッダーを直接設定したり、gzip 設定を追加したり、負荷分散デバイスから直接設定したりすることもできます。ただし、この設定によりサーバーの負荷が若干増加することに注意してください。サーバーパフォーマンスがあまり良くないウェブサイトは慎重に検討することをお勧めします。
CDN を使用してホストする -
CDN の正式名称は Content Delivery Network で、コンテンツ配信ネットワークです。基本的な考え方は、データ伝送速度と安定性に影響を与える可能性のあるインターネット上のボトルネックやリンクを可能な限り回避し、コンテンツ伝送をより速く、より安定させることです。その目的は、ユーザーが必要なコンテンツを近くで入手できるようにし、インターネットネットワークの混雑状況を解消し、ユーザーのウェブサイトへのアクセスの応答速度を向上させることです。
キャッシュの使用法-
à このパラメータが変更されない場合は、キャッシュ ファイルを使用します 変更された場合は、新しいファイルを再ダウンロードするか、情報を更新してください。 Cssファイルを文書の先頭に配置し、jsを文書の最後に配置します
サーバー上でcontrol-cacheを構成するlast-modify-date-
サーバー上でEntity-Tagを構成するif-none-match-
Wen Dong 兄弟は次のように述べています: -
はい、H5 の新機能のプリロードと画像の最適化と組み合わせることで、JPG の場合はソフトウェア jpegmin を、png の場合は https://tinypng.com/ を推奨します。最初の 2 つは圧縮後に歪みません。GIF には GIF Optimizer が推奨されますが、バリが発生する可能性があります。
Web サイトのリソースを提供するために複数のドメイン名を使用することがより効果的であるのはなぜですか?
- ブラウザは 1 つのドメイン名から同時にいくつのリソースをダウンロードできますか?
それはブラウザの同時リクエスト数です。同じドメイン名で同時にリクエストできる数には一定の制限があります。制限を超えるリクエストはブロックされます。 （百度から写真をお借りしました） -
例外はありますか？
ボーナスポイント: 携帯電話に悪影響を及ぼす可能性があるとの指摘 (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/)-
ボーナスポイント: HTTP2 / SPDY -
-
ページの読み込み時間を短縮する 3 つの方法を挙げてください。 （読み込み時間とは、体感時間または実際の読み込み時間を指します）
- 実際の読み込み時間については、上記の「Web サイトのファイルとリソースを最適化するにはどうすればよいですか?
」というタイトルの方法を使用できます。 時間の認識については、「コードを書くことのどのような側面に興奮または興味を持っていますか?
」という質問に対する答えを使用できます。
- *如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
- 建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范
- 为了保持一致性，接受项目原有的风格
- 直接使用 VIM 的 retab 命令
- 请写一个简单的幻灯效果页面
- 如果不使用JS来完成，可以加分。
- *你都使用哪些工具来测试代码的性能？
- Profiler, JSPerf, Dromaeo
- 如果今年你打算熟练掌握一项新技术，那会是什么？
开发单页webapp的技术。
SAP能够是页面与页面之间无缝连接，避免出现白页，且带有动态效果，提高用户体验。同时SAP，有javascript渲染页面，然后在从服务器获取小量的数据显示，如此反复，请求的数据无需要服务器处理，减少服务器负荷。
SAP对技术要求高。要考虑首屏加载事件过长；动画效果要考虑低端手机；垃圾收集，需要自己释放资源，避免页面变卡。
- *Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别？
- 请谈一下你对网页标准和标准制定机构重要性的理解。
关于W3C标准，要求：
1）书写闭合，标签小写、不乱嵌套。有利于SEO
2）尽量使用外链的css和js脚本，结构行为表现分离。有利于页面加载速度加快。
3）样式和标签分离，使用更合理的语义化标签，内容被更多用户设备访问，维护成本也会降低。
指定标准，能够规避不同开发商开发出来不同的浏览器显示不一致问题，同时为
- *什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为<strong>文档样式短暂失效</strong>(Flash of Unstyled Content),简称为FOUC.原因大致为：1，使用import方法导入样式表。2，将样式表放在页面底部3，有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。<strong>此样式表被下载和解析后，将重新渲染页面</strong>，也就出现了短暂 的 花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中更多
ログイン後にコピー
- 请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程
1）用户输入网址
2）浏览器通过DNS获取网站的IP地址
3）浏览器尝试与服务器建立连接
4）服务器发送永久重定向
5）浏览器跟踪从定向地址
7）服务器处理请求
8）服务器发送HTML响应
9）浏览器开始显示HTML
10）浏览器发送获取嵌套在html中的元素
关于页面渲染过程：
1）解析HTML代码，生成一棵DOM树
2）解析CSS文件
3）生成渲染树（受样式影响，包含不可见元素）
4）渲染树中的节点
HTML相关问题：
- doctype（文档类型）的作用是什么？
位于html标签最前面，告诉浏览器以那种html和xhtml规范。分为标准模式和怪异模式、基于框架的HTML模式。假如浏览器不以doctype标准模式编写DTD，页面除了无法通过代码检验之外，还无法在浏览器中正确显示。
a.如果需要干净的标记，免于表现层的混乱，用XHTML Strict DTD类型。
b.Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果用户使用了不支持层叠样式表（CSS）的浏览器以至于你不得不使用 HTML 的呈现特性时，用Transitional DTD 类型。
c.Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD
- 浏览器标准模式和怪异模式之间的区别是什么？
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一目的，他们创建了两种呈现模式，标准和混杂模式。在标准模式中，浏览器会根据规范呈现页面；在混杂模式中。页面会以一种相对宽松的向后兼容方式显示。混杂模式常用于模拟老式浏览器的行为，以防止老站点无法工作。
他们最大的不同是对盒模型的解析。
如：在strict mode中 ：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在quirks mode中 ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
使用 document.compatMode来判断浏览器的解析方式。
- 使用 XHTML 的局限有哪些？
xhtml要求严格：放弃了一些语义不好的标签，必须有head、body，每个dom必须要闭合。一些老的浏览器并不兼容。
ログイン後にコピー
- 如果页面使用 'application/xhtml+xml' 会有什么问题吗？
为contentType属性值，IE不支持application/xhtml+xml类型，支持text/html
- 如果网页内容需要支持多语言，你会怎么做？
使用统一的UTF-8编码
- 在设计和开发多语言网站时，有哪些问题你必须要考虑？
1）制图时，应该讲图形的图像层与文本层分离，这样在重新绘制改图形时只需对文本进行翻译。
2）设置控件属性应考虑到各种语言版本的文本显示，尽可能为翻译预留足够的空间。同时也应该保持不同语言界面的统一性，避免过多的差异。
3）编码注意代码复用，将多个模块的共用信息存放在共通的文件中便于全局管理。
页面请求的过程可描述如下:
1）用户在终端选择自己所偏好的语言,并通过浏览器向服务器发送页面请求。
2）模板界面接收到语言选项后,从资源文件中读取相应区域的资源。
3）在响应用户的页面请求时,系统将根据检索到的语言选项,动态的加载相关区域的JS文件和CSS文件,为不同区域初始化不同的样式。
4）数据库接口接收到语言选项后,将其作为一个SQL参数传入数据库,检索相应区域的数据。
5）模板界面将接收到的各种信息,组织成Html代码,再发送给浏览器,显示给终端用户。
该架构的核心是模板界面,它主要负责将接收到的各类信息组织成Html代码。
- data-属性的作用是什么？
data-是HTML5为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。
- 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
1）Web Storage API 2）基于位置服务LBS 3）无插件播放音频视频 4）调用相机和GPU图像处理单元等硬件设备 5）拖拽和Form API
ログイン後にコピー
- *请描述一下 cookies，sessionStorage 和 localStorage 的区别？
共同点：都是保存在浏览器端，且同源的。 区别： 1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 2）cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。 3）sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 4）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
ログイン後にコピー
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在<strong>web请求之间保存数据</strong>。有了本地数据，就可以<strong>避免数据在浏览器和服务器间不必要地来回传递</strong>。 sessionStorage、localStorage、cookie都是在<strong>浏览器端存储的数据</strong>。 其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在<strong>同源的同窗口（或tab）中，始终存在的数据</strong>。也就是说只要这个浏览器窗口没有关闭，即使<strong>刷新页面或进入同源另一页面</strong>，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。Web Storage带来的好处： 1）减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。 2）快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。 3）临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。浏览器本地存储与服务器端存储之间的区别其实数据既可以在浏览器本地存储，也可以在服务器端存储。浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。服务器存储数据安全一些，浏览器只适合存储一般数据。
ログイン後にコピー
- 请描述一下 GET 和 POST 的区别?
get是从服务器上获取数据，post是向服务器传送数据。
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程
get形式的url对搜索引擎更加友好，可以提高搜索引擎排名。Post使用的url有时候会阻止爬虫和搜索引擎的访问。其他网站和用户可以链接到get形式的url，无论用户的访问，还是搜索引擎的收录而相应提高了页面排名，能够直接或间接提高网站浏览。同时，get形式的url这种表示法是可以缓存的，显著提升了客户端和服务端的性能。
而不安全操作，如确定订购、下订单、达成协议和删除页面等，应该通过post执行，避免没有显式用户请求和同一的情况下发生意外的操作。例如搜索引擎删除整个页面，只因为抓取了一个链接。很多不希望用户浏览器遵循页面链接的各种完整，这些情况下，应该要求用户登录并且足够的权限才能执行某些危险操作。
若符合下列任一情况，则用POST方法：
* 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
* 若使用GET方法，则表单上收集的数据可能让URL过长。
* 要传送的数据不是采用7位的ASCII编码。
若符合下列任一情况，则用GET方法：
* 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
* 请求结果无持续性的副作用。
* 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。
（目测还会问到“同步和异步的区别?”）
同步：脚本会停留并等待服务器发送回复然后再继续。提交请求->等待服务器处理->处理完毕返回，这个期间客户端浏览器不能干任何事。
异步：脚本允许页面继续其进程并处理可能的回复。请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
若要在使用ajax请求后处理发送请求返回的结果，最好使用同步请求。
CSS 相关问题：
- CSS 中类(classes)和 ID 的区别。
在样式表定义一个样式的时候，可以定义id也可以定义class。
1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。
- 描述下 “reset” CSS 文件的作用和使用它的好处。
reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的想过。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。
比如说，
1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。
2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。
3）后面设置的属性将会覆盖前面重复设置的属性。
- 期待能够指出它的负面影响，或者提到它的一个更好的替换者"normalize"
normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。
- 解释下浮动和它的工作原理。
问题成因：在一个容器中，有两个浮动的子元素，会造成显示结果意想不到的问题。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的。
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
解决浮动：
1）添加额外标签
在浮动元素末尾添加一个空的标签例如
。 長所: 理解しやすく、使いこなしやすい
短所: この方法により、意味のない空のタグがどれだけ追加されるかは想像できますが、これは構造とパフォーマンスの分離に違反し、後のメンテナンスで悪夢になるでしょう。
2) br タグと独自の HTML 属性
利点: 空のタグメソッドよりもセマンティクスがわずかに強化され、コードが少なくなります
欠点: 構造とパフォーマンスの分離にも違反します、推奨されません
3) 親要素は overflow: hidden を設定します
IE6 では親要素の overflow 値を hidden に設定することで、zoom: 1 などの hasLayout もトリガーする必要があります。
利点: 構造的および意味論的な問題がなく、コードの量が非常に少ない
欠点: コンテンツが増加すると、自動行折り返しによりコンテンツが非表示になりやすく、オーバーフローする必要がある要素が表示されなくなり、overflow:hidden によって中央のキーが失敗します。
4) 親要素は、overflow:auto 属性を設定します。 IE6 も hasLayout をトリガーする必要があり、デモは 3 と似ています。 利点: 構造上およびセマンティック上の問題がなく、コードの量が非常に少ないです。 欠点: 複数のネストの後、Firefox によって一部のコンテンツがすべて選択されます。場合によっては、IE でマウスオーバーすると幅が変更されたり、最も外側のモジュールにスクロール バーなどが表示されたり、Firefox の初期バージョンでは理由もなくフォーカスなどが生成されたりすることがあります。
５）Use: after pseudo-element
注意すべき点：after は疑似クラス（一部の CSS マニュアルでは「疑似オブジェクト」と呼ばれます）ではなく、疑似要素（Pseudo-Element）です。 float のクリアなどについて。これらはすべて疑似クラスと呼ばれますが、CSS はより厳格であるべきです。 IE6-7 は :after をサポートしていないため、zoom:1 を使用して hasLayout をトリガーします。
.clearfix:after {content:"."; view:hidden; clear:both; }
.clearfix { *zoom:1; 利点:正しい、コード量は中央に集中します
短所: 不適切な再利用はコード量の増加を引き起こします
z-index とオーバーレイ コンテキストがどのように形成されるかを説明します。
- Z-index は、ページ上の要素のオーバーレイ順序を制御します。z-index 値が高い要素は、z-index 値が低い要素の前に表示されます。 z-index の使用条件: 位置属性があり、その値が静的でない要素に対してのみ有効です。オーバーレイ コンテキストは「スタック コンテキスト」に関連しており、スタック順序で一緒に前後に移動する共通の親を持つ要素のグループが、いわゆるスタック コンテキストを構成します。
要素のスタック順序は、それ自体の Z インデックスに依存するだけでなく、その要素が含まれるスタック コンテキストにも依存します
コンテキスト レベルが非常に低い場合は、それ自体の Z インデックス設定が非常に高くても。 、ご要望にはお応えできません。
Z-index 解析ルールは、w3c 仕様に準拠した標準ブラウザに基づいていますが、IE シリーズのブラウザでは常により多くの労力を費やす必要があります。 IE と標準ブラウザの z-index 解析には小さな違いがあります。それは、上記のスタック コンテキストの 3 つの条件のうち、2 番目の条件のサポートの違いです。標準ブラウザでは、要素には z- が必要です。インデックス値と位置属性があり、その値が静的ではない場合にのみ、新しいスタック コンテキストが生成されます。ただし、IE の以前のバージョンでは、位置を設定する限り、それほど気にしません。値を静的でない場合は、新しいスタック コンテキストが生成されます。
さまざまな float クリア手法をリストし、それらの適用可能な使用シナリオを指摘します。
- CSS スプライトとそれをページまたは Web サイトに実装する方法について説明します。
CSS スプライトは実際に複数の画像を 1 つの画像に結合し、CSS テクノロジーを通じてページ上にレイアウトします。この利点は、画像の数を減らすことで http リクエストが減り、Web サイトのパフォーマンスが向上することです。
- 1）Photoshopで背景が透明な新しいお絵かきボードを作成し、そのお絵かきボードに小さな絵を1枚ずつ配置し、小さな絵を適切なサイズに調整します。
2) 定規を通して画像の横座標と縦座標を記録します。
3) CSSコードbackground:url(....) no-repeat x-offset y-offset;を書き、同時に要素の固定高さと幅を設定します、overflow:hidden
- 你最喜欢的图片替换方法是什么，你如何选择使用。
不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。
于是，出现了通过CSS来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。
- Fahrner Image Replacement (FIR)
- Phark 的方法
- Gilder/Levin 的方法 (推荐)
Fahrner Image Replacement (FIR)
这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：
<h2><span>Hello World</span></h2>
ログイン後にコピー
h2 { background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; } span { display: none; } ログイン後にコピー
代码非常明白：先将图片应用在 H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。
Phark 的方法
<h2> Hello World </h2>
ログイン後にコピー
h2 { text-indent: -5000px; background:url(hello_world.gif) no-repeat; width: 150px;height:35px; } ログイン後にコピー
代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。
Gilder/Levin 的方法
<h2><span></span>Hello World </h2>
ログイン後にコピー
h2 { width: 150px;height: 35px; position: relative; } h2 span { background: url(hello_world.gif) no-repeat; position: absolute; width: 100%; height: 100%; }ログイン後にコピー
首先，将 H2 的 position 设为 relative ，这样将使 H2 里面的元素定位以 H2 为参照，然后将 SPAN 元素绝对定位，撑满整个 H2 区域，同时将背景图应用在 SPAN 标签里面；这种方法的原理是将 SPAN 标签覆盖在文字内容上面，一旦 SPAN 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。
- 讨论CSS hacks，条件引用或者其他。
hacks
_width针对于ie6。*width,+width针对于ie6,7。
color: red\9;/*IE8以及以下版本浏览器*/（但是测试可以兼容到ie10。
*+html与*html是IE特有的标签, firefox暂不支持.而*+html又为IE7特有标签（但是测试*html兼容ie6-10。*+兼容ie7-10）。
!important 在IE中会被忽视，ie6,7,8不识别，ie9+（包括ie9）是识别的。
条件引用
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--><!--[if IE 7]> 仅IE7可识别 <![endif]--><!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--><!--[if IE 8]> 仅IE8可识别 <![endif]--><!--[if IE 9]> 仅IE9可识别 <![endif]-->
ログイン後にコピー
- 如何为有功能限制的浏览器提供网页？
1）对于那些可以手动开启的功能，可以在页面上增设“用户使用指导”或“帮助手册”，提示用户如何开启相关的功能。（如果你不介意，还可以完全禁掉页面，强制用户使用固定设备，升级版本；哈哈，当年我做的BMS就是这样做）
例如，针对使用IE浏览器自带的功能可以限制对网页的浏览，比如activeX或者脚本，我们检测到它不可用时，提示用户启用的操作方式。
2）尽量避免当js或者css3失效时，页面不可用的动画效果。
例如，http://www.rippletec.net/网站为了营造一种当页面加载完毕，不同模块滚动到固定位置的绚丽动画效果。应该避免类似的效果，一方面产生繁琐的重绘过程，会消耗浏览器内存，对性能一般的设备可能因为压力过大，卡机或者无法渲染；另外一方面是网站当网站的js不可用时，模块滚动到固定位置的事件没有被触发，用户看到的将会是动画产生之前，最原始的页面状态，无法经行下一步操作。
（首次接触“优雅降级”这个词汇是在《jQuery基础教程（第4版）》，不过那时候已经是一年多以前，现在已经记不清当时书上举得例子了，记性差~真心抱歉）
3）应该为绑定异步的元素，设置herf属性。
例如，用户要执行查询某书本详细信息操作，点击“查询”按钮，通过js触发查询该条目的事件，然后采用jQuery异步执行操作，在页面固定位置加载相关书本的详细内容。$(".delete").click(function(){$.ajax(//..)})，但是一旦js不可用，或者jQuery无发加载的时候，用户将无法顺利执行操作。因此，可以为该操作设置herf属性，当$.ajax()可用时阻止直接跳转，而使用异步；当$.ajax()不可用时，直接跳转到详细信息的页面。
4）避免依赖脚本验证表单。服务器的表单验证不可避免。
5）部分浏览器不支持html5新标签，因此，可以用js创建相关标签，然后给它们的css赋予相关属性。
6）因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
var myLinks = document.getElementsByTagName('a');for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener(’touchstart’, function() { this.className = “hover”;}, false); myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);}ログイン後にコピー
然后用CSS增加hover效果：
a:hover, a.hover { /* 你的hover效果 */ }ログイン後にコピー
- 你会使用哪些技术和处理方法？
- 有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）
需要隐藏内容的几种可能性：
1）对文本的隐藏
2）隐藏超链接（另类黑链）
3）对统计代码隐藏
4）隐藏超出图片
5）css隐藏滚动条
6）css隐藏div层
具体实现：
1、css隐藏DIV及内容，完全隐藏内容与布局。display:none或者visible:hidden
（面试官也许会问到：关于display:none和visible:hidden区别）
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
2、通过对象盒子设置缩进样式（text-indent:-9999px）方法可以隐藏超链接文本内容
同样道理，可以用来隐藏图片上方文字。此类问题我们常见于LOGO处使用，我们想让图片作为背景，而图片上方放A链接文字内容，但html锚文本功能仍然正常也能鼠标点击使用。图片作为背景而html代码内看不到图片，但文字也存在，却是文字隐藏图片显示出，鼠标也能点击指向。
3、overflow: hidden 隐藏溢出DIV内容或图片
4、css隐藏滚动条
使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。
- 你用过栅格系统吗？如果使用过，你最喜欢哪种？
“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。
“使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了”
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
- 你用过媒体查询，或针对移动端的布局/CSS 吗？
针对http://topview123.sinaapp.com/细说
设备宽度(device-width)未必是布局宽度(width)，为了让非适应性布局与手机相适应，我们跟关心视图宽度，因此需要一种方式来设定宽度，这样可以使用媒体查询检测。
让视图的宽度和设备宽度一致
<meta element = "viewport" content = "width=device initial-scale = 1" >
ログイン後にコピー
每种布局，都应该根据目标设备指定固定宽度设计
@media screen and (max-width:320px){} ログイン後にコピー
为移动设备调整网页图像。在最基本的页面，一个移动优化的网站就是其布局、内容、互动都经过调整，以适应移动环境。最常见的做法是使用css媒体查询的功能为不同大小的屏幕提供不同的风格；为较小的屏幕优化布局，可以通过针对移动设备的模块服务。
不同设备的分离设计->根据监视屏幕大小进行设计->（媒体查询，灵活排版，图像结合）
- 如何优化网页的打印样式？
http://www.jb51.net/web/70358.html
- 在书写高效 CSS 时会有哪些问题需要考虑？
1）reset。参照上题“描述下 “reset” CSS 文件的作用和使用它的好处”的答案。
2）规范命名。尤其对于没有语义化的html标签，例如div，所赋予的class值要特别注意。
2）抽取可重用的部件，注意层叠样式表的“优先级”。
- 使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS)
（这里我会实话实说）过去一直没有机会接触“预处理器”，缺的不是学习的热情和动力，而是一种会使用到这门高深技术的需求，希望日后参与的项目将会用到这门技术，能够将学习揉入实际开发中。关于CSS 预处理器，我知道是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
- 描述下你曾经使用过的 CSS 预处理的优缺点。
- 如果设计中使用了非标准的字体，你该如何去实现？
1）图片替代
2）
- Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)
- 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？
浏览器会根据css rules 与dom tree 生成render tree。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
举个例子，有选择器：
body.ready #wrapper > .lol233
ログイン後にコピー
先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。
大体就是这样，不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。
1）效率，找元素的父亲和之前的兄弟比遍历所有儿子快而且方便。
2）关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。
-
解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。
每个盒子都有：边界、边框、填充、内容四个属性；
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；
-
* { box-sizing: border-box } の機能とそれを使用する利点について説明してください。
IEのバグといえば、IE6より前のバージョンでは、IEは他のブラウザとは異なり、ボーダーとパディングの両方が幅に含まれるというボックスモデルの解析に問題がありました。逆に、他の一部のブラウザにはボーダーとパディングが含まれていません。 IE ブラウザの場合、box-sizing: content-box; を設定すると、ブラウザのボックス モデルの解釈は、幅と高さを定義するときに、ボーダーとパディングを含みません。 - IE ブラウザでは、box-sizing: border-box; を設定すると、ブラウザのボックス モデルの解釈は、幅と高さを定義する場合、幅と高さの範囲内に含まれます。コンテンツの幅と高さは、定義された「幅」と「高さ」から、対応する方向の「パディング」と「ボーダー」の幅を減算することで得られます。コンテンツの幅と高さが負でないことを保証する必要があります。必要に応じて、コンテンツの幅または高さが少なくとも 0 になるように、要素の境界ボックスのサイズが自動的に増加します。
* { box-sizing: border-box } を使用して、IE ブラウザと非 IE ブラウザの違いを統一します。
- 知っているdisplay属性の値をすべて列挙してください
display属性は、要素が生成するボックスのタイプを指定します。
- インラインとインラインブロック、ブロックの違いを説明してください。
display属性は、要素が生成するボックスのタイプを指定します。ただし、block はブロックレベルの要素を表し、要素の前後に改行があります。inline がデフォルトのスタイルです。つまり、要素はインライン要素として表示され、要素の前後には改行がありません。 。つまり、ブロック要素は通常、独立したブロックとして実現され、別の行に変更されます。インライン要素は前後で改行されず、一連のインライン要素は行まで 1 行に表示されます。一杯。 Inline-block は、インライン ブロック要素を表します (CSS2.0 の新機能)。
display:block
1) ブロック要素は独自の行を占有し、複数のブロック要素はそれぞれ新しい行を開始します。デフォルトでは、ブロック要素の幅がその親要素の幅に自動的に収まります。
2) block要素は幅と高さの属性を設定できます。ブロックレベル要素の幅が設定されている場合でも、依然として排他的な行を占有します。
3) block要素はmarginとpadding属性を設定できます。
display:inline
1) inline 要素は単独で行を占有することはなく、1 つの行に収まりきらないまでは新しい行が追加されます。要素の内容。
2) inline要素のwidth、height属性の設定は無効です。
3) インライン要素の margin 属性と padding 属性、水平方向の padding-left、padding-right、margin-left、および margin-right はすべてマージン効果を生成しますが、垂直方向の padding-top、padding-bottom、margin -top はマージン効果を生成します。 、 margin-bottom はマージン効果を生成しません。
display:inline-block
簡単に言えば、はオブジェクトをインラインオブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロックオブジェクトとしてレンダリングされます。後続のインライン オブジェクトは同じ行に配置されます。たとえば、リンク (要素) に inline-block 属性値を与えると、リンクがブロックの幅と高さの特性と、インラインのピア特性の両方を持つようになります。
- 相対要素、固定要素、絶対要素、静的要素の違いを教えてください
CSS+DIVをレイアウトに使用する場合、位置、相対要素、絶対要素、静的要素、固定要素の4つの属性値は、明らかに、それはしばしば非常に憂鬱な結果をもたらします。今日いろいろ調べて、ようやくわかったことがあります。ここで要約すると:
まず各属性値の定義を見てみましょう:
1. static: デフォルト値。位置決めを行わない場合、 要素は通常のフロー に表示されます (top、bottom、left、right、または z-index 宣言は無視されます)。
2. 相対: 相対的に配置された要素を生成します。これは、上、下、左、右の設定を通じて通常の位置に対して相対的に配置されます。階層分類は、z-index を通じて実行できます。
3. 絶対: 絶対配置の要素を生成します。 静的配置以外の最初の親要素を基準にして配置されます 。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。
4. 修正: ブラウザ ウィンドウを基準にして配置された絶対位置の要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。
静的および固定の位置決め方法は理解しやすいため、ここでは分析しません。以下は、より一般的に使用される相対アプリケーションと絶対アプリケーションの分析です。
1.相対的に配置された要素は通常のテキスト フローから削除されますが、テキスト フロー内のその位置はまだ存在します。
背景が黄色のレイヤーは相対的に配置されており、赤い境界線部分は通常のフローでの位置です。上と左を通して配置した後、灰色の背景レイヤーの位置から、通常の位置がまだ存在していることがわかります。
2. 絶対。絶対として配置されたレイヤーは通常のテキスト フローから分離されますが、相対との違いは、通常のフロー内でのその位置が存在しなくなることです。黄色の背景レイヤーを絶対として配置すると、灰色の背景レイヤーが自動的に塗りつぶされます。
3. 相対と絶対の主な違い:
まず第一に、上記のように通常の流れの中での位置が存在するかどうかです。
第二に、相対的に配置されたレイヤーは、親要素がどのように配置されているかに関係なく、常に最も近い親要素に対して相対的になります。デフォルトでは、赤色の背景レイヤーは相対的に配置され、その直接の親要素の緑色の背景レイヤーは静的に配置されます。赤い背景レイヤーの位置は、緑色の背景レイヤーに対して上と左の 20 要素です。そして、赤い背景レイヤーが絶対として配置されている場合。赤い背景レイヤーは引き続き top:20px; left:20px; を定義しますが、その相対要素は位置決め方法が絶対または相対である黄色の背景レイヤーになります。したがって、絶対として配置されたレイヤーは常に、絶対または相対として定義された最も近い親レイヤーに対して相対的であり、この親レイヤーが直接の親レイヤーである必要はありません。親レイヤーで絶対または相対が定義されていない場合は、ボディに対して相対的に配置されます。
上下左右の配置に加えて、margin 属性値の定義も上記のルールに従います。
static とpositioning はあまり使用されず、比較的単純なので、ここでは分析しません。
以下は、より相対的、絶対的、固定的なアプリケーションの分析です:
relative によって配置されたレイヤーは、親要素がどのように配置されているかに関係なく、常に最も近い親要素に対して相対的です。
絶対によって配置されたレイヤーは常に、絶対または相対として定義された最も近い親レイヤーに対して相対的であり、この親レイヤーは必ずしも直接の親レイヤーであるとは限りません。親レイヤーで絶対または相対が定義されていない場合は、本文に対して相対的に配置されます。
fixed: 絶対的に配置される要素を生成し、ブラウザー ウィンドウに対して相対的に配置します。
- 現在使用している CSS フレームワーク、または製品ラインで使用したことがある CSS フレームワークはどれですか? (Bootstrap、PureCSS、Foundation など)
Bootstrap は HTML5 と CSS3 に基づいて開発され、独自の Web サイト スタイルを形成するためによりパーソナライズされ、ほとんどの jQuery プラグインと互換性があります。
Bootstrap には、これらのコンポーネントに基づいて、美しく完全に機能する Web サイトを迅速に構築できます。
- 「はい」の場合、どのセットですか?もしそうなら、CSS フレームワークをどのように改善できるでしょうか?
- CSS Flexbox または Grid 仕様を使用したことがありますか?
http://www.w3cplus.com/css3/a-guide-to-flexbox.html
http://zh.learnlayout.com/flexbox.html
- もしそうなら、パフォーマンスと効率 それについてどう思いますか?
- レスポンシブ デザインとアダプティブ デザインはなぜ違うのですか?
アダプティブ レイアウト (Adaptive Layout)
アダプティブ レイアウト (Adaptive) は、異なる 異なる画面解像度に対してレイアウト を定義することを特徴としています。レイアウトを切り替えるとページ要素が変わりますが、各レイアウトではウィンドウサイズを調整してもページ要素は変わりません。つまり、表示されるページ内の要素の位置は変わりますが、サイズは変わりません
アダプティブ レイアウトは一連の静的レイアウトと考えることができます。
リキッドレイアウト
リキッドレイアウト（「流体」とも呼ばれます）の特徴
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
