前端知识点梳理（二）

1.内核

  1. 浏览器内核（Rendering Engine）最初分为：渲染引擎（layout engineer）或（Rendering Engine）和js引擎；后来 JS 引擎越来越独立，内核就倾向于单指渲染引擎。
  2. 浏览器=shell+内核
    Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。

发展历程：①Netscape王者（Gecko内核;开源）→ ②蝗虫IE(伴随操作系统，Trident) → ③烈士（网景）遗孤Mozilla （Gecko）→ ④苹果Safari （WebKit）→ ⑤后起之秀-谷歌Chrome（Bink/Chromium）→ ⑥1+1>2，双核时代 UC浏览器（WebKit+Trident）

为什么有些用户宁愿浏览器双开，也不愿意用国产的双核浏览器呢？

可能存在以下原因：
1.chrome的界面设计甩双核浏览器好几条街。
2.chrome功能上更加安全可靠，双核浏览器感觉会打折扣。
3.chrome有ie tab插件（插件会有Cookies丢失、假死现象），可以实现内核切换，没必要用双核。
4.用ie的场景不多了，网银和各大电商都已支持chrome了。
5.双核浏览器是一条死路，随着web标准的推广，ie内核也会越来越靠近标准。
6.国产双核浏览器的花里胡哨的自带插件各种弹窗广告和自作聪明的复杂设计、无用功能、过度吹嘘开始让人生厌。
7.极客、技术发烧友的使用习惯和普通网友有本质区别。
8.国产的外壳，商业目的远大于技术目的，第一目的是赚钱，而不是做一个好产品。

在这里插入图片描述
浏览器内核历史

2. !Doctype

!Doctype
浏览器模式
文档模式

2.1 严格模式和混杂模式

所谓的标准模式是指，浏览器按W3C标准解析执行代码；怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
1)当采用严格模式，任意浏览器效果相同；
2)当采用怪异模式，因浏览器而异；
3)采用哪种模式？取决于DTD声明

HTML 4.01：严格模式、过渡模式、框架模式

  1. 严格模式：不包括展示性的和弃用的元素（比如font），不允许框架集（Framesets）
  2. 过渡模式：只不允许框架集（Framesets）
  3. 框架模式：都ok

2.2 document.compatMode

document.compatMode，可以用来判断当前页面采用的渲染方式。下面官方文档的说明：

  • BackCompat：标准兼容模式关闭。
  • CSS1Compat：标准兼容模式开启。
  1. 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
  2. 当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。

2.3 用IE调试怪异模式

以上要用IE调，在chrome里我没有看到不同模式的差别
是否可以理解成：怪异模式在IE不同的文档模式中菜体现出区别？
是否可以理解成：怪异模式指的就是IE5？
深刻总结：
重要！
怪异模式（Quirks Mode）对 HTML 页面的影响
IE“浏览器模式”和“文档模式”的渲染测试
只有IE浏览器中才会有“浏览器模式”和“文档模式”
IE下页面样式错乱，其他浏览器正常

  1. 严格模式的div渲染大小不同（更大）：因为IE盒模型=内容+padding+border，当宽度设置为500，同时又有padding和border，那么内容的宽度便小于500；而严格模式下，按W3C标准盒模型，绘制出的div，内容宽度=500，再加上padding和border， 实际渲染大小 > IE5 ；
  2. 严格模式：图片底端3px空白(IE5的vertical-align是bottom 而严格模式是baseline) ；
  3. 严格模式：table中的font属性会继承于body的样式（斜体、颜色、加粗、字体都会）；而怪异模式下，只继承字体 ；
  4. 怪异模式下，行内元素（除了img，input，textarea，select，object）可以设置宽高！想象一下一个< span>标签内无内容，但可以设置宽高，像div一样显示出来；
  5. 百分比的高度必须在父元素有声明高度时使用
    这点在以上分享的文章里分明是睁眼说瞎话，我在IE5-11中调出了不同的效果：
  6. 怪异模式子元素溢出：父元素也跟随子元素调整高度

css：

        table.a {height: 300px;background-color: pink;}div.b {background-color: orange;width: 300px;height: 90%;display: block;}div.c {width: 200px;height: 200px;background-color: blue;}

html：

<body><table class="a"><tr><td><div class="b"><div class="c"></div></div></td></tr></table>
</body>

在这里插入图片描述

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

2.4 css hack

不同浏览器，或同一浏览器的不同版本，会导致生成的页面效果不一样。CSS hack的目的就是使你的CSS代码兼容不同的浏览器。

史上最全的CSS hack方式一览

