中级前端工程师可能不知道的知识点

春阳8866
88 阅读7分钟

JavaScript

  1. JavaScript引擎等待宿主环境分配宏观任务，而在宏观任务中有包含了一个微观任务队列
  2. setTimeout()是浏览器API，它产生宏任务,Promise是JavaScript内部的微任务，所以promise先于setTimeout
  3. 函数调用时使用的引用，决定了函数执行时刻的this值。
  4. 箭头函数会继承外层函数调用的this绑定
  5. var/let等预处理会在当前作用域做申明，但是不会赋值
  6. 而function不同，在全局和var相似，不同的是不仅申明函数，还会赋值；而在if等语句中，只会申明而不会被提前赋值

HTML

  1. em还有重音的含义
  2. hgroup表示标题组，这样就不会产生上下层级
  3. 一个body中一般包含头部header，边栏aside，主体内容节（一个或者多个）section，footer尾部
<body>
    <header>
        <nav>
            ……
        </nav>
    </header>
    <aside>
        <nav>
            ……
        </nav>
    </aside>
    <section>……</section>
    <section>……</section>
    <section>……</section>
    <footer>
        <address>……</address>
    </footer>
</body>
  1. 而article是一种特别的结构，表示具有独立性质的文章。所以article和body具有相似的结构
<body>
    <header>……</header>
    <article>
        <header>……</header>
        <section>……</section>
        <section>……</section>
        <section>……</section>
        <footer>……</footer>
    </article>
    <article>
        ……
    </article>
    <article>
        ……
    </article>
    <footer>
        <address></address>
    </footer>
</body>
  1. header和footer一般是放在article或body的直接子元素，footer也可以和aside,nav,section相关联
  2. aside表示和文章主体不那么相关的部分，可能包含导航，广告等工具性质的内容
  3. aside/header中都可能出现导航nav
  4. abbr表示缩写
<abbr title="World Wide Web">WWW</abbr>.
  1. hr表示故事走向的转变或者话题的转变，所以需要看语言来使用
  2. 有三个跟引述相关的标签 blockquote表示段落级引述，q表示行内的引述内容，cite表示引述的作品名
  3. 对于时间应该加上time标签，方便机器阅读
  4. figure用于表示与著文章相关的图像、照片等流内容
<figure>
 <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
 <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
</figure>
  1. 对于定义应该使用dfn
The <dfn>Internet</dfn> is a global system of interconnected computer networks.
  1. ol/ul/li
<nav>
  <h2>Contents</h2>
  <ol>
    <li><a href="...">History</a></li>
    <li><a href="...">Function</a>
      <ol>
        <li><a href="...">Linking</a></li>
        <li><a href="...">Dynamic updates of web pages</a></li>
        ...
      </ol>
    </li>
    ...
  </ol>
</nav>
  1. pre表示预先排版过的，不需要进行排版
  2. samp标签表示一段用户应该对其没有什么其他解释的文本字符

html和CSS

带@的规则

  1. @charset用于提示css文件使用的字符编码方式，必须出现在最前面
  2. @import用于引入一个css文件
@import "mystyle.css";
@import url("mystyle.css");
  1. @media，能对设备的类型进行一些判断
  2. @page，用于分页媒体访问网页时的表现设置
  3. @counter-style，用于定义列表项的表现
@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}
  1. @key-frames，定义动画关键帧
@keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  to {
    left: 100px;
    top: 100px;
  }

}
  1. @fontface，用于定义一种字体，iconfont即使就是利用这个特性实现的
  2. @support 与media类似
  3. @namespace，表示内部的css选择器都带上特定命名空间
  4. @viewport，多数时候被meta兼容

css 支持的计算型函数

  1. calc()
  2. max()/min()
  3. clamp()则是给一个值限定一个范围，超出范围外则使用范围的最大或者最小值
  4. toggle() 在规则选择中多余一个元素时生效，它会在几个元素之间切换
  5. attr() 允许CSS接受属性值的控制

head原信息

  1. 原信息head中的tittle可能会被用在浏览器收藏夹、微信推送卡片、微博各种场景
  2. base标签给页面上所有的URL相对地址提供一个基础，最多只有一个，会改变全局的地址链接，所以开发中建议通过JavaScript代替
  3. meta charset最前面指定编码格式
  4. meta viewport，可以指定宽高，初始化缩放比例，最小缩放比例，最大缩放比例，是否允许用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

选择器

  1. :root匹配根元素，html中即是html
  2. :empty匹配没有子节点的元素，子节点为空白文本节点除外
  3. ::first-line，第一行；::first-letter第一个字母

