![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习笔记
文章平均质量分 92
实战中学习,学习中巩固
Lewalker59
这个作者很懒,什么都没留下…
展开
-
关于 CSS 编码规范的思考
一、前言先说明这是一篇规范类文章,主要是在日常的前端工作中遇到的一些问题做个总结。由于本人前后在多个公司经历过项目的开发,对这几家公司的编码规范都有一定的了解,然而近日在公司进行项目开发的过程中发现关于 CSS 编码规范上的一些问题,借此文记录一下。(持续补充。。。)问题描述一个项目在一般情况下是由多人协同完成的,常常会因为个人的编码习惯导致项目代码写法参差不齐,主要反映出以下几个问题:在阅读 CSS 代码的过程中,由于 CSS 属性较多,如果遇到一个选择器中有大量的 CSS 属性的情况下,阅读起原创 2021-08-14 16:36:07 · 200 阅读 · 0 评论 -
前端常用环境以及常用工具汇总
本文是根据个人平时工作习惯进行的汇总一、环境搭建1. Node.js介绍: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。安装方式: http://nodejs.cn/download/2. NPM介绍: NPM是随同NodeJS一起安装的包管理工具。安装方式: 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。建议: 由于国外镜像源下载资源速度较慢,建议更改淘宝镜像源或者安装cnpm。// 更改npm镜像源npm conf.原创 2021-06-25 17:27:12 · 1032 阅读 · 0 评论 -
仿bilibili项目技术总结
仿bilibili项目技术总结1. 搜索功能的实现搜索框实现了防抖功能。输入过程中对suggest词进行高亮显示功能。2. 视频列表相关功能通过vue-lazyload模块实现视频列表封面的懒加载。二次封装了better-scroll组件,实现了视频列表的滚动加载功能,主要实现方式是通过监听滚动长度和列表当前长度的差距,当监听到差值为0时,发送请求并将获取到的视频列表追加到当前列表。3. 关于页面中需要请求多个api问题在一个场景中,需要页面请求多个接口,并且按顺序返回得到相应数据,原创 2020-09-20 15:29:30 · 1108 阅读 · 0 评论 -
纯js实现上传按钮并显示缩略图小轮子
前言造这个小轮子的起因是因为默认提供的上传文件的按钮属实丑陋了点,而且还不能直接修改这个按钮的样式,所以就打算直接搞个小轮子方便日后需要时使用。使用原生js实现。那么直接上效果图。预览效果图如下代码实现html代码<html> <head> <meta charset="utf-8" /> <title>uploalFileBu...原创 2020-05-02 17:43:57 · 216 阅读 · 0 评论 -
在HTML中JavaScript以及async和defer的使用
本文是阅读红宝书后对知识进行的总结和梳理一.<script>元素<script>标签定义了6个属性,分别有async,defer,charset,src,language,type。讲到script标签,不得不提async和defer这两个属性,所以对这两个属性划重点。1. async红宝书中定义:表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其...原创 2020-04-15 18:39:45 · 234 阅读 · 0 评论 -
基于jq实现图片预加载功能
一、什么是预加载?预加载是一种web性能优化技术,在页面加载之前,对部分资源进行提前加载,以提供给用户更好的体验,提高用户在浏览资源过程的流畅感。二、预加载的实现本次实验依赖jq实现首先看一下预加载实现的效果提前对页面中未显示的图片资源进行加载,当用户在浏览到相应的图片资源时直接从浏览器缓存中渲染在页面上。首先,我们使用立即执行函数,以闭包的方式,实现局部变量,避免内部变量与外部...原创 2020-03-31 00:58:46 · 555 阅读 · 0 评论 -
前端错误监控分类及方式
前端错误的分类即时运行错误:代码错误资源加载错误(包括图片、js、css加载失败)错误的捕获方式即时运行错误的捕获方式try…catchwindow.onerror(属于DOM 0,还可以使用addEventListener())资源加载错误Object.onerrorperformance.getEntries()Error事件捕获<script ...原创 2020-02-25 00:34:59 · 270 阅读 · 0 评论 -
页面性能(异步加载和缓存)
提升页面性能的方法有哪些?资源压缩合并,减少HTTP请求非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别利用浏览器缓存 --> 缓存的分类 --> 缓存的原理(性能优化重要的一部分)使用CDN预解析DNS从浏览器输入URL开始到页面渲染完成,这个过程发生了哪些环节,其中第一步就是DNS解析,尤其是当出现多个域名的时候,DNS解析效果明显&...原创 2020-02-24 20:17:44 · 294 阅读 · 0 评论 -
JS运行机制(异步和单线程)
JS的单线程的概念JS是单线程的编程语言,也就是说同一时间只能做一件事,这样能提高效率;任务队列:同步任务(console.log())、异步任务(setTimeout())挂起,优先处理同步任务,再去响应异步任务;案例例1:console.log(1);setTimeout(function(){ console.log(2);},0);//挂起console.log(3)...原创 2020-02-24 11:39:06 · 151 阅读 · 0 评论 -
前端面试知识点--安全类(CSRF和XSS)
CSRF基本概念和缩写通常称为跨站请求伪造,英文名Cross-site request forgery 缩写CSRF攻击原理防御措施Token验证Referer验证隐藏令牌XSS基本概念和缩写通常称为跨域脚本攻击,英文名Cross-site scripting...原创 2020-02-24 00:22:55 · 386 阅读 · 0 评论 -
页面渲染机制(重排Reflow和重绘Repaint)
什么是DOCTYPE及作用?DTD(Document Type Definition):文档类型定义。是一系列的语法规则,用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型,决定使用何种协议来解析,以及切换浏览器模式。DOCTYPE:用来声明DTD规范。一个主要的用途便是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出现一些差错。常见的DOCTYPE声...原创 2020-02-23 21:10:43 · 319 阅读 · 0 评论 -
前端面试知识点--通信类(跨域通信方式)
什么是同源策略及限制?同源策略限制从一个源加载的文档或脚本如何与另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。Cookie、LocalStorage和IndexDB无法读取DOM无法获得AJAX请求不能发送前后端如何通信?Ajax(受同源策略限制)WebSocket(不受同源策略限制)CORS(支持跨域和同源通信)如何创建Ajax?XMLH...原创 2020-02-23 11:29:42 · 130 阅读 · 0 评论 -
前端面试知识点--面向对象
类与实例类的声明生成实例/*** 类的声明 */var Animal = function () { this.name = 'Animal';};/** * es6中class的声明 */class Animal2 { constructor () { this.name = 'Animal2'; }}/** * 实例化 ...原创 2020-02-22 20:09:19 · 288 阅读 · 0 评论 -
前端面试知识点--原型链
创建对象有几种方法var o1 = {name:'o1'};var o11 = new Object({name:'o11'});var M = function(){this.name='o2'};var o2 = new M();var P = {name:'o3'};var o3 = Object.create(P);原型、构造函数、实例、原型链只有函数才有proto...原创 2020-02-20 21:28:53 · 145 阅读 · 0 评论 -
前端面试知识点--HTTP协议
基本概念超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。HTTP是一个客户端终端(用户)和服务器端(网站)请求和应答的标准(TCP)。特点:简单快速:客户向服务器请求服务时,只需传送请求方法和路径。灵活:HTTP允许传输任意类型的数据对象。无连接:...原创 2020-02-18 21:23:08 · 269 阅读 · 0 评论 -
前端面试知识点--DOM事件
基本概念:DOM事件的级别DOM0 element.οnclick=function(){}DOM2 element.addEventListener(‘click’,function(){},false)DOM3 element.addEventListener(‘keyup’,function(){},false)DOM2级 与 DOM0级相比1、可以绑定多个监听函数,而DOM0级...原创 2020-02-17 23:56:09 · 185 阅读 · 0 评论 -
前端面试知识点--CSS盒模型
1. 基本概念完整定义DOCTYPE会触发标准模式,如果DOCTYPE缺失则在ie6/ie7/ie8下将会触发怪异模式。(W3C)标准模型一个块的宽度 = width(content宽度)+padding(内边距)+border(边框)+margin(外边距);(怪异)IE模型一个块的宽度 = width(content宽度+内边距+边框)+margin(外边距) (即怪异模式下,...原创 2020-02-16 21:20:22 · 1400 阅读 · 2 评论 -
面试知识点--页面布局(前端)
页面布局案例:请根据题目给出多个中间自适应解决方案浮动布局脱离文档流,清除浮动(局限性)兼容性好(优点)绝对定位布局快捷(好处)可使用性差flew弹性布局解决以上两个布局的缺陷table表格布局兼容性好grid网格布局各自优缺点加上高度后哪个方案不适用最优选择方案...原创 2020-02-14 16:45:18 · 349 阅读 · 1 评论 -
面试准备--技术栈准备(前端)
jquery源码(博客或文章大致看懂能说能答)核心架构是什么,事件委托是怎么做,插件机制是什么兼容性vue.js源码(博客或文章)reactnode.js前端工程sass / lessgulp(优先) / gruntnpm(命令)webpack(必备)...原创 2020-02-13 20:05:36 · 551 阅读 · 0 评论 -
前端技术教程推荐学习
Flex布局Flex布局教程:语法篇-----链接Flex布局教程:实例篇-----链接移动端开发设备像素比devicePixelRatio简单介绍持续更新中…原创 2019-08-16 12:58:05 · 160 阅读 · 0 评论