关注
分享
编程哲学家
资深PHP，擅长抽象编程，没有我实现不了的需求，没有我解决不了的问题；主导过多个成功的项目，带领过超过十人以上团队，擅长架构与程序设计、发掘业务以及解决各种各样的问题，知识面广，博学，爱智慧与思考。
展开
-
js用户点击提交后检测并为未填写的输入框赋值
<!-- 此应用场景为翻译：--> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-body"> &l.原创 2020-12-25 11:14:45 · 375 阅读 · 0 评论 -
简单js检测滚动条是否滚到底部
$(document).ready(function(){ ajax_load_sourch();//第一次加载填充页面 var range = 50; //距下边界长度/单位px var totalheight = 0; $(window).scroll(function(){ var srollPos = $(window).scrollTop(); ...原创 2020-02-03 19:15:39 · 548 阅读 · 0 评论 -
【浏览器地址栏小技巧】浏览器地址栏运行/预览html代码
1.地址栏预览html代码data:text/html,<h1style='color:red'>Hello,world!</h1>2.浏览器秒变编辑器，可粘贴图片data:text/html, <html contenteditable>...原创 2020-01-27 17:41:35 · 855 阅读 · 0 评论 -
webkitdirectory属性 实现文件夹上传
html ：<form class="form-horizontal" role="form" id="fileUploadForm" action="/sys/uploadFolder" name="fileUploadForm" method="post" enctype="multipart/form-data"> <div class="form-gro...原创 2020-01-14 12:08:47 · 3510 阅读 · 0 评论 -
移动前端js图片压缩上传实践
此前跟同事聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果链接在文章底部贴出。 在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。 目前来说，HTML5的各种新A...原创 2020-01-09 15:35:59 · 299 阅读 · 0 评论 -
HTML5之Javascript多线程
Javascript执行机制在HTML5之前，浏览器中JavaScript的运行都是以单线程的方式工作的，虽然有多种方式实现了对多线程的模拟（例如：Javascript 中的 setinterval 方法，setTimeout 方法等），但是在本质上程序的运行仍然是由 JavaScript 引擎以单线程调度的方式进行的。在 HTML5 中引入的工作线程使得浏览器端的 Javascri...原创 2020-01-09 10:28:39 · 222 阅读 · 0 评论 -
网站性能优化：懒加载和预加载
一、懒加载1.什么是懒加载懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。2.为什么要用懒加载能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如...原创 2020-01-08 10:25:16 · 335 阅读 · 0 评论 -
深入理解浏览器的缓存机制
一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据...转载 2020-01-08 10:09:21 · 158 阅读 · 0 评论 -
浏览器缓存机制的深入解析
一、简介浏览器缓存浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向服务器再次发送请求，从而返回新的数据。缓存的优点：优秀的缓存策略可以缩短网页请求资源的距离，减少延迟。 缓存文件可以重复...转载 2020-01-08 10:03:34 · 355 阅读 · 0 评论 -
前端进阶（一）浏览器运行原理
最近随着项目经验的增加，打算写一个前端工程师进阶的系列，一是作为自己前端开发经验的总结；二是想把经验分享给刚入门前端，重复写了大量的前端代码，但是没有提升的同学，让我们一起成长为真正的前端开发工程师。刚开始关注浏览器运行原来大概是刚接触前端时，项目组让我解决一些页面的兼容性问题，当时认真研究了浏览器的运行原理，并对组内的同事做了简单的分享，现在经历过大量项目的洗礼，觉得有必要将这部分内容的精华...转载 2020-01-03 17:13:53 · 250 阅读 · 0 评论 -
浏览器内部工作原理
目录 一、介绍 二、渲染引擎 三、解析与DOM树构建 四、渲染树构建 五、布局 六、绘制 七、动态变化 八、渲染引擎的线程 九、CSS2可视模型 英文原文：How Browsers Work: Behind the Scenes of Modern Web Browsers 一、介绍 浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作...转载 2020-01-03 17:06:41 · 179 阅读 · 0 评论 -
DOMContentLoaded与load的区别
(1)在chrome浏览器的开发过程中，我们会看到network面板中有这两个数值，分别对应网 络请求上的标志线，这两个时间数值分别代表什么？(2)我们一再强调将css放在头部，将js文件放在尾部，这样有利于优化页面的性能，为什么这种方式能够优化性能？(3)在用jquery的时候，我们一般都会将函数调用写在ready方法内，这是什么原理？首先看一下DOMContentLoade...转载 2019-12-24 15:29:38 · 100 阅读 · 0 评论 -
css3新增pointer-events属性可阻止hover、active、onclick等触发事件
pointer-events更像是JavaScript，它能够： 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的hover和active状态的变化触发事件 阻止JavaScript点击动作触发的事件 实际代码使用中案例：1、提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止...原创 2019-12-24 12:00:58 · 240 阅读 · 0 评论 -
js实现文件拖拽上传
本地上传，提前预览（图片，视频）1.html中div标签预览显示，button标签触发上传事件。[html]view plaincopy<divid="drop_area"style="border:3pxdashedsilver;width:200px;height:200px">将图片拖拽到此</div> <buttononcl...转载 2019-12-21 15:09:14 · 827 阅读 · 0 评论 -
关于jquery click()方法模拟点击事件对a标签不生效对问题
1 <ahref="www.baidu.com"></a> 问题分析点击A标签本身，并不会触发跳转到指定链接的事件，就是说，我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。打印$(“a”)[0]，得到的是http://w...原创 2019-12-13 15:04:38 · 348 阅读 · 0 评论 -
前端图片canvas，file，blob，DataURL等格式转换
最近用到一些图片相关的操作，记录一下笔记。将file转化成base64场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：方法一：利用URL.createObjectURL()<!DOCTYPE html><html><head> <t...转载 2019-12-11 10:41:08 · 774 阅读 · 0 评论 -
js 实现上传图片/拍照预览功能(无须上传即可预览)
我们在做网页时经常会需要有上传图片的需求，可能是选择图片或者拍照上传。本文记录了使用css+js实现图片选中后的预览及压缩上传功能，需要的朋友参考下吧HTML code：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta ...原创 2019-12-11 10:28:55 · 503 阅读 · 0 评论 -
使用CSS设置边框和背景
一、设置边框 1、边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a、border-width属性 自定义边框的宽度时，不能定义为百分比。 b、border-style属性 以上...转载 2019-12-07 12:20:25 · 1038 阅读 · 0 评论