hack 英[hæk]
v. 砍; 劈; 猛踢; 非法侵入(他人计算机系统);

3 网页相关

3.1 meta标签的属性

常用meta整理

三个维度：
1） SEO优化：name属性 - description / keywords
2） 移动设备：name属性 - viewport

name=“viewport” content=“initial-scale=1.0,maximum-scale=1.0 或者user-scalable=no”
用户将不能放大/缩小网页来看到全部的内容

3） 网页相关： charset、http-equiv - Content-Type属性

<meta charset='utf-8' /> （声明编码）
  • http-equiv
  • content
    content 属性始终要和 name 属性或 http-equiv 属性一起使用。
    在这里插入图片描述

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

3.2 响应式布局

（不同设备）
需要通过练习，改造项目代码来加深理解。
用CSS实现响应式布局
响应式布局

3.3 自适应布局

（某块固定，其余自适应）
自适应布局
（这个晚点看看）
这可能是史上最全的CSS自适应布局总结### 3.4 提高网页加载速度

3.4 字符编码方式

关于几种编码详解（Unicode，UTF-8，GB系列）

历史：
在这里插入图片描述

如何才能区别 Unicode 和 ASCII ？计算机怎么知道三个字节表示一个符号，而不是分别表示三个符号呢？ → UTF-8的出现（Unicode 是一个符号集，规定了符号的二进制代码，UTF-8规定了这个二进制代码应该如何存储。）
UTF-8 是 Unicode 的实现方式之一。

大神这篇必须要转：
字符编码笔记：ASCII，Unicode 和 UTF-8

3.5 页面性能优化

3.5.1 CDN托管（京东配送服务）

教你如何使用免费的CDN服务

当您访问托管在CDN上的网站时，网络将使用离您地理位置最近的服务器智能地向您提供内容。

在这里插入图片描述

3.5.2 利用多个域名来存储网站资源

利用多个域名来存储网站资源

3.5.3 图片懒加载

存储图片真实src，当距离↓，替换
图片懒加载实现及其原理

web前端页面性能优化（提升页面加载速度）

3.弃用元素

htm5新特性新增与弃用元素1
htm5新特性新增与弃用元素2

4.框架

4.1 iframe 行内（html5支持）

Web前端之iframe详解
关注使用iframe的缺点
优点:

  1. 程序调入静态页面比较方便;
  2. 页面和程序分离;

缺点：

  1. iframe有不好之处：样式/脚本需要额外链入，会增加请求。
    另外用js防盗链只防得了小偷，防不了大盗。
  2. iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你
    的网站即使做的在好,也排不到好的名次!
    如果是动态网页，用include还好点！
    但是必须要去除他的标签！
  3. 框架结构有时会让人感到迷惑，特别是在多个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经特别有限的页面空间外，还会分散访问者的留心力。访问者遇到这种站点往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么站点的其他部分也许更不值得阅读。
  4. 链接导航疑问。运用框架结构时，你必须保证正确配置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去。
  5. 调用外部页面,需要额外调用css,给页面带来额外的请求次数;

4.2 frameset框架集（多个框架frame）（html5废弃）

  1. frameset使用时要将body删除，使用frameset代替body；
  2. frame和frameset组合使用，且frame没有结束标签；
  3. frameset可以嵌套使用；
  4. html5废弃使用frameset、frame、noframes，他们的使用破坏了可使用性和可访问性；
    HTML框架（frameset框架集和iframe内嵌框架）

框架的优点

  • 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
  • 方便制作导航栏

框架的缺点

  • 会产生很多页面，不容易管理
  • 不容易打印
  • 浏览器的后退按钮无效
  • 代码复杂,无法被一些搜索引擎索引到
  • 多数小型的移动设备（PDA 手机）无法完全显示框架
  • 多框架的页面会增加服务器的http请求
    由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃

4.3 相关：window的onload事件

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数

window常见事件onload

网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式:
（1) 将脚本代码放在网页的底端，运行脚本代码的时候，可以确保要操作的对象已经加载完成。
（2）通过window.onload来执行脚本代码。

解释以上

5. table布局

5.1 table布局案例

  1. html中使用table元素
    html页面布局之table布局
    在这里插入图片描述
  2. display: table| table-cell | table-row
    配合 居中对齐
    text-align: center;
    vertical-align: middle;
    table布局指南

5.2 优缺点

Table布局的优缺点
table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

6. 了解渐进增强和优雅降级

出发点是针对高/低版本浏览器

6.1 渐进增强和优雅降级之间有什么不同

渐进增强和优雅降级之间有什么不同
在这里插入图片描述

