zoukankan      html  css  js  c++  java
  • 前端面试题分享

    1、什么是语义化、语义化的好处是什么。

    语义化就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

    • 好处
    • 易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
    • 有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
    • 方便其他设备解析,如盲人阅读器根据语义渲染网页
    • 有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

    2、为什么最好把 CSS 的<link>标签放在<head></head>之间?为什么最好把 JS 的<script>标签恰好放在</body>之前,有例外情况吗?

    <link>放在<head>

    <link>标签放在<head></head>之间是规范要求的内容。此外,这种做法可以让页面逐步呈现,提高了用户体验。将样式表放在文档底部附近,会使许多浏览器不能逐步呈现页面。一些浏览器会阻止渲染,以避免在页面样式发生变化时,重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

    <script>标签恰好放在</body>之前

    脚本在下载和执行期间会阻止 HTML 解析。把<script>标签放在底部,保证 HTML 首先完成解析,将页面尽早呈现给用户。

    例外情况是当你的脚本里包含document.write()时。但是现在,document.write()不推荐使用。同时,将<script>标签放在底部,意味着浏览器不能开始下载脚本,直到整个文档(document)被解析。也许,对此比较好的做法是,<script>使用defer属性,放在<head>中。

    3、什么是渐进式渲染

    渐进式渲染是用于提高网页性能(尤其是提高用户感知的加载速度),以尽快呈现页面的技术。

    在以前互联网带宽较小的时期,这种技术更为普遍。如今,移动终端的盛行,因为移动网络往往不稳定,渐进式渲染在现代前端开发中仍然有用武之地。

    举个栗子:

    • 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时,JavaScript 将加载并显示图像。
    • 确定显示内容的优先级(分层次渲染)——为了尽快将页面呈现给用户,页面只包含基本的最少量的 CSS、脚本和内容,然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
    • 异步加载 HTML 片段——当页面通过后台渲染时,把 HTML 拆分,通过异步请求,分块发送给浏览器。

    4、href和src区别

    • href

    href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系
    若在文档中添加href ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式。

    • src

    src表示引用资源,替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。
    当浏览器解析到src ,会暂停其他资源的下载和处理(图片不会暂停其他资源下载),直到将该资源加载、编译、执行完毕,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

    5、doctype有什么用

    doctype是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档。

    声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。 声明必须是HTML文档的第一行,位于html标签之前。

    浏览器本身分为两种模式,一种是标准模式,一种是怪异模式,浏览器通过doctype来区分这两种模式,doctype在html中的作用就是触发浏览器的标准模式,如果html中省略了doctype,浏览器就会进入到Quirks模式的怪异状态,在这种模式下,有些样式会和标准模式存在差异,而html标准和dom标准值规定了标准模式下的行为,没有对怪异模式做出规定,因此不同浏览器在怪异模式下的处理也是不同的,所以一定要在html开头使用doctype。

    6、按回车,浏览器刷新按钮,F5,Ctrl+F5的区别?

    1. 按回车:说明请求没有真正地提交到http服务器,被浏览器发现缓存中还有未过期的文件,直接把请求拦截了

    2. 按浏览器的刷新按钮,以及F5:说明浏览器再问一下服务器,请求的URL的内容有没有被修改过,如果没有修改,就返回304 not modified,浏览器收到后,依然从缓存中读取;如果被修改了,返回200 ok,并返回新的内容
    3. 按ctrl+f5:说明不要缓存中的文件了,强制刷新,直接到服务器上重新下载

    7、doctype有什么用

    doctype是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档。

    声明是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。 声明必须是HTML文档的第一行,位于html标签之前。

    浏览器本身分为两种模式,一种是标准模式,一种是怪异模式,浏览器通过doctype来区分这两种模式,doctype在html中的作用就是触发浏览器的标准模式,如果html中省略了doctype,浏览器就会进入到Quirks模式的怪异状态,在这种模式下,有些样式会和标准模式存在差异,而html标准和dom标准值规定了标准模式下的行为,没有对怪异模式做出规定,因此不同浏览器在怪异模式下的处理也是不同的,所以一定要在html开头使用doctype。

  • 相关阅读:
    django学习笔记1
    排序多重排序
    06计算列
    填充日期序列
    行,列单元格
    读取excel文件
    监控文本
    天干地支纪年法
    Mysql基础
    JDBC基础
  • 原文地址:https://www.cnblogs.com/goodboyzjm/p/11813778.html
Copyright © 2011-2022 走看看