超链接

  1. icon型link，表示页面的icon，在没有时浏览器会去根目录下的favicon.ico。
  2. 预处理类link，导航到一个网站需要经过DNS查询域名、建立连接、传输数据、加载进内存和渲染一系列的操作
    1. dns-prefetch 提前做域名查询，这样的link里面的href实际只有域名有意义
    2. preconnect提前建立tcp连接
    3. prefetch提前取指定url内容
    4. preload提前加载href指定URL
    5. prerender提前渲染
  3. modulepreload型的link，预加载js模块（放入内存，不会执行）
  4. stylesheet型link
<link rel="stylesheet" href="xxx.css" type="text/css">
  • 如果加上alternate,成为rel="alternate stylesheet",此时必须加上title，此时变为了用于切换的变种样式
  1. area不是文本型的链接，而是区域型(圆形circle,矩形rect,多边形poly)的链接
// 这个例子展示了在一张图片上画热区并产生链接。
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  1. img
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
  1. picture 相比img更好
<picture>
  <source srcset="image-wide.png" media="(min-width: 600px)">
  <img src="image-narrow.png">
</picture>
  1. iframe 这个标签可以嵌入一个完整的网页，但是因为安全问题和显示问题而不推荐使用

颜色

  1. 颜色的分类方法
    • RGB(红绿蓝)
    • RGBA(红绿蓝透明度)
    • CMYK(颜料的颜色，品红、黄、青、黑)
    • HSL(色相、纯度/饱和度、明度/亮度)
  2. 线性渐变
linear-gradient(direction, color-stop1, color-stop2, ...);
  1. 放射性渐变
radial-gradient(shape size at position, start-color, ..., last-color);

浏览器工作原理

浏览器工作过程

  1. 使用http或https向服务端请求页面
  2. 把请求回来的html代码经过解析，构建成dom树
  3. 计算DOM树上的CSS属性
  4. 根据CSS属性对元素逐个进行渲染，得到内存中的位图
  5. 一个可选的步骤是对位图进行合成，这会极大的增加后续绘制的速度
  6. 合成之后，再绘制到界面上

性能优化

  1. 目前主流浏览器会根据position、transform等属性来决定合成策略，来猜测这些元素未来可能发生变化。但是准确性有限，目前新的css标准中规定了will-change属性，可以由业务代码来提示浏览器合成策略，运用这个特性可以大大提升合成策略效果
  2. 渲染就是把每一个元素的盒变成位图，这里的位图就是在内存中建立一张二维表格，把一张图片的每个像素对应的颜色保存进入（位图信息也是DOM树中占据内存最多的信息，做内存优化时，主要考虑这一部分）
  3. 合成就是为一些元素创建一个合成后的位图，是一个性能考量，不是必须的
  4. 绘制是把位图绘制到屏幕上的过程，一般是浏览器把位图交给操作系统来做
  5. 重排是指通过通过css来排版(正常流排版、flex排版等)，重绘是指重新绘制（发生的频率比想象的高，鼠标滑过显示区域，每一次移动都会造成重新绘制

DOM

  1. 节点：dom的树形结构所有的节点有统一的接口Node
  2. 表示DOM关系
    • parentNode
    • childNodes
    • firstChild
    • lastChild
    • nextSibling
    • previousSibling
  3. 操作DOM
    • appendChild
    • insertBefore
    • removeChild
    • replaceChild
  4. CSSOM来创建样式表
document.styleSheets[0].insertRule("p { color:pink; }", 0)
document.styleSheets[0].removeRule(0)
  1. CSSOM的一个重要方法，可以用来获取一个元素最终经过css计算得到的属性
window.getComputedStyle(elt, pseudoElt);
  1. CSSOM View可以视为DOM API的扩展
    • 窗口api，用于操作窗口的位置、尺寸
    moveTo(x,y)//移动窗口到屏幕特定位置
resizeTo(x,y)//改变窗口大小到特定尺寸
window.open("about:blank", "_blank" ,"width=100,height=100,left=100,right=100" )
    • 视口滚动API（可视区域），是页面顶层容器的滚动
    scrollX//表示x方向上的当前滚动距离
scrollY//表示y方向上的当前滚动距离
scroll(x,y)//表示滚动到特定区域
scrollBy(x,y)//表示滚动特定距离
    • 元素滚动API
    scrollTop/scrollLeft/scrollWidth/scrollHeight 元素的属性
scroll(x,y)//使得元素滚动到特定的位置
  2. 布局API

唠叨

  • 不了解某个知识点记得多问度娘哦
  • 如果本文对你有点作用，您的点赞、评论、关注是对我最大的鼓励 O(∩_∩)O
avatar
文章
阅读
粉丝