allenliu6-CSDN博客

原创从web浏览器的渲染到性能优化

本文主要讲谈及web浏览器的渲染原理、流程以及相关的性能问题最近在复习时遇到一个问题，关于async和defer，发现自己还能记住一点，然而再往深一想，浏览器的渲染顺序？怎么防止阻塞DOM渲染？如何保证首屏优化、关键渲染路径优化？如何从浏览器渲染、网络请求、js引擎机制优化性能？好像找不到让自己满意的答案，所以查阅资料写个博客总结一下。

2017-08-05 16:06:28 6630

翻译【译】从输入URL到页面渲染完成

以下是我意译加直译了原文作者的文章内容，翻译得不好，还请多多指教。原文链接：从输入URL到页面渲染完成作为一个软件开发者，你一定会对网络应用如何工作有一个完整的层次化的认知，同样这里也包括这些应用所用到的技术：像浏览器，HTTP，HTML，网络服务器，需求处理等等。本文将更深入的研究当你访问一个URL时，到底发生了一件件什么样的事。

2017-04-25 20:46:43 6052

原创跨域方法小结 CORS JSONP emmet window.name等

js跨域指，通过js在不同域之间进行数据传输或通信，如ajax获取不同域数据，js获取页面内不同域的iframe中的数据。只要协议、域名、端口有一个不相同即为跨域如今才意识到无时无刻不在跨域，多少客户端和服务器端域名不同1.jsonp json+padding 利用script标签不受不同域影响的性质，在自己代码中添加js src链接的url值，用url参数发送请求并规定回...

2017-03-16 21:12:35 1052

原创记科大讯飞武汉研发中心前端面试

很幸运遇到了一个人很好的面试官，问的问题也比较基础，不过自己可能还是基础不扎实吧，也有点紧张，问题回答的一般，主要自己会的都没有说的太好，希望下次面试会有进步，加油！

2017-03-16 20:54:59 10777 4

原创 JS函数参数都是按值传递的！

访问变量有按值和按引用两种方式，但参数只能按值传递在向参数传递基本类型的值时，被传递的值会被复制给命名参数，即arguments对象数组的中一个元素。在向参数传递引用类型的值时，会把这个值在内存的地址传递给命名参数即函数内的局部变量，此时若局部变量变化则可以影响到函数外部。基本类型传值比较好理解，下面给出一个书中引用类型传值的例子：

2016-09-12 20:09:49 3413

原创下拉选择组件从内部组件到 ant-design 不得不说的三个故事

前言昨天接到了第一个需求吧，目标就是一句话：把 @mtfe/react-dropdown 组件替换为 antd 的Select组件用图来说就是从到分解一下工作点表现当长度过长时，不会出现滚动条，而是向左或向右扩展正常的过滤以及选择功能具体实现：要求组件自由配置输入框与下拉框宽度样式灵活配置下拉框相对位置输入字符过滤，键盘上下键和回车可以在下拉框中控制选择内容明

2017-12-09 11:58:28 20445 1

原创 2017秋招百度前端一面面经

react用的怎样？react和vue的区别mvc和mvvm的区别为什么选择mvvmsass的优势webpack的用途es6了解哪些设计模式了解哪些let和var的区别模块化了解哪些透明度父元素透明度，子元素如何不继承了解一下子元素如何不强制继承属性进程和线程死锁排序线索二叉树长连接和短连接性能优化了解吗从输入URL到页面呈现iframe开发遇到哪些坑

2017-11-19 11:55:37 782

原创 vue2.5 与 typescript 不知不说的那些事

前言没有特殊原因建议还是不要过快往vue中加入typescript，typescript和vue是比较成熟，但vue刚添加支持，契合度以及资料等都比较少，所以容易踩到坑，写起来并不顺手。

2017-11-15 21:35:54 4147

原创谈谈布局那些事

前言最近遇到布局的一些问题，特此归纳总结一下。文章将从几个重要的布局概念，也是布局的原理、基础说起，最后从早期的table布局说起一直到比较新的grid布局结束，具体会粗略讲解以下几部分内容：float、positonBFC\IFC堆叠上下文flexgrid响应式布局著名布局从最早有界面这个概念时，布局就应运而生，如果说内容是界面的血肉，那么布局其实就是界面的骨架，没有良好的骨架，再

2017-10-25 21:31:59 560

原创关于DOM中元素位置、大小的API

综述DOM 的 API 繁多复杂，拿一个节点来说首先你要根据选择器或节点的特征获取到这个元素或者干脆创建一个节点然后你要使用具体的 API 来了解这个元素，如获取元素的style对象、位置、大小、属性、事件等最后你要使用强力的 API 对节点进行操作，如改变前面了解到的信息甚至对节点整体进行操作不论你使用什么框架，界面展示的最终环节基本就靠上面提到的 DOM API 进行，而框架的作用只是替

2017-10-24 13:00:15 685

原创浅析HTTP缓存