6.2 前缀css3

当属性超过一个参数值的时候，不同的属性产生的作用是不一样的。

  1. 渲染为每个角都是30像素宽10像素高的圆弧：
-webkit-border-radius: 30px 10px;
  1. 左上和右下角为30像素圆弧，左下角和右上是10像素圆弧：
 border-radius: 30px 10px;

将无前缀的css写后面！
需警惕CSS3属性的书写顺序

表示xx浏览器的私有属性：

 1、-moz代表firefox浏览器私有属性2、-ms代表ie浏览器私有属性3、-webkit代表-webkit内核浏览器  常见浏览器有-safari、chrome

7. 微格式

什么是微格式？在前端构建中应该考虑微格式吗？


在这里插入图片描述

8. normalize.css 初始化样式

css样式初始化 normalize
normalize.css中文版

9. link和@import的区别

link和@import的区别

10.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251355.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类

微信小程序模仿开眼视频app（三）——信息卡片瀑布流和分类

《微信小程序模仿开眼视频app&#xff08;一&#xff09;——视频首页、视频详情、分类》 《微信小程序模仿开眼视频app&#xff08;二&#xff09;——搜索功能》 可到我的github账号上去copy文件 瀑布流部分 文件代码提示的挺详细的&#xff0c;这里主要点一下 社区与分类…
阅读更多...
javascript --- typeof方法和instanceof方法

javascript --- typeof方法和instanceof方法

ES5中: 原始类型包括:Number、String、Boolean、Null、Undefined 原始封装类型包括:Number、String、Boolean 引用类型包括:Array、Function、RegExp、Error、Date、Error 变量对象 原始类型的实例成为原始值,它直接保存在变量对象中. 引用类型的实例成为引用值,它作为一个指针…
阅读更多...
《JavaScript 高级程序设计》笔记 第1~5章

《JavaScript 高级程序设计》笔记 第1~5章

第1章 js是专为网页交互而设计的脚本语言&#xff0c;由3部分组成&#xff1a; ECMAScript&#xff0c;提供核心语言功能DOM文档对象模型&#xff0c;提供访问和操作网页内容的方法和接口BOM浏览器对象模型&#xff0c;提供与浏览器交互的方法和接口 js是一种脚本语言、解释…
阅读更多...
javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系

javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系

首先看下面一行代码: function Person(name){this.name name; } var person1 new Person; console.log(person1.__proto__ Person.prototype); console.log(person1.constructor Person);控制台打印如下: 可以看见,当使用构造函数(Person)构造一个实例(person1)时, 在后…
阅读更多...
前端知识点整理收集（不定时更新~）

前端知识点整理收集（不定时更新~）

知识点都是搜集各种大佬们的&#xff0c;如有冒犯&#xff0c;请告知&#xff01; 目录 原型链 New关键字的执行过程 ES6——class constructor方法 类的实例对象 不存在变量提升 super 关键字 ES6——...&#xff08;展开/收集&#xff09;运算符 面向对象的理解 关…
阅读更多...
重学《JavaScript 高级程序设计》笔记 第6章对象

重学《JavaScript 高级程序设计》笔记 第6章对象

第6章 面向对象的程序设计 ECMAScript中没有类的概念&#xff1b; 1.创建对象-历史 1.1 创建实例&#xff0c;添加方法和属性 → 对象字面量 缺点&#xff1a; 使用同一接口创建很多对象&#xff0c;产生大量重复代码 var person new Object() person.name "Y" pe…
阅读更多...
javascrip --- 构造函数的继承

javascrip --- 构造函数的继承

两点需要注意的. 第一是在构造函数声明时,会同时创建一个该构造函数的原型对象,而该原型对象是继承自Object的原型对象 // 声明一个构造函数Rectengle function Rectangle(length, width) {this.length length;this.width width; }// 即:看见function 后面函数名是大写,一般…
阅读更多...
javascript --- 使用语法糖class定义函数

javascript --- 使用语法糖class定义函数

本文讨论的是通过class声明的函数,有什么特点,或者说是指向了哪里. class A() {} // A是一个类// 要看class声明的函数指向哪里,只需将其[[Prototype]]属性打印到控制台,下面看看A和它的原型对象的指向 // 注:[[Prototype]]属性通过__proto__访问 console.log(A.__proto__…
阅读更多...
前端知识点整理收集（不定时更新~）二

前端知识点整理收集（不定时更新~）二

