前端综合笔记（4）

最新推荐文章于 2025-05-09 22:33:29 发布

原创最新推荐文章于 2025-05-09 22:33:29 发布 · 305 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端学习笔记专栏收录该内容

7 篇文章

订阅专栏

1.SEO

1.设置合理TDK
title指title标签，description指name为description的meta标签，keywords指name为keywords的meta标签。
title强调重点，重要关键词不超过两个。
description是对内容的高度概括。
keywords列出重要关键词即可。
2.用语义化代码
3.重要内容不用js，因为无法识别
4.非装饰性图片要加alt

2.网页的性能优化

1.浏览器渲染
减少重排（分批虚拟滚动、以及脱离文档）

2.优化网络

合理的设置http缓存（强缓存和协商缓存）。
合并js、css，进行文件压缩
合并http请求
使用cdn
使用预加载（link标签中rel=“preload”）
使用图片优化（雪碧图，压缩图，剪裁图，懒加载（先用站位图代替后加载））

3.SEO

4.js

异步加载js，script标签位置合理
减少闭包
尽量使用局部变量保存全局变量

5.webpack

页面js单独打包按需加载

3.iframe

一句话概括，iframe用于嵌套文档。
缺点：
1.会产生很多页面，不容易管理。
2.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
3.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
4.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

4.get与post在缓存上的区别

post这种方法是行为性方法，不应当缓存。
一句话，get可以缓存，post不能缓存。
get是向服务器查询数据，因此可以使用缓存。post一般触发对数据库的修改，所以不能缓存。
导致了get方法回退页面不用提交，post需要重新提交。

5.js动画和css动画区别

1.js用主线程进行，css使用与requestAnimationFrame类似的机制，固定频率，节省资源
2.css的代码简单但是冗长，而且无法加入回调函数，js的代码复杂，但是可以通过回调进行对动画方便的控制

6.边距折叠

1.条件：

同一个bfc下的垂直相邻元素
父元素和第一个／最后一个子元素之间

2.结果：
正值取大，负值取小，正负取和

7.doctype作用（严格、混杂、标准、兼容）

DOCTYPE是用来声明文档类型和DTD规范的。
严格模式就是标准模式，混杂模式就是兼容模式。

<!DOCTYPE html>标准模式的排版和 JS 运作模式都是以该浏览器支持的最高标准运行。

DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

8.强缓存和协商缓存

Expires
Expires是HTTP/1.0控制网页缓存的字段，其值为缓存过期时间，如果客户端的时间小于Expires的值时，直接使用缓存结果。到了HTTP/1.1，Expire已经被Cache-Control替代，防止一方的时间出现不准的情况。
Cache-Control
存的是一个相对浏览器的时间，与expires同时出现时优先使用cache-control。
max-age:存在的相对时间
public和private:一个代表只能由发送请求的浏览器才能缓存，一个代表此外代理服务器也可以缓存
no-cache：可以在本地进行缓存，但是每次发送请求的时候都需要进行验证，如果服务器允许，才可以进行本地缓存，服务器允许才能在本地缓存。
no-store：本地和代理服务器都不能进行缓存存储，每次都要重新请求，拿到内容，完全不让缓存。
Last-Modified
服务器上一次修改数据的时间，服务器比对Last-Modified和If-Modified-Since，返回304或者新响应页面。
缺陷在于时间戳改动但内容不一定改动。
ETag
比对E-tag和If-None-Match。返回的是数据的hash值，如果数据没变那么hash值也没变，原理和Last-Modified差不多，他好就好在是根据文件改动来进行区别的，所以不会存在时间戳改动但文件没改动的问题。

9.class->function

setTimeout的this默认都是window

// es5 中的构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.toString = function () {
    return '(' + this.name + ',' + this.age + ')';
}
var p = new Person('xiaoMing', 18);


// es6 通过class实现
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    toString() {
        return '(' + this.name + ',' + this.age + ')';
    }
}
var p = new Person('xiaoMing', 18);

10.JSONP

// 手写jsonp
function myCallback(data) {
    console.log(data)
}
 