前言没有缓存的浏览器是无源之水、无根之木，需要通过不等次数的网络来回获取资源，而网络情况是不确定的，所以网络请求一直被我们视为洪水猛兽。所以不管是为了加快用户访问速度、改善用户体验，还是节约流量，存储之前获取的资源并留待以后重复利用势在必行。HTTP缓存主要是根据HTTP协议的约定，主要还是服务端通过HTTP头部字段等进行控制，客户端接收到相关字段并进行相应缓存存储以及命中逻辑。

2017-10-12 21:29:17 270

作为前端开发，HTTP和我们息息相关，因为我们的全部资源都是从server拿过来的，client只作为一个解析和呈现的终端，主要还是提供一个与用户进行交互的地方。整体来说就是：计算机语言编译或解释执行各种资源、数据，向计算机发送各种指令，计算机凭借着高速的计算呈现出结果。HTTP历史一篇有逼格的文章怎么少得了历史1989年，一个物理学家想做一个科学家之间分享知识的超文本文档网络。他称之为world

2017-09-13 09:44:41 670

原创响应式学习----从VUE1 到 VUE2

最近比较喜欢一张非常喜感的图。其实最初的前端很简单，就跟这位大爷的说法差不多，直接拿起键盘，搞个编辑器然后打开浏览器就可以了，我相信包括我在内的很多人也就是这么单纯地喜欢上前端的，记得宇豪也是说喜欢前端就是因为CSS。起初的前端，标准混乱，浏览器性能差，随着ajax和node出现带来的两次飞跃，前端能做的事情越来越多，越来越多的需求也放到了前端，由后端主导的静态页面发展到了前后端分离的

2017-08-31 22:34:21 985

转载 JS开发中的一些小技巧和方法

