- 博客(54)
- 收藏
- 关注
RSS订阅原创 首屏加载
一、首屏以800*600像素尺寸为标准，当浏览器加载页面后看到的第一眼的显示内容为首屏。而从开始加载到浏览器页面显示高度达到600像素且此区域有内容显示的时间为首屏显示时间二、首屏优化原因一个页面的“总加载时间”要比“首屏时间”长，但对于最终用户体验而言，当内容充满首屏的区域时，用户就可以看到网站的主要内容并可以进行相应的操作，所以，首屏时间的快慢，直接影响到用户对网站的认知度...
2018-08-27 21:00:19
951
原创 display：inline-block引发的空白间隔问题
1、li标签举例为了让li在一行显示，并且可以设置宽高，我们设置li的display：inline-block，这时<li>之间会出现8px的空白间隔。如下所示：代码如下：html: <ul> <li class = "a">a</li> <li class = "b">b</li&
2018-08-09 17:39:59
1179
原创 页面可见性
1、页面可见性显示的页面：当前正在看的页面隐藏的页面：我们没有看到的页面2、给document添加visibilitychange事件，document.hidden为true则可见，为false则为隐藏，不同页面之间切换，触发visibilitychange事件。document.addEventListener("visibilitychange", function(){...
2018-08-08 22:24:22
495
原创 Canvas性能优化
1、Canvas是html5新增的画布元素，允许我们使用Js来绘制图形2、Canvas最常见的用途是渲染动画。渲染动画的基本原理无非是反复的擦除和重绘。为了动画的流畅，留了一帧的时间，我们需要在16ms完成游戏逻辑的处理，对象位置、状态的计算以及把他们画出来。一旦消耗时间多了，用户就会感觉卡顿。所以提高动画的性能很重要3、优化渲染性能总体思路：在每一帧中，尽可能减少调用渲染相关...
2018-08-07 16:38:50
5049
原创 JS实现AOP（面向切面编程--装饰者模式）
1、AOP：主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的方式参入业务逻辑模块中。2、AOP好处保证业务逻辑模块的纯净和高内聚性 方便复用日志统计等功能模块3、JS实现AOP思路：把一个函数“动态织入”到另一个函数之中。我们使用Function.prototype来实现...
2018-08-07 11:24:11
1520
原创 js递归优化
1、记忆优化：函数可以通过对象obj去记录之前操作的结果，从而避免无谓的运算/*优化前*/var count = 0;function fibonacci(n){ count++; //统计函数调用的次数 return n<2 ? n: fibonacci(n-1)+fibonacci(n-2);}console.log(fibonacci(4)); ...
2018-08-07 09:28:13
808
原创 pc端，移动端，客户端的区别
pc端与移动端的区别1、从兼容方面来说，pc考虑的是浏览器的兼容性，移动端考虑的是手机兼容性，因为目前不管是安卓还是ios手机，一般的浏览器都是webkit内核2、从事件处理上说，移动端主要是触屏事件，而缺少hover事件3、从布局上来说，移动端一般要做到布局自适应4、从动画处理上，pc端由于要考虑IE的兼容性，通常使用js做动画，而移动端一般用css5、在框架选择中，一般pc...
2018-08-07 09:21:37
23870
原创 JS与ES、JS与jQuery
js是什么语言js是一门为了网页交互而设计的语言，由三部分组成，包括ES+DOM+BOM；特点如下： js是一门弱类型语言，可以定义多种类型的变量，灵活性 js是一门解释性脚本语言，在代码执行时逐行解释，不像java等需要预编译，执行起来快 具有跨平台行，js依赖于浏览器，与操作系统无关，只要有浏览器，就能运行js代码【脚本语言】不需要显示编译的语言，动态语言，比如PHP、JSP、JS...
2018-08-07 09:20:48
6745
原创 TCP窗口滑动以及拥塞控制
TCP的可靠性和流量控制由滑动窗口协议保证拥塞控制则由控制窗口结合一系列的控制算法实现1、滑动窗口协议滑动：指这段“允许发送的范围”是可以随着发送的过程而变化的，方式就是按顺序滑动窗口：对应一段可以被发送者发送的字节序列，其连续的范围称之为“窗口”【注意】①TCP协议的两端分别为发送者A和接收者B，由于是全双工，因此A和B应该维护着一个独立的发送缓存区和接收缓存区，并且是对...
2018-07-23 12:19:34
724
原创 DNS负载均衡和NGINX负载均衡
负载均衡：把请求均匀的分摊到多个服务器上处理两种负载均衡：客户端与反向代理服务器之间的DNS负载均衡 服务器与反向代理服务器之间的负载均衡，可以使apache+tomcat负载均衡，也可以是ngnix负载均衡DNS负载均衡DNS负载均衡是通过DNS服务器实现的，主要用于把请求均匀的分布到nginx服务器上，真实情况可能是根据区域区分请求，但是一个地域中请求还是需要均匀的分配到ngi...
2018-07-17 18:12:16
1586
原创 解决CSS3动画卡顿问题
解决方法：尽量使用transform属性，避免使用height、width、margin、padding等要求较高时，可以开启GPU硬件加速器1、尽量使用transform属性，避免使用height、width、margin、padding等①、因为，transform属性不会更改元素或它周围元素的布局，只是对元素的整体产生影响，比如缩放、旋转这对浏览器是个好消息，浏览器只需要一次生成这个元素的位...
2018-07-02 10:02:18
7744
1
原创 JS内存泄露排查方法
1、使用工具Heap Profiling①、Heap Profiling可以记录当前的堆内存（heap）的快照，并生成对象的描述文件，该描述文件给出了当时JS运行所用的所有对象，以及这些对象所占用的内存大小、引用的层级关系等等。②、JS运行的时候，会有栈内存（stack）和堆内存（heap），当我们new一个类的时候，这个new出来的对象就保存在heap里，而这个对象的引用则存储在stack里。程...
2018-06-29 10:47:08
8995
原创 jQuery与vue的区别
1、jquery：轻量级的js库2、vue：前端js库，是一个精简的MVVM，它专注于MVVM模型的viewModel层，通过双向数据绑定把view和model层连接起来，通过对数据的操作就可以完成对页面视图的渲染。3、vue和jquery对比：vue是通过vue对象将数据和view完全分离开的，对数据操作不在引用相应的DOM对象；主要是操作数据jQuery是使用选择器（$）选取D...
2018-06-27 16:57:22
6934
原创 js加载的几种方式
1、同步加载（阻塞加载）只有当当前加载完后，才能进行下一步操作。但是如果js中有输出document内容、修改dom等，则会造成页面阻塞，所以一般建议把<script>放在<body>结尾处2、异步加载（非阻塞加载）浏览器再下载执行js的同时，还会继续进行后续页面的处理①onload时的异步加载(function(){if(window.attac...
2018-06-27 15:47:54
7779
原创 移动端点击300ms延迟问题
1、问题来源移动端浏览器会有一些默认行为，比如双击缩放、双击滚动。当用户一次点击屏幕之后，浏览器并不能判断用户是要单击还是双击，因此就会等待300ms，以判断用户是否再次双击屏幕。之前人们可能不会care这300ms的延迟，但是随着用户对体验的要求越来越高，这300ms的卡顿会让人体验很差。2、解决浏览器开发商的解决方案①禁止缩放当HTML文档头部包含如下meta标签时,表明这...
2018-06-26 11:31:38
543
原创 操作系统知识点
死锁1、死锁的形成如果一组进程中，每个进程都在等待仅由该组进程中的其他进程才能引发的事件，那么该组进程就是死锁2、三种情况①、竞争不可抢占资源引起死锁假设有p1和p2两个进程，都需要A和B两个进程，现在p1持有A等待B，P2持有B等待A，两个都等待另一个资源而不肯释放资源，就这样无限等待中，就形成了死锁【不可抢占资源---打印机、光驱等】②、竞争可消耗资源引起死锁有...
2018-06-25 20:01:38
145
原创 严格模式的限制
1、严格模式是ES5引入的，不属于ES62、ES6自动采用严格模式3、严格模式的限制①没有变量提升，变量必须先声明在使用②不能重复声明③argument不会自动反应函数参数的变化④eval不会在其外层作用域中引入变量⑤禁止this指向全局变量⑥增加了保留字（比如protected、static和interface）⑦三不能不能使用with语句不能使用前缀0表示八进制数，否则会抱错不能删除变量，只能...
2018-06-21 16:20:20
765
原创 ES6中Promise的用法
1、promise是一个构造函数，那就new一个出来var p = new Promise(function(resolve,reject){ //做一些异步操作 setTimeout(function(){ console.log("执行完成"); resolve("随便什么数据"); }, 2000);});①Promise函数中有...
2018-06-21 10:39:31
3149
原创 JS闭包总结
任何在函数内部定义的变量，都是私有变量，因为这些变量在函数外部是无法访问到的。但是在函数内部创建闭包，闭包通过自己的作用域链也可以访问这些变量，利用这一特点，就可以创建用于访问私有变量的公共方法。1、定义 有权访问另一个函数作用域的函数 函数可以记住并访问其词法作用域，无论这个函数是在当前词法作用域之内还是之外执行2、三种情况 函数作为返回值 函数作为参数传递 作用域中...
2018-06-19 11:36:07
150
原创 懒加载和预加载
懒加载（延迟加载）①图片懒加载：当访问一个页面的时候，先把图片路径替换为一张大小为1*1px图片的格式（这样就只请求一次，俗称占位图），只有当图片出现在浏览器的可视区域时，才设置图片真实的路径，让图片显示出来②原因：图片数量多时，而且比较大时，如果一次性加载完，会加载的特别慢，影响用户体验③原理：页面中的img元素，如果没有src属性，浏览器就不会发送请求去下载图片，只有设置了图片路径，浏览器才会...
2018-06-12 16:10:37
198
原创 js使用sessionStorage、cookie保存token
本文是参考别人的博客写的，图片直接用的别人的1、Token：token是客户端频繁向服务器端请求数据，服务器频繁的去数据库查询用户名和密码进行对比，判断用户名和密码正确与否，并作出相应的提示，在这样的背景下，token便应运而生了。2、使用token的目的：token的目的是为了减轻服务器的压力，减少频繁的查询数据库。3、在前端请求后台的API接口的时候，为了安全性，一般需要再用...
2018-06-04 20:50:09
35464
原创 JS阻塞和CSS阻塞
JS的阻塞1、所有浏览器在下载JS的时候，会阻止其他的一切活动（比如其他资源的下载，内容的呈现等等）。为了提高用户体验，新一代浏览器都支持并行下载JS，但是JS下载还是会阻止其他资源的性爱在（图片、css文件等等）2、原因：浏览器为了防止出现JS修改DOM树，需要重构DOM树的情况，就会阻止其他资源的下载和呈现3、嵌入JS会阻止所有内容的呈现，但是外部JSD只会阻止其后内容的显示CSS阻塞1、IE...
2018-05-14 11:53:44
2067
原创 对网站重构的理解
网站重构：在不改变外部行为的前提下，简化结构，添加可读性，而在网站前端保持一致的行为。也就是说：在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI对于传统的网站来说，重构是指：1、表格布局（table）改为DIV+CSS2、使网站前端兼容于现代浏览器3、对于移动平台的优化4、对于SEO进行优化5、减少代码间的耦合6、对JS DOM的操作7、采用CDN来加速资源加载8、http服务器的...
2018-05-14 11:36:58
1784
原创 一个通用的事件侦听器函数
// event(事件)工具集，来源：github.com/markyunmarkyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; ...
2018-05-11 18:17:58
375
原创 前端面试题目
WebGL（Web Graphics Library） 3D绘画标准，允许js和OpenGL ES2.0结合在一起，通过增加OpenGL ES2.0的一个js绑定，webGL可以为HTML5 Canvas提供硬件3D加速渲染，这样web开发人员就可以借助系统显卡来在浏览器更流畅的展示3D场景和模型了，还能创建复杂的导航和数据视觉化。 显然，WebGL奇数标准免去了开发网页专用渲染插件的...
2018-05-08 10:49:18
125
原创 5G时代
无论是互联网的发展，还是智能手机的强大，可以肯定的说，都少不了对网络的需求，对网络的速度和稳定性也越来越高。虽然wifi的出现解决了室内网络，但是并没有解决随时随地上网。4G网络的出现很大程度上日常所需，但是5G却又下此程度上更进一步。什么是5G技术 在移动通信领域，第一代是模拟技术，第二代是数字化语音通信，第三代是3G技术，以多媒体通信为特征，第四代是4G技术，其通信速率大大提高，标志着进入无线...
2018-05-07 09:12:25
361
原创 浅谈HTML5
html5的字符集：<meta charset = "UTF-8">优点：①网络标准统一，HTML5本身是由W3C推荐出来的②多设备，跨平台③及时更新④语义化： 提高可用性和改进用户的友好体验 有几个新的标签，有助于开发人员定义重要的内容⑥可以给站点带来更多的多媒体元素（音频和视频）⑦可以很好的代替Flash和Sliverlight⑧被大量应用于...
2018-05-02 10:18:59
703
原创 web前端性能优化方案
前端性能优化方案测试代码性能的工具： 1. Profiler2. JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）3. Dromaeo目的：① 从用户角度而言，优化能让页面加载得更快、对用户得操作响应更及时，能为用户提供更友好的体验②从服务商角度而言，优化能减少页面请求次数，减少请求...
2018-04-25 10:55:10
452
原创 浏览器兼容问题
1、不同的浏览器的内核不一样，所以各个浏览器对网页的解析是有一定出入的，这是导致浏览器兼容问题的主要原因浏览器内核的理解：主要分为两部分：渲染引擎和JS引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（加入CSS等）、计算网页的显示方式，然后输出至显示屏或者打印机。JS引擎：解析和执行js来实现网页的动态效果IE：trident内核 Firefox :...
2018-04-10 17:34:03
327
原创 js的跨域问题
示例代码在E/AjaxGGW/跨域问题，参考书签掘金（正确面对跨域，别慌）1. 跨域：浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制2. 同源策略限制了以下行为： Cookie、LocalStorage和IndexDB无法读取 DOM和JS对象无法获取 Ajax请求发送不出去为什么要同源策略：举例说明：比如一个黑客...
2018-04-10 12:02:21
198
原创 JS中常见的安全漏洞
1、基于DOM的跨站点脚本编制（XSS）①XSS（Cross Site Script）：跨站点脚本编制，指的是攻击者向合法的web页面插入恶意的脚本代码（通常是是HTML代码和JS代码），然后提交给服务器，随即服务器响应页面（被植入的恶意脚本代码），攻击者可以利用这些恶意脚本代码进行会话挟持登攻击。例如：攻击者在论坛中放一个看似安全得连接，骗取用户点击之后，盗取cookies得用户隐私信...
2018-04-09 10:09:18
15928
原创 【58】笔试总结（4.1）
前端岗分为4类题目：10道填空；5道简答；2道应用；1道编程填空题1、移动端特有的事件手指按下 ontouchstart手指移动 ontouchmove手指抬起 ontouchend移动端不用click事件：因为移动端得click有300ms延迟，在移动端浏览器中，连续两次点击是缩放操作，所以在用户点击屏幕之后，浏览器会检查300ms内是否有另一次点击，如果没有则触发click事件，因此有延迟，不...
2018-04-02 10:04:36
498
原创 http协议、进程与线程等
1、http1.0和http1.1的区别① 1.1支持长连接和请求的流水线处理，在同一个TCP连接中可以传送多个HTTP请求和响应，多个请求和响应可以重叠； 1.0 短连接，浏览器的每次请求都需要与服务器建立一个TCP连接，服务器完成请求处理后，立即断开TCP连接，并且无记录。② 1.1增加host字段在1.0中认为每台服务器都绑定一个唯一的IP地址，请求消息中的URL并没有...
2018-03-29 22:14:03
1383
原创 html和jsp的区别
1. 静态web一般指html：① 事先由用户写好放在服务器上，由web服务器向客户端发送② 静态web无法连接数据库③ 由于现在的web页面，大量使用js，导致浏览器打开页面，就会占用大量的内存，服务器的压力是减轻了，但是压力都转移到了客户端④ 每个人在任何时候看到的页面都是一样的⑤ 可以直接用本地的浏览器打开2. 动态web一般指jsp页面：① 一般是依靠服务器端的
2018-01-16 11:26:32
224
原创 Flex布局教程：实例篇
Flex布局教程：实例篇本文中介绍的布局格式包括以下七种：一、骰子的布局二、网格布局三、圣杯布局四、输入框的布局五、悬挂式布局六、固定的底栏七、流式布局一、骰子的布局二、网格布局2.1基本网格布局（其实可以用boorstrap？吧）最简单的网格布局就是平均布局。在容器里边平均分配空间 Html代码如下： //flex容器... //
2018-01-11 20:48:31
355
原创 数据缓存
4-1 内存泄露1.内存泄露：指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束2.常见内存泄露的几种情况：①循环引用②js闭包③DOM插入3. 其实绝大多数的内存泄露都不是由js引起的，浏览器的回收机制已经做的相当好了，多数的泄露都是由于与DOM交互而产生的。4. 循环引用很常见，且大部分情况下是无害的，但当参与引用的对象中有DOM对象（document.g
2018-01-08 15:58:36
279
原创 观察者模式（发布订阅模式）
1.观察者模式的背后，总的想法是在应用程序中增强松耦合性。 2.一个对象作为特定任务或是另一个对象的活动的观察者，并且在这个任务或活动发生时，通知观察者。 3.观察者也被叫做订阅者，它指向被观察的对象，即被观察者。当事件发生时，被观察者就会通知观察者。 4.观察者的使用场合 当一个对象的改变需要同时改变其他对象，并且它不知道有多少对象需要改变的时候。 5.JS中对观察者模式的实现是通过回调
2018-01-04 15:59:49
1380
1
原创 jQuery回调对象
1. $.Callbacks()模块开发目的是：给内部的$.ajax()和$.Deferred()模块提供统一的基本功能组件。它可以用来作为类似基础定义的新组件的功能2. “异步模式”一共有4种方法，这4中方法可以写出结构更合理，性能更出色，维护更方便的js代码。①回调函数（callback）：将一个函数A作为参数传递给另一个函数B，作为参数的这个A函数就是回调函数②事件监听（List
2018-01-04 15:57:43
219
原创 理解回调函数
1.在JavaScript世界中，函数作为“一级公民”，也称之为“第一级函数” ①拥有一切传统函数的使用方式（声明和调用） ②可以做到像简单值一样赋值、传参、返回 ③还可以通过操作符new来充当类的构造器 2.在js中，函数是第一类对象，所以在js中的函数： ①能“存储”在变量中 ②能作为函数的实参被传递 ③能从函数中返回 ④能在函数中被创建 3.回调函数 ①回调函数就是一个
2017-12-28 14:47:23
258
原创 get()方法和eq()对比
1.jQuery提供了.get()、 :index() 、 :lt()、 :gt()、 :even()、及odd()这类索引值相关的选择器，他们的作用可以过滤他们前面的匹配表达式的集合元素，筛选的依据就是这个元素在原先匹配集合中的顺序 2.get方法–通过检索匹配jQuery对象得到对应的DOM元素，如下代码：aaabbb$(“li”).get(0); //由于索引是以0开始计数的，所
2017-12-27 11:15:04
815
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人