function jsonp(url, data, callback) {
    // data是否是字符串，是的话证明data值就是函数名
    if (typeof data == 'string') {
        callback = data
        data = {}
    }
    // 拼接data
    url += url.indexOf('?') === -1 ? '?' : '&'
    url += 'callback=' + callback
    var params = ""
    for (var i in data) {
        params += '&' + i + '=' + data[i]
    }
    url += params
    // 在页面插入script标签
    var script = document.createElement('script')
    script.setAttribute('src', url)
    document.querySelector('head').appendChild(script)
 
}
 
jsonp('http://baidu.com/index.html', { id: 34 }, 'myCallback')
jsonp('http://baidu.com/index.html?name="zjn"', { id: 34 }, 'myCallback')

jquery

 $.ajax({
    type: "get",
    async: false,
    url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
    dataType: "jsonp",
    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
    jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
    success: function(json){
        alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
    },
    error: function(){
        alert('fail');
    }
});

11.和服务器后端通信方法

ajax
websocket
SSE
服务器端渲染

12.MVC与MVVM

什么是 mvvm？

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

mvvm 和 mvc 区别？

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。需要操作dom主动更新。

mvc的原理就是通过url找到对应控制器调用相关模型进行数据操作。

13.js中的对象==比较结果

对象的比较关注的是引用，如果比较值使用JSON.stringfy()

14.js拆箱与装箱

总结：把基本数据类型转换为对应的引用类型的操作称为装箱，把引用类型转换为基本的数据类型称为拆箱（通过引用类型的valueOf()或者toString()方法来实现的）。
像string类型的变量应该是没有length属性的，但你调用的话还是可以用的，这是因为你用的时候他进行了装箱，隐式创建了一个对象，使用完之后又销毁了。

15.常见前端构建工具

npm script , grunt, gulp, fis3, webpack, rollup

16.js面对对象解释

解释面对对象就是解释创建对象

//1.工厂模式
//内部创建空对象，给空对象赋值，返回这个对象
//缺点无法识别对象的类型
    function Person(name, age) {
        var p = {};//创建一个对象
        p.name = name;
        p.age = age;
        p.say = function() {
            console.log("hello "+this.name);
        }
        return p;//返回这个对象
    }
    
//2.构造函数模式
//不显式创建空对象
//内部创建空对象，将构造函数作用域赋值给空对象，赋值，返回对象
//缺点，所有内部函数都要重新创造，可以将函数外部调用解决
function Person(name, age) {
        this.name = name;
        this.age = age;
        this.say = function() {
            console.log("hello "+this.name);
        }
    }
    
//3.原型模式
//在原型对象上设置属性方法，使用时直接添加到实例
//缺点，所有实例共用资源
function Person(){
	Person.prototype.name="zl"
}

//4.混合模式
//私有资源用this创建，共用方法或属性外部用prototype

17.迭代方法

前三个参数是item index arr

18.移动端适配以及响应式布局

<meta name="viewport" content="width=device-width, initial-scale=1">
//通过媒体查询得到屏幕宽度，将布局视口的宽度设置为屏幕宽度
//一般布局视口宽度大于屏幕宽度，为了更好的显示网页，将布局视口的宽度调整等于屏幕宽度
//初始尺寸为1是为了适应横屏竖屏造成的兼容性问题

1.百分比式布局
2.对于不同分辨率设置不同rem，然后使用rem布局
3.媒体查询

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

4.vw、vh
5.flex

19.vue2.x和vue3.0的区别

1.更快

函数里的值附加Component Fast path，更容易被JS引擎进行优化，

2.数据监听

vue2.x大家都知道使用的是es5的object.defineproperties中getter和setter实现的，而vue3.0的版本，是基于Proxy进行监听的，其实基于proxy监听就是所谓的lazy by default，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。

3.更小

vue2.x中new出的实力对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等。

20.防抖节流

防抖：

function fd(handler,delay){
	delay=delay||300;//固定间隔
	var timer=null;//初始化timer
	return function(){
		var self=this;//
		var args=[].slice.call(arguments);
		clearTimeout(timer);
		timer=setTimeout(function(){
			handler.call(self,args);
		},delay)
	}
}
//原理setimeout防抖

节流：

function jl(handler, delay){
  delay = delay || 300;
  var lastTime = 0;
  return function(){
    var _self = this；
    var args=[].slice.call(arguments);
    var nowTime = new Date().getTime();
    if((nowTime - lastTime) > delay){
      handler.apply(_self, args);
      lastTime = nowTime;
    }
  }
}
//节流，lasttime节流