前言这两年前端很火，JavaScript又是前端的必会技能，在JavaScript开发中其实有一些有意思的小技巧和方法，本文记录了一些我工作中遇到的一些技巧和方法。正文生成指定范围内的随机数当我们需要获取指定范围(min,max)内的整数的时候，下面的代码非常适合；这段代码用的还挺多的。function setRadomNum(min,max){ return M

2017-08-31 13:57:18 324

原创踩坑之统计请求发送与页面跳转冲突

随着大数据时代的到来，数据成了兵家必争之地，据之前的数据统计全球数据基本一年多就会翻上一番，当然从数据中做出成绩的公司也数不胜数，与此同时，我们也是越来越高重视数据采集，数据将作为每一个公司的重要战略资源，不断进行清洗挖掘储存。扯远了，作为横跨各大平台的web无疑是数据采集的重要阵地，我就最近在数据采集这方面遇到很大一坑。

2017-08-18 14:46:33 3510

翻译关于缓存的那些传说

原文链接：https://calendar.perfplanet.com/2016/a-tale-of-four-caches/译者说：英文好建议直接阅读原文，作者写的还是比较逗的，译者可能幽默天赋有限，另外还有一些意译所以对不起读者了最近几天大家针对preload、、http/2 push和service worker等浏览器缓存讨论了很多，但是还是有很多困惑。所以，我想跟大家讲个故事

2017-08-09 22:02:27 248

原创个人的一些前端思考

Sass都提供了一个更简单、更优雅的语法CSS，实现各种功能,是比较有用的管理css样式的一种新方式。其实sass可以被看做是CSS3的扩展，其中也包括了许多cssnext的用法，包括变量、mixin等等函数或机制，使我们在编写代码时，大大提升开发效率，后续的维护、迭代甚至重构都更为简单。当然其最终还是会被编译为当前支持的CSS的语法sass也很容易入门，基本css的特性都保留着，只是增加了许多便利。

2017-08-09 15:23:36 296

原创 vue和react比较

相似之处： 1. 使用virtual DOM 2. 提供响应式和组件化的视图组件 3. 将注意力集中保持在核心库，将其他功能如路由、全局状态管理交个其他插件

2017-08-09 11:40:49 583

原创 HTML、CSS知识汇总

CSS透明度问题设置方法： opacityfilterrgbaimg{ opacity: 0.4; filter: alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ -khtml-opacity: .5;/* -khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safar

2017-08-08 22:24:57 354

原创从零开始react入门（一）

作为一个稍微有点基础的人吧，思来想去如何开始学习react呢，最终觉得还是选择权威，简单即有效，直接奔官网，讲真确实直接get started，英文水平不错的推荐直接英文，如果英文差一点也可以去中文翻译官网。如果读者还没搭好react开发环境，可以参考我的另一篇博客–––快速搭建简单环境。这里我也就是用官网的例子，讲一下自己的理解和体会，有不对敬请指出。

2017-08-02 16:51:03 849

转载【转】快速搭建react的webpack初始环境

网上找了半天才找到正常的教程，也是本文参考的教程可能是因为webpack版本等一些其他原因吧，我使用的是webpack3+，当然大家也可以选择react官方的脚手架—create-react-app。本文主要将完成以下目标 1. 使用webpack进行模块管理，并进行简单配置 2. 实现热更新，也就是监听代码变动并刷新浏览器 3. 实现HMR，也就是代码动态替换

2017-08-01 20:28:23 546

原创踩坑之页端唤醒nativeAPP

算是科普文吧，坑没填完。最近一直在填坑，好久没写博客了，工作终于暂时告一段落，正好趁此机会熟悉一下坑，以后继续填在native app综合表现还是优于web的现在，尤其是用户也已经习惯于使用native app，从web导流到native的需求还是比较常见，而与旺盛的需求相反的是唤醒native app的方法或者说途径十分操蛋，可谓是遍地是坑。

2017-07-09 16:09:03 3058

原创浅析前端MVC、MVP、MVVM模式

MVC是一种架构设计，通过关注点分离鼓励改进应用程序组织，其强调将业务数据（model）和用户界面（view）隔离，用第三部分控制器（controller）管理逻辑和用户输入。MVC其实是早期软件开发大牛想实现关注点分离时提出来的，后来也被广泛的使用在软件设计开发中，随着web大行其道，逐渐有人在web前端开始使用MVC模式，但很多框架其实更像是使用了MVC的变种MV*。

2017-06-10 19:15:54 1111

转载【转】异步与未来（一） --JavaScript实际执行顺序浅谈

作为单线程的JavaScript虽然速度不算慢吧，但跟多线程处理事务的速度以及方便程度还是有所差距吧，异步算是对此有所弥补以及增强吧，而异步编程的核心就是程序中现在运行的部分和将来运行的部分之间的联系。

2017-05-21 10:48:52 360

原创 2017年实习春招CVTE一面

在市中心的酒店面试，被百度地图坑了一把，走错了路迟到10分钟，不过微信扫码排队，也没人在乎你迟到吧。从11点多等到接近12点，面试了半个多小时，通过的应该是直接再进行二面。

2017-04-07 21:12:32 7004

原创 2017年春招途牛前端初面面经

今天下午去了人生中第一场前端面试，总体来说对自己表现不是很满意，不过在短短15分钟确实有一些收获，在这里总结一下，提醒自己也造福同学们吧面试预约15：30，我14：30到达签到处等待，等了一个小时，因为自己是第一个到的前端，所以也是第一个进去了，自己心里也有点谱，自己水平比较菜，而且前面面试的都比较短，估计不会问太具体，不过能说还是多说一点喽

2017-03-14 18:36:36 1933

原创 JavaScript冒泡捕获事件流详解

JavaScript事件由来已久，他们是js和html之间交互的桥梁，同时纵观整个事件响应得过程基本符合观察者模式，js订阅html中的事件是否发生，一旦发生即发布内容，js回调相应做出回应。

2017-03-13 13:36:39 473

原创 JavaScript杂谈之promise揭秘

所谓promise就是一个用来传递异步操作的消息，他代表了某个未来才能知道事件的结果，我们用这个代表了未来的结果先一步决定其下一步进行的操作，在ES6标准出之前我们是用笨拙的回调函数进行异步操作。事实上promise出现的意义要大得多，表面看来它只是让我们逃离了可怕的回调金字塔，让我们的代码颜值更高，语义化更强，更易于测试巴拉巴拉的一堆，但一个很多语言都坚定采用的标准有这么简单嘛？

2017-02-28 11:04:57 532

原创 JavaScript杂谈之iterator for循环

iterator为了给表示集合的数据结构如数组、对象、set、map等定义一个统一的接口，方便进行统一的遍历,ES6新增了一种遍历器机制即iterator。其作用有三个，提供统一便利的访问接口，是数据结构成员按照一定次序排列，供for of使用遍历。

2017-02-27 12:20:56 1257

原创 ECMAScript6简介和学习笔记（三）symbol proxy reflect set map

es6确实对es进行了较大的改动，从数据类型的变化就能反映出很大一部分。这一篇主要讲一下Symbol、Proxy和Reflect、Set、Map这四方面。

2016-12-21 12:19:02 609

原创 ECMAScript6简介和学习笔记（二）数组函数对象

这次我们来谈谈数组、函数、对象，这三个家伙出现的频率太高了。在整个js的体系中占据着非常重要的位置。es6对其的优化扩展也是整个es6比较重要的部分。

2016-12-19 22:08:47 630

原创 ECMAScript6简介和学习笔记（一） let const 解构

第一篇，介绍ECMAScript6 let const 解构赋值。

2016-12-08 16:23:16 666

原创读you don't konw js 有感之this全面解析

本文默认读者已经对this有了一定了解，如果读者觉得自己对this定义或者this的简单指向还有疑问，请先看我的另一篇文章。 this直译过来就是这个，它会被自动定义到所有函数的作用域中，不过这也造成了很多困扰，因为经常很难分辨它到底代表着什么，但由于它自身的功能确实可以提供很多便利，所以程序员不管能不能掌握this，不管会经常报错，还是会乐此不彼的使用它。那么this到底是什么？其实它是函数在运行时根据一定规则绑定到变量上的，在函数被调动时，会创建一个调用的记录，也被称为执行上下文，这个记录中记录着

2016-11-14 20:42:02 308

空空如也

空空如也