目录 require() 加载文件机制 线程和进程 线程 单线程 Nodejs的线程与进程 网络模型 初识 TCP 协议 三次握手 I/O I/O 先修知识 阻塞与非阻塞 I/O 同步与异步 I/O Git 基础命令 分支操作 修改远程仓库地址 远程分支获取最新的版本到本地 拉取远程仓库指定分支…
阅读更多...
SpringBoot零基础入门指南--搭建Springboot然后能够在浏览器返回数据

SpringBoot零基础入门指南--搭建Springboot然后能够在浏览器返回数据

File->new Project 修改默认包名&#xff0c;根据自己的喜好修改 选择初始化需要导入的包&#xff0c;尽量不要一开始就导入很多&#xff0c;特别是数据库&#xff0c;不然启动可能会有问题&#xff0c;创建好的目录如下&#xff1a; 配置文件写在application.properties下&…
阅读更多...
JavaScript算法相关

JavaScript算法相关

1. 排序 1.1.冒泡排序 每一轮比较&#xff0c;从左至右交换相邻&#xff0c;每轮结束&#xff0c;最后一个为最大下一轮&#xff0c;需要比较的个数 - 1 j < len - i (范围动态缩小)共 len - 1 轮比较 function bubbleSort(arr) {var len arr.length;for (var i 1; i &…
阅读更多...
数据结构基础知识

数据结构基础知识

排序 参考&#xff1a;https://www.bilibili.com/video/av38482633/?spm_id_fromtrigger_reload 目录 排序 插入排序 直接插入排序 折半排序 希尔排序 ​ 交换排序 冒泡排序 快速排序 选择排序 堆排序 流量单位计算 什么是计数排序 复杂度分析&#xff1a; 什…
阅读更多...
linux中安装软件，查看、卸载已安装软件方法

linux中安装软件，查看、卸载已安装软件方法

各种主流Linux发行版都采用了某种形式的包管理系统&#xff08;PMS&#xff09;来控制软件和库的安装。 软件包存储在服务器上&#xff0c;可以利用本地Linux系统上的PMS工具通过互联网访问。这些服务器称为仓库。 由于Linux发行版众多,目前还没有统一的PMS标准工具。 这里分别…
阅读更多...
html5 --- 使用javascript脚本控制媒体播放

html5 --- 使用javascript脚本控制媒体播放

H5中的标签(<audio…/> 和 <video…/>)对于JS中的HTMLAudioElement对象和HTMLVideoElement对象 对象有以下几个方法: play(): 播放 pause(): 暂停播放 load(): 重新装载音频、视频 canPlayType(type): 判断该元素可播放type类型的音频、视频 下面是一个简单的音乐…
阅读更多...
css3 --- 使用媒体查询进行响应式布局

css3 --- 使用媒体查询进行响应式布局

css3引入media,可以根据设备特性进行不同的布局, 本文展示的是根据不同屏幕的宽度进行不同的布局,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title> 针…
阅读更多...
node项目正常启动后不能访问（防火墙未放行端口）

node项目正常启动后不能访问（防火墙未放行端口）

今天打开个人站点&#xff0c;发现登陆不了&#xff0c;原以为是pm2的问题&#xff0c;先停了pm2用node app.js的方式运行后端代码&#xff0c;项目能正常启动但是依然不能登陆。 1 检查ecs的安全组规则&#xff0c;node项目端口3000、8888是否放行 2 确认node正常运行 输入…
阅读更多...
图片地址引用

图片地址引用

阅读更多...
前端知识点整理（三）不定时更新~

前端知识点整理（三）不定时更新~

目录 一、移动端跨平台开发方案 Hybrid App React Native Weex Flutter PWA &#xff08;Progressive Web App&#xff09; 小程序 Cordova html5 组件和模块的区别 组件化 模块化 前端代码规范 前端工程化理解 网站性能监测与优化策略 1.网络传输性能优化 页…
阅读更多...
前端试题(一)

前端试题(一)

2020-03-28 金卡智能 *1. 脚手架 vue-cli现在用的什么版本&#xff0c;2版本了解多少&#xff0c;2 3有什么区别 绝对路径与相对路径 ./ 当前路径 …/父路径 / 绝对路径 某文件里引用其他路径下的资源&#xff1a; 判断该文件所在文件夹与其他资源路径间的关系。 什么&#…
阅读更多...
html5 --- 利用localStorage进行本地存储

html5 --- 利用localStorage进行本地存储

首先做一个提交到本地存储的表单及一个用来显示本地localStorage信息的表格…代码如下: <h2> 本地存储用 </h2>标题: <input id"title" name"title" type"text" size"60" style"margin-left:32px;margin-bottom:…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023