03 2018 档案

前端性能优化方案
摘要：1.使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显 2.针对带cookie的请求，由于在同域名的资源请求时，浏览器会默认带上本地的cookie，针对这种情况，在某些场景下是需 阅读全文
posted @ 2018-03-30 14:39 炫冰G爱 阅读(217) 评论(0) 推荐(0)
对浏览器内核（渲染进程）的理解
摘要：浏览器的渲染进程（是Browser进程，浏览器插件进程，GPU进程，渲染进程中的一种进程）包含的一些主要常驻线程： GUI渲染线程 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow 阅读全文
posted @ 2018-03-30 13:53 炫冰G爱 阅读(483) 评论(0) 推荐(0)
从输入url到浏览器加载过程（回答此问题的一个主干脉络）
摘要：从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系） 开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识） 从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理 阅读全文
posted @ 2018-03-29 14:02 炫冰G爱 阅读(205) 评论(0) 推荐(0)
如何减少回流，重绘
摘要：1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器） 2. 让要操作的元素进行”离线处理”，处理完后一起更新 a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；b) 使用display:none技术，只引发两次回流和重绘；c) 使 阅读全文
posted @ 2018-03-29 13:52 炫冰G爱 阅读(243) 评论(0) 推荐(0)
mac常用启动各种服务的命令
摘要：1.Mac上Apache和Tomcat服务器启动命令 Mac上Apacha服务器启动命令： sudo apachectl start/restart/stop 或者sudo httpd -k stop/start Mac上Tomcat服务器启动命令： startup.sh/shutdown.sh 2 阅读全文
posted @ 2018-03-26 15:51 炫冰G爱 阅读(972) 评论(0) 推荐(0)
css优先级和权重问题
摘要：css等级的定义如下： 阅读全文
posted @ 2018-03-26 10:52 炫冰G爱 阅读(145) 评论(0) 推荐(0)
万能清除浮动方法
摘要：//步骤一：css上定义伪元素： .clearfix:before,.clearfix:after { content: ""; display: block; clear: both; } //步骤二：在父级加入类名"clearfix"即可实现清楚浮动的效果 阅读全文
posted @ 2018-03-26 10:24 炫冰G爱 阅读(3370) 评论(0) 推荐(0)
通过blob(用来存储二进制大文件)包装ajax（或axios）请求到的data数据，实现下载EXCEL(或其他如图片等)文件
摘要：//案例一 axios：设置返回数据格式为blob或者arraybuffer 如： var instance = axios.create({ ... //一些配置 responseType: 'blob', //返回数据的格式，可选值为arraybuffer,blob,document,json,text,stream，默认值为json }) ... 阅读全文
posted @ 2018-03-22 10:00 炫冰G爱 阅读(9539) 评论(0) 推荐(1)
H5手机端页面适配，rem+高分屏适配（同时解决1px像素问题）
摘要：Document 阅读全文
posted @ 2018-03-20 20:26 炫冰G爱 阅读(3911) 评论(0) 推荐(0)
js文件、图片上传（原生方法和jquery的ajax两种都有）
摘要：<!DOCTYPE html><html> <head> <title>test</title> </head> <body> <input type="file" id="fileUpload"> <button id="submit">点击上传文件</button> <script src="j 阅读全文
posted @ 2018-03-20 13:56 炫冰G爱 阅读(495) 评论(0) 推荐(0)
js压缩图片的方法(手机端，兼容ios和android),返回值为base64的字符串，压缩率ratio可自定义
摘要：方法的定义： getCompressBase64(img, ratio){//img为通过"document.getElementByTagName('input[type=file]')[0]"拿到的图片blog对象, 压缩率ratio范围为0-1 if(Object.prototype.toSt 阅读全文
posted @ 2018-03-20 10:57 炫冰G爱 阅读(557) 评论(0) 推荐(0)
js通过Image和canvas获取图片的base64格式的字符串（只能接受服务器上的图片，不支持本地图片直接转化为base64，因为js没有系统io的权限，js只能操作dom）
摘要：function getBase64(url){ //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染 var Img = new Image(); var dataU 阅读全文
posted @ 2018-03-20 10:31 炫冰G爱 阅读(1002) 评论(0) 推荐(0)
js通过fileReader获取图片的base64格式（pc端和手机端都可以，但是要先在页面中创建dom）
摘要：1 // 创建一个FileReader对象 2 var reader = new FileReader(); 3 4 // 绑定load事件 5 reader.onload = function(e) { 6 console.log(e.target.result); 7 } 8 9 // 读取Fi 阅读全文
posted @ 2018-03-20 09:54 炫冰G爱 阅读(2252) 评论(0) 推荐(0)