全部文章

H5新特性有哪些？

H5拥有6种新特性 1. 语义化标签，例如header，footer，section，article等 语义化标签的作用：提升页面的阅读性(结构性增强)，更有利于SEO，对于使用屏幕阅读器的人来说会更友好(有明显的语气差别，例如strong标签内的内容会重读)； 2. 新增媒体元素，audio、video audio和video标签能够很容易的输出音频或视频流，提供便利的获取文件信息的API 更多详细属性参考 3.用于绘画的canvas...

什么是响应式设计？响应式设计的基本原理是什么？如何做？

简介 我这么理解：响应式布局就是一个网站能够兼容多个设备，可以根据屏幕的大小自动调整页面的展示方式以及布局，我们不用为每一个设备做一个特定的版本。响应式网站的特点： 同时适配PC+平板+手机等 网站的布局会根据视口来调整模块的大小和高度 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理来设置差异化的css样式 一、是什么？ 响应式网站设计（Responsive Web Design）是一种网络页面设计布局，页面的设计与开发...

关于offsetTop的理解

1\. offsetTop ：元素到offsetParent顶部的距离 2\. offsetParent ：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。 3\. 注意：只有元素show（渲染完成）才会计算...

浅析图片懒加载(三种实现方法与两种优化方式)

写在前面 上一篇文章介绍了 ，那么今天我们就来康康图片懒加载(中间会涉及到 的优化问题) 你将了解到 的实现的三种方法(整体位置比较和视图位置比较和 ) 和优化的两种方式( 和 ) 写得不对的地方，希望大家能够批评指正！ 在不使用图片懒加载的情况下,我们打开开发者工具康康 这里 给 是为了让图片变成块元素，这样图片会自己换行，这样更方便后面进行懒加载的操作 注意勾选 ，和 ，这样效果更加明显 <img width="962" heigh...

7层模型和TCPIP 4层模型

OSI: open system interconnection 开放式系统互联参考模型 OSI 和TCP/IP 的对应关系和协议 <img width="690" height="443" src="../../ resources/v2 2d62ba265be486cb94ab531912aa3 b40e64af5b064d7d8.webp"/ OSI模型各层的基本作用 <img width="690" height="409" s...

函数柯里化

定义 维基百科中对柯里化 (Currying) 的定义为： In mathematics and computer science, currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence...

前端工程化

前端性能优化(21种优化+7种定位方式)

<img width="734" height="464" src="../../ resources/1620 839791642d9443e98cdb53441e7b4acc.png"/ 1.重要性： 关注前端可以很好地提高性能。如果我们可以将后端响应时间缩短一半，整体响应时间只能减少5% 10%。而如果关注前端性能，同样是将其响应时间减少一半，则整体响应时间可以减少40% 45%。 改进前端通常只需要较少的时间和资源，减少后端延迟...

基于 Next.js 的 SSR和SSG 方案了解一下

Next.js 支持： 在服务端预渲染 静态页面生成和服务端渲染 有数据和无数据的静态生成 一些预定义的方法（生命周期函数）注入数据 6.1 预渲染 默认情况下，Next.js 预渲染每个页面。这意味着 Next.js 会提前为每个页面生成 HTML，预渲染可以带来更好的性能和SEO。 每个生成的 HTML 都与该页面 所需的最少 JavaScript 代码相关联。当浏览器加载页面时，其 JavaScript 代码会运行并使页面